CSS 下拉菜单

.list1 li {list-style-type:none;}
.list1 li + li a {border-top:1px solid #f00;} /*选择除了第一个元素之外的元素，在li 后面的li*/
.list1 a {display:block; padding:3px 10px;}

所以把所有的border，padding，margin元素都设置在a元素里面。如果加给li，那么这些Padding所在位置就是不能点击的。

把所有的a元素都设置为display:block;从而使可以点击的面积扩大。

就是说不再是Inline而是填满盒子的。链接的可点击区域将扩大到整个列表行

为列表容器 nav 添加了 multi_drop_menu 类。

这个菜单的每一条 CSS规则都以.multi_drop_menu 开头，以确保它们只会应用给带有这个类的容器

浮动会让元素从垂直变成水平 .为方便设定菜单样式，

<html>

<head>
<style type="text/css">
.multi_drop_menu {font:1em helvetica, arial, sans-serif;}
.multi_drop_menu a {

display:block;/*让链接充满列表项*/
color:#555;
background-color:#eee;
padding:.2em 1em;
border-width:3px;
border-color:transparent;
}
.multi_drop_menu a:hover {/*鼠标悬停改变字和背景颜色*/
color:#fff;
background-color:#aaa;
}
.multi_drop_menu a:active {/*鼠标点击改变字的颜色*/
background:#fff;
color:#ccc;
}
.multi_drop_menu * {margin:0; padding:0;}/*所有元素取消默认的margin 和padding*/

.multi_drop_menu ul {float:left;}/*强制所有ul 包围所有li*/
.multi_drop_menu li {
float:left;/*水平排列菜单项*/
list-style-type:none;
position:relative;/*为子菜单提供定位上下文*/
}
.multi_drop_menu li a {
display:block;
border-right-style:solid;/*给每个链接添加一个右边框*/
background-clip:padding-box;/*背景只出现在padding区域后面,不出现在border后面*/
text-decoration:none;/*去a下划线*/
}
.multi_drop_menu li:last-child a {border-right-style:none;}/*最后一个子元素不加边框*/

/*现在开始是2，3级*/

.multi_drop_menu li ul {width:9em;}/*2，3级菜单宽度值设定*/
.multi_drop_menu li ul {display:none;}/*隐藏2，3级菜单*/

.multi_drop_menu li ul {
position:absolute;
left:0;
top:100%;
}

.multi_drop_menu li li a {
border-right-style:none;/*因为是竖排，所以要去掉之前设定的li a 的右边框*/
border-top-style:solid;/*添加上边框*/
}
.multi_drop_menu li li {
float:none;/*2级菜单不是横向显示的，所以要去掉继承的横向显示*/
}
.multi_drop_menu li li ul {
display:none;/*3级菜单隐藏*/
}/*可有可无*/
.multi_drop_menu li li ul {
position:absolute;/*3级菜单的ul相对于父元素绝对定位*/
left:100%;/*显示在右边*/
top:0;
}
.multi_drop_menu li:hover > ul {

display:block;
}

</style>
</head>
<body>
<nav class="multi_drop_menu">

<ul>
<li><a href="#">Power</a></li>
<li><a href="#">Money</a></li>
<li><a href="#">Love</a></li>
<li><a href="#">Fame</a>

<ul>
<li><a href="#">Sports Star</a></li>
<li><a href="#">Movie Star</a></li>
<li><a href="#">Rock Star</a>

<ul>
<li><a href="#">Bruce Springsteen</a></li>
<li><a href="#">Bono</a></li>
<li><a href="#">Mick Jagger</a></li>
<li><a href="#">Bob Dylan</a></li>
</ul>

</li>
<li><a href="#">Web Designer</a></li>
</ul>

</li>
</ul>

</nav>
</body>
</html>

posted @ 2017-05-02 09:50 Esther_Cheung 阅读(238) 评论(0) 收藏举报

刷新页面返回顶部

xinfang

CSS 下拉菜单

公告