为什么隐藏不了css中的下拉菜单 5
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><ulid="nav"><li><ahr...
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<ul id="nav">
<li><a href="">文章</a>
<ul>
<li><a href="">Ajax教程</a></li>
<li><a href="">Saml教程</a></li>
<li><a href="">Ria教程</a></li>
</ul>
</li>
<li><a href="">参考</a>
<ul>
<li><a href="">E-CASH</a></li>
<li><a href="">微支付</a></li>
<li><a href="">混沌加密</a></li>
</ul>
</li>
<li><a href="">Blog</a>
<ul>
<li><a href="">生活随想</a></li>
<li><a href="">灯下随笔</a></li>
<li><a href="">心路历程</a></li>
</ul>
</li>
</ul>
<style type="text/css">
#nav,#nav ul{
padding:0; margin:0;
list-style:none;}
li{
float:left;
width:160px}
position:relative;}
li ul {
display:none;
position:absolute;
top:21px;} 展开
<ul id="nav">
<li><a href="">文章</a>
<ul>
<li><a href="">Ajax教程</a></li>
<li><a href="">Saml教程</a></li>
<li><a href="">Ria教程</a></li>
</ul>
</li>
<li><a href="">参考</a>
<ul>
<li><a href="">E-CASH</a></li>
<li><a href="">微支付</a></li>
<li><a href="">混沌加密</a></li>
</ul>
</li>
<li><a href="">Blog</a>
<ul>
<li><a href="">生活随想</a></li>
<li><a href="">灯下随笔</a></li>
<li><a href="">心路历程</a></li>
</ul>
</li>
</ul>
<style type="text/css">
#nav,#nav ul{
padding:0; margin:0;
list-style:none;}
li{
float:left;
width:160px}
position:relative;}
li ul {
display:none;
position:absolute;
top:21px;} 展开
1个回答
2016-08-14 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
div+CSS自制导航条，简单的小例子：
<style>
* {margin:0; padding:0; list-style:none;}
#ul1 {width:954px; margin:10px auto;}
#ul1 li {width:104px; height:36px; border:1px solid #999; float:left; position:relative;}
#ul1 li span {position:absolute; left:0; top:0; width:100%; height:100%; text-align:center; line-height:36px; z-index:2;}
#ul1 li em {position:absolute; left:0; bottom:0; width:100%; height:0; z-index:1; opacity:0.4; filter:alpha(opacity:40);}
</style>
<script src="move.js"></script>
<script>
window.onload=function (){
var aLi=document.getElementById('ul1').children;
var aEm=document.getElementsByTagName('em');
for (var i=0; i<aLi.length; i++)
{
(function (index){
aLi[i].onmouseover=function (){
for (var i=0; i<aEm.length; i++)
{
move(aEm[i], {height:0}, {'duration':1000,'easing':'ease-in'});
}
move(aEm[index], {height: 36}, {'duration':1000,'easing':'ease-out'});
};
})(i);
}
};
</script>
</head>
<body>
<ul id="ul1">
<li>
<span>我的主页</span>
<em style="background:#F00"></em>
</li>
<li>
<span>新闻头条</span>
<em style="background:#0F0"></em>
</li>
<li>
<span>电视剧</span>
<em style="background:#00F"></em>
</li>
<li>
<span>最新电影</span>
<em style="background:#F0F"></em>
</li>
<li>
<span>小游戏</span>
<em style="background:#FF0"></em>
</li>
<li>
<span>小说大全</span>
<em style="background:#0FF"></em>
</li>
<li>
<span>旅游度假</span>
<em style="background:#C0F"></em>
</li>
<li>
<span>品牌特卖</span>
<em style="background:#F0C"></em>
</li>
<li>
<span>今日团购</span>
<em style="background:#0CC"></em>
</li>
</ul>
</body>
<style>
* {margin:0; padding:0; list-style:none;}
#ul1 {width:954px; margin:10px auto;}
#ul1 li {width:104px; height:36px; border:1px solid #999; float:left; position:relative;}
#ul1 li span {position:absolute; left:0; top:0; width:100%; height:100%; text-align:center; line-height:36px; z-index:2;}
#ul1 li em {position:absolute; left:0; bottom:0; width:100%; height:0; z-index:1; opacity:0.4; filter:alpha(opacity:40);}
</style>
<script src="move.js"></script>
<script>
window.onload=function (){
var aLi=document.getElementById('ul1').children;
var aEm=document.getElementsByTagName('em');
for (var i=0; i<aLi.length; i++)
{
(function (index){
aLi[i].onmouseover=function (){
for (var i=0; i<aEm.length; i++)
{
move(aEm[i], {height:0}, {'duration':1000,'easing':'ease-in'});
}
move(aEm[index], {height: 36}, {'duration':1000,'easing':'ease-out'});
};
})(i);
}
};
</script>
</head>
<body>
<ul id="ul1">
<li>
<span>我的主页</span>
<em style="background:#F00"></em>
</li>
<li>
<span>新闻头条</span>
<em style="background:#0F0"></em>
</li>
<li>
<span>电视剧</span>
<em style="background:#00F"></em>
</li>
<li>
<span>最新电影</span>
<em style="background:#F0F"></em>
</li>
<li>
<span>小游戏</span>
<em style="background:#FF0"></em>
</li>
<li>
<span>小说大全</span>
<em style="background:#0FF"></em>
</li>
<li>
<span>旅游度假</span>
<em style="background:#C0F"></em>
</li>
<li>
<span>品牌特卖</span>
<em style="background:#F0C"></em>
</li>
<li>
<span>今日团购</span>
<em style="background:#0CC"></em>
</li>
</ul>
</body>
追问
为什么我做的隐藏不了？
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
