为了账号安全,请及时绑定邮箱和手机立即绑定

为什么没有鼠标浮动效果?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>京东商城</title>

<style type="text/css">

*{

margin:0;

padding:0;

}

body{

padding:0;

font-size:10px;}

.topmenu{

display:block;/*以块状形式展示*/

width:220px;

border:2px solid #e4393c;

margin:0;

padding:0;}

.toptitle{

height:40px;

line-height:40px;

text-align:left;

font-size:11px;

font-weight:bold;

color:#FFF;

background:#e4393c;

padding-left:20px;}

.topmenu li{

height:30px;

line-height:30px;

font-size:11px;

list-style-text:onoe;

text-align:left;

padding-left:8px;

z-index: 3;/*z-index设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面,像之后的二级目录的z-index就设置为4了**/

background-image:url(images/888.PNG);

background-repeat:no-repeat;

background-position:right;}

.topmenu li a{

text-decoration:none;

color: #313131;}

.topmenu li a:hover{

text-decoration:underline;/*下划线*/

font-weight:bold;/*加粗*/

color:#e4393c;}

.topmenu li:hover{

border:1px solid #DDD;

border-right:0;

box-shadow:0 0 8px #DDD;/*外发光效果*/

-moz-box-shadow:0 0 8px #DDD;

-webkit-box-shadow:0 0 8px #DDD;

background-image:none;}

.submenu{

display:none;

width:715px;

left:220px;

position:absolute;

top:40px;

border:1px solid #DDD;

z-index: 4;

background:white;

box-shadow:0 0 8px #DDD;/*外发光效果*/

-moz-box-shadow:0 0 8px #DDD;

-webkit-box-shadow:0 0 8px #DDD;}

.leftdiv{

background: gray;

float:left;

width:490px;

margin:5px;}

.rightdiv{

background: blue;

float:left;

width:200px;

margin:5px;}

.topmenu li:hover.submenu

{

display:block;

}

</style>

</head>


<body>

<ul class="topmenu">

    <div class="toptitle">

        全部商品分类

        </div>

    <li><a href="#">家用电器</a></li>

        <div class="submenu">

            <div class="leftdiv">

                左侧二级分类<br />

                左侧二级分类<br />

                左侧二级分类<br />

                左侧二级分类<br />

                左侧二级分类<br />

                </div>

                <div class="rightdiv">

                右侧广告图片<br />

                右侧广告图片<br />

                右侧广告图片<br />

                </div>

            </div>

        <li><a href="#">手机、数码、京东通讯</a></li>

        <li><a href="#">电脑、办公</a></li>

        <li><a href="#">家居、家具、家装、厨具</a></li>

        <li><a href="#">男装、女装、童装、内衣</a></li>

        <li><a href="#">个性化妆、清洁能源、宠物</a></li>

        <li><a href="#">鞋靴、箱包、珠宝、奢侈品</a></li>

        <li><a href="#">运动户外、钟表</a></li>

        <li><a href="#">汽车、汽车用品</a></li>

        <li><a href="#">母婴、玩具乐器</a></li>

        <li><a href="#">食品、酒类、生鲜、特产</a></li>

        <li><a href="#">医药保健</a></li>

        <li><a href="#">图书、音像、电子书</a></li>

        <li><a href="#">彩票、旅行、充值、票务</a></li>

        <li><a href="#">理财、众筹、白条、保险</a></li>

    </ul>

</body>

</html>


正在回答

2 回答

你“家用电器”那级li结束部分应该是把.leftdiv和.rightdiv都包裹起来,否则它不起作用,第一级li包裹层级错误

改成:

<li><a href="#">家用电器</a>

        <div class="submenu">

            <div class="leftdiv">

                左侧二级分类<br />

                左侧二级分类<br />

                左侧二级分类<br />

                左侧二级分类<br />

                左侧二级分类<br />

                </div>

                <div class="rightdiv">

                右侧广告图片<br />

                右侧广告图片<br />

                右侧广告图片<br />

                </div>

            </div>

</li>

就可以了

0 回复 有任何疑惑可以回复我~
#1

荣耀zyy 提问者

非常感谢!
2016-08-10 回复 有任何疑惑可以回复我~

谢谢!不过按你说的改了以后还是不起做作用,w3c验证后出现以下提示,请问这些是什么意思?

http://img1.sycdn.imooc.com//57aae15d0001f1eb11310373.jpg



0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么没有鼠标浮动效果?

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号