下拉菜单之CSS实现
2016-02-23 16:11
549 查看
CSS技术要点
位置：
一级菜单中当导航栏是横向导航，设置li的float为left；二级菜单中纵向导航，设置li的float为none(不能设置clear:both)
以及菜单中的li标签position设置为relative，二级菜单中的ul的position属性设置为absolute，top为一级菜单的高度，left为0
在a标签中：
1. a标签的display属性要设置为block
2. 宽和高：高度在最顶层ul中设置；宽度设置为自适应，用padding: 0 10px实现
3. 要让a标签的文字上下居中，将a的line-height的值设置为顶层ul标签中的height的值；因为是宽度自适应，所以左右居中不用设置
4. 其他所有视觉效果的实现，均在a标签中产生，如background-color, text-decoration, color等属性
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="CSS/1.css">
<script src="index.js"></script>
</head>
<body>
<div id="nav">
<ul class="first-nav">
<li><a href="javascript:;" >home</a>
<ul class="second-nav home">
<li><a href="javascript:;">JAVAJAVASCRIT</a></li>
<li><a href="javascript:;">JQuery</a></li>
</ul>
</li>
<li><a href="javascript:;" >kecheng</a>
<ul class="second-nav kecheng">
<li><a href="javascript:;">JAVAJAVASCRIT</a></li>
<li><a href="javascript:;">JQuery</a></li>
</ul>
</li>
<li><a href="javascript:;" >learn</a>
<ul class="second-nav learn">
<li><a href="javascript:;">JAVAJAVASCRIT</a></li>
<li><a href="javascript:;">JQuery</a></li>
</ul>
</li>
<li><a href="javascript:;" >hhhh</a>
<ul class="second-nav hhhh">
<li><a href="javascript:;">JAVAJAVASCRIT</a></li>
<li><a href="javascript:;">JQuery</a></li>
</ul>
</li>
<li><a href="javascript:;" >aboutus</a>
<ul class="second-nav aboutus">
<li><a href="javascript:;">JAVAJAVASCRIT</a></li>
<li><a href="javascript:;">JQuery</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS（SASS实现）已用CSS reset除去默认设置
ul.first-nav {
width: 500px;
height:40px;
margin:0 auto;
li{
float:left;
position: relative;
a{
background-color: #eee;
display: block;
padding: 0 10px;
text-decoration: none;
color:black;
line-height: 40px;
text-align: center;
}
a:hover{
background-color: black;
color: white;
}
ul.second-nav{
position: absolute;
top: 40px;
left: 0;
display: none;
li{
float: none;
margin-top: 2px;
a:hover{
background-color:blue;
};
}
}
}
li:hover{
ul.second-nav{
display: block;
}
}
}
位置：
一级菜单中当导航栏是横向导航，设置li的float为left；二级菜单中纵向导航，设置li的float为none(不能设置clear:both)
以及菜单中的li标签position设置为relative，二级菜单中的ul的position属性设置为absolute，top为一级菜单的高度，left为0
在a标签中：
1. a标签的display属性要设置为block
2. 宽和高：高度在最顶层ul中设置；宽度设置为自适应，用padding: 0 10px实现
3. 要让a标签的文字上下居中，将a的line-height的值设置为顶层ul标签中的height的值；因为是宽度自适应，所以左右居中不用设置
4. 其他所有视觉效果的实现，均在a标签中产生，如background-color, text-decoration, color等属性
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="CSS/1.css">
<script src="index.js"></script>
</head>
<body>
<div id="nav">
<ul class="first-nav">
<li><a href="javascript:;" >home</a>
<ul class="second-nav home">
<li><a href="javascript:;">JAVAJAVASCRIT</a></li>
<li><a href="javascript:;">JQuery</a></li>
</ul>
</li>
<li><a href="javascript:;" >kecheng</a>
<ul class="second-nav kecheng">
<li><a href="javascript:;">JAVAJAVASCRIT</a></li>
<li><a href="javascript:;">JQuery</a></li>
</ul>
</li>
<li><a href="javascript:;" >learn</a>
<ul class="second-nav learn">
<li><a href="javascript:;">JAVAJAVASCRIT</a></li>
<li><a href="javascript:;">JQuery</a></li>
</ul>
</li>
<li><a href="javascript:;" >hhhh</a>
<ul class="second-nav hhhh">
<li><a href="javascript:;">JAVAJAVASCRIT</a></li>
<li><a href="javascript:;">JQuery</a></li>
</ul>
</li>
<li><a href="javascript:;" >aboutus</a>
<ul class="second-nav aboutus">
<li><a href="javascript:;">JAVAJAVASCRIT</a></li>
<li><a href="javascript:;">JQuery</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS（SASS实现）已用CSS reset除去默认设置
ul.first-nav {
width: 500px;
height:40px;
margin:0 auto;
li{
float:left;
position: relative;
a{
background-color: #eee;
display: block;
padding: 0 10px;
text-decoration: none;
color:black;
line-height: 40px;
text-align: center;
}
a:hover{
background-color: black;
color: white;
}
ul.second-nav{
position: absolute;
top: 40px;
left: 0;
display: none;
li{
float: none;
margin-top: 2px;
a:hover{
background-color:blue;
};
}
}
}
li:hover{
ul.second-nav{
display: block;
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 