今天我们来讲一下如何利用CSS制作一个带有下拉框的导航栏。首先,我们需要在HTML中添加一个ul列表来构建导航栏的框架,然后再在li中添加a标签来定义导航栏的每个选项。接着,我们在li中再添加ul列表
<ul class="navbar"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a> <ul class="dropdown"> <li><a href="#">Our Team</a></li> <li><a href="#">History</a></li> <li><a href="#">Vision</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul>
.navbar { list-style: none; background-color: #333; text-align: center; padding: 0; margin: 0; } .navbar li { font-size: 1.2em; line-height: 40px; position: relative; display: inline-block; text-align: left; } .navbar a { display: block; padding: 0 10px; color: #fff; font-size: 1em; line-height: 40px; text-decoration: none; } .navbar a:hover { background-color: #555; } .navbar ul { position: absolute; top: 40px; left: 0; background-color: #333; display: none; list-style: none; } .navbar li:hover > ul { display:inherit; } .dropdown li { line-height: 40px; } .dropdown a:hover { background-color: #555; color: #fff; }
粉丝
0
关注
0
收藏
0