使⽤HTMl+CSS制作⼆级菜单或⼆级导航栏
  ⼆级菜单的实现思路为：1.在默认状态下，使⽤display:none；将⼆级菜单隐藏。 2.当⼀级菜单中的列表标签li获取焦点(hover)后，使⽤display:blick；将⼆级菜单显⽰出来。 3.使⽤position: relative；和position: absolute；分别得⼀级菜单和⼆级菜单设置相对定位和绝对定位。  本内容⾯向⼩⽩向，我在代码中加了详细的注释，解释了语句的作⽤。
  ⼆级菜单展开后效果如下(没有美化，见谅)：
  　HTMl代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>⼆级菜单</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div class="menu">
<ul>
<li>⾸页</li>
<li>博客
<ul>
<li>博客1</li>
<li>博客2</li>
<li>博客3</li>
</ul>
</li>
<!-- 注意：需要将⼆级菜单的ul放在⼀级菜单的li标签内 -->
<li>新闻</li>
<li>账户</li>
</ul>
</div>
</body>
</html>
    　CSS代码如下：
ul li{
list-style: none;
/* 清除列表原有样式 */
}
.menu{
width: 600px;
height: 60px;
background-color: aquamarine;
}
.menu ul li{
float: left;
/* 使列表(⼀级菜单)横向 */html ul标签
margin-right: 50px;
margin-top: 20px;
/* 设置⼀级菜单内容的位置 */
position: relative;
}
.menu ul li ul{
width: 100px;
height: 160px;
margin-left: -50px;
background-color: #7FFFD4;
display: none;
/
* 设置初始为不显⽰ */
position: absolute;
}
.menu ul li:hover ul{
display: block;
/* 当⼀级菜单的li获取hover后将⼆级菜单的ul显⽰出来 */
}
原创内容，转载请注明出处

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。