用css控制二级菜单的显示隐藏,实现不了,求解答,
以下是代码!<styletype="text/css">div{width:100%;height:49px;margin:0auto;padding:0px;float...
以下是代码!
<style type="text/css">
div{ width:100%; height:49px; margin:0 auto; padding:0px; float:left; background:url(bg_nav.png) repeat-x 0px 0px; }
a{ text-decoration:none;display:block; padding:0 10px; line-height:49px; line-height:49px; color:#FFFFFF;}
a:hover{ background-color:#FF6600}
ul,li{ list-style:none;}
ul{ width:80%; float:left; height:49px; margin:0 auto; padding:0px;}
li{float:left; margin:0px; padding:0px;}
#erji{ width:295px;background-color:#FF6600;height:55px; display:none; float:left;position:absolute; left:10px; top:60px; }
#ul li:hover ul{ display:block;}
#yiji li a:hover ul{ display:block;}
</style>
</head>
<body>
<div>
<ul id="yiji">
<li><a href="#">主页</a></li>
<li><a href="#">文件管理</a></li>
<ul id="erji">
<li><a href="#">文件夹</a></li>
<li><a href="#">文件袋</a></li>
<li><a href="#">档案盒</a></li>
</ul>
<li><a href="#">办公设备</a></li>
<li><a href="#">办公用纸</a></li>
<li><a href="#">办公资讯</a></li>
</ul>
</div> 展开
<style type="text/css">
div{ width:100%; height:49px; margin:0 auto; padding:0px; float:left; background:url(bg_nav.png) repeat-x 0px 0px; }
a{ text-decoration:none;display:block; padding:0 10px; line-height:49px; line-height:49px; color:#FFFFFF;}
a:hover{ background-color:#FF6600}
ul,li{ list-style:none;}
ul{ width:80%; float:left; height:49px; margin:0 auto; padding:0px;}
li{float:left; margin:0px; padding:0px;}
#erji{ width:295px;background-color:#FF6600;height:55px; display:none; float:left;position:absolute; left:10px; top:60px; }
#ul li:hover ul{ display:block;}
#yiji li a:hover ul{ display:block;}
</style>
</head>
<body>
<div>
<ul id="yiji">
<li><a href="#">主页</a></li>
<li><a href="#">文件管理</a></li>
<ul id="erji">
<li><a href="#">文件夹</a></li>
<li><a href="#">文件袋</a></li>
<li><a href="#">档案盒</a></li>
</ul>
<li><a href="#">办公设备</a></li>
<li><a href="#">办公用纸</a></li>
<li><a href="#">办公资讯</a></li>
</ul>
</div> 展开
2个回答
2014-12-30
展开全部
#yiji{ width:80%; background-color:#fff;height:50px; line-height:50px;margin:0 auto; padding:0px;}
#yiji>li{float:left; margin:0px; padding:0px; position:relative;}
#yiji>li a{color:#333;}
.erji{width:295px;background-color:#FF6600;display:none;position:absolute; left:0; top:49px; }
#yiji>li:hover{background-color:#FF6600;}
#yiji>li.sub:hover ul{ display:block;}
</style>
<div>
<ul id="yiji">
<li><a href="#">主页</a></li>
<li class="sub"><a href="#">文件管理</a>
<ul class="erji">
<li><a href="#">文件夹</a></li>
<li><a href="#">文件袋</a></li>
<li><a href="#">档案盒</a></li>
</ul></li>
<li><a href="#">办公设备</a></li>
<li><a href="#">办公用纸</a></li>
<li><a href="#">办公资讯</a></li>
</ul>
</div>
因为你的ul没有放在那个li里面 还有很多地方写法不对
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询