前端设计

当前位置/ 首页/ 前端设计/ 正文

纯css二级导航菜单下拉菜单代码详解


前段时间,莎龙遇到了一个难题,二级导航菜单下拉之后紧接着的部分代码偏移错位,什么问题呢?说实话,没有人当场指导,这个问题真的很头疼,不理解是最现实的问题。

今天这个问题终于有了头绪,于是我自己手动敲了这样一个二级导航下拉菜单,代码如下:

<!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>
<meta content="沙龙中文社区网,IT咨询、技术、草根、营销推广、编程文章整理的综合性it文章资讯网站!" name="description" />
<style type="text/css" >
a{
text-decoration:none;
}
#top{
height:300px;
background:#900;
}
#bottom{

height:200px;
background:#06F;
}
#nav{
height:60px;


}
#nav ul{
position:absolute;
}
#nav ul li{
list-style:none;
float:left;
width:75px;
}
#nav ul li ul li{
clear:both;
position:relative;
left:-40px;
}
#nav ul li ul{
display:none;
float:left;
}
#nav ul li:hover ul{
display:block;
}
</style>
</head>

<body>
<div id="top">顶部</div>
<div id="nav">
<ul>
<li><a href="gg">菜单一</a>
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>菜单
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>二</li>
<li>菜单三
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul></li>
<li>一级菜单
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul></li>
<li>一级菜单
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul></li>
</ul>

</div>
<div id="bottom"><img src="u=424744543,1496111882&fm=23&gp=0.jpg"/>底部底部底部底部底部底部底部底部底部底部底部</div>
</body>
</html>

下边是关于css样式的说明:

 

.nav ul li:hover ul

表示class="nav"里的 ul 标签里的 li 标签鼠标指上去之后触发 li 标签里的 ul 标签;

比如 .nav ul li:hover ul { displa:block; }一般用作导航栏中的菜单的下拉列表;

.nav ul li a:hover ul

表示class="nav"里的 ul 标签里的 li 标签 里的 a 标签 鼠标指上去之后触发 a 标签里的 ul 标签;

比如

.nav ul li a:hover ul { displa:block; }

相关热词搜索:菜单 代码 素材

分享到:

我要评论

微信订阅

打开微信,点击底部的“通讯录”,点击右上角的 “添加” 搜号码 andk_in 或查找公众号 莎龙 即可。