CSS求一段最简单的鼠标经过显示二级菜单的代码

网上看了很多。。但是不懂。。有没有比较简单的。... 网上看了很多。。但是不懂。。有没有比较简单的。 展开
 我来答
匿名用户
2014-03-05
展开全部
<style type="text/css" >    
body{    
margin:0px;    
padding:0px;    
}    
    
li{    
list-style:url(1.jpg);    
}    
a{    
display:block;    
}    
a:link,a:visited  {    
text-decoration: none;    
color:#000000;    
}    
.menu{    
margin:0px auto;    
width:404px;    
height:21px;    
}    
.menu ul{    
margin:0px;    
padding:0px;    
}    
.menu ul li{    
position:relative;    
float:left;    
list-style:none;    
padding:2px;    
border:1px dotted;    
font-size:14px;    
width:95px;    
text-align: center;    
margin:0px;
    
background:#999999;    
}    
.menu ul li ul{    
display:none;    
}    
.menu ul li:hover ul{    
display:block;    
position: absolute; left: 0px; top: 21px;    
}    
.menu a:link{    
background:url(2.png) -137px -10px;    
}    
.menu a:hover{    
background:url(2.png) -26px -10px;    
}    
    
    
</style>    
<body>       
<p>下面是一个导航条</p>    
<div class="menu">    
 <ul>    
   <li><a href="#">首页</a></li>    
   <li><a href="#">新闻中心</a>    
<ul>    
<li><a href="1#">新手入门</a></li>    
<li><a href="2#">视频教程</a></li>    
<li><a href="3#">常见问题</a></li>    
</ul>    
</li>    
   <li><a href="#">学习课程</a>    
<ul>    
<li><a href="1#">新手入门</a></li>    
<li><a href="2#">视频教程</a></li>    
<li><a href="3#">常见问题</a></li>    
</ul>    
</li>    
   <li><a href="#">联系我们</a></li>    
 </ul>    
</div>    
</body>    
</html>

我简单的说一下思路:

首先用ul下面嵌套一个ul。。外面的是第一层栏目列表,嵌套的是第二个。


首先定义嵌套的ul不显示

.menu ul li ul{    
display:none;    
}    

当鼠标划过li的时候下面的ul显示出来

.menu ul li:hover ul{    
display:block;    
}    

这样就可以了,但是我们发现显示出来的二级栏目不是我们想要的位置,那么对它进行绝对定位

.menu ul li:hover ul{    
display:block;    
position: absolute; left: 0px; top: 21px;    
}    

因为绝对定位的元素的位置相对于最近的已定位祖先元素。所以它外面的li设置一个相对定位

.menu ul li{    
position:relative;

}

这样效果就出来了。其他的属性都是一些调整了,在一些低版本的浏览器中会失效,(特别低级的)

追问
= =ie6会失效么。。
追答
在IE7+及FF浏览器中,:hover伪类可以用于任何对象,但在IE5、IE6中,:hover伪类仅能用于a(超链接)对象,且该a对象必须要拥有href属性。
死神永生V
2014-03-05
知道答主
回答量:0
采纳率:0%
帮助的人:0
展开全部
ul 最好里面不要再嵌套ul了 你可以把 下拉菜单 写成一个隐藏的div display:none 用JS 控制 当鼠标移动到某个li 时 把 display改为 block; 移开 再改为 none
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
yhhzhengyi
2014-03-05
知道答主
回答量:0
采纳率:0%
帮助的人:0
展开全部
不是纯css能解决的,需要html+css+js结合
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询
?>

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式