简洁好用的网站导航栏下拉菜单

最近更新时间: April 29, 2024

下拉导航菜单在我们做网站的时候十分常用,今天分享一个简单的下拉导航菜单(纯css和html),里面含有相关的代码设置和预览。

下拉导航菜单

原理非常简单,运用的是css中的display属性,正常状态下下拉导航子菜单处于隐藏状态(none),当鼠标放上去时变为块元素(block)。代码如下:

css相关代码:

<style type="text/css">
.menu {
width:80%;
margin: 0px;
line-height: 72px;
}
.menu ul li {
list-style:none;
}
.menu ul li a {
margin:0px 21px;
color: #333;
font-size:1.6rem;
float: left;
}
.nav1 {
position: relative;/* 设置相对定位 */
display: inline-block;/* 让元素具有块级元素和行内元素的特性,即将块级元素转化为内联元素 */
}
.nav2 {
display: none;/* 将某元素隐藏起来 */
position: absolute;/* 绝对定位 */
margin-top: 55px;
background-color: #ffffff;
}
.menu ul li div.nav2 a {
display: block;
line-height: 32px;
padding: 0px 21px;
margin: 0px auto;
border-bottom: #f4f4f4 solid 1px;
float: none;
}
.nav1:hover .nav2 {
display: block;
z-index: 1;
}/* 鼠标悬浮在元素上时,变为块级标签 */
</style>

html相关代码:

<div class="menu">
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
<li class="nav1"> <a href="#">下拉导航</a>
<div class="nav2"> <a href="#">子导航1</a> <a href="#">子导航2</a> <a href="#">子导航3</a> </div>
</li>
</ul>
</div>

预览地址:https://www.dajianbiji.com/test/Drop-down-navigation/banner-nav.html

代码样式根据我们自己的需要修改。

版权声明©:希望对您会有所帮助;转载请注明出处。

欢迎留言评论!

Your email address will not be published. Required fields are marked *

大简笔记微信公众号

欢迎关注微信公众号随时了解最新知识分享

微信公众号交流咨询