下面是纯CSS实现下拉导航栏的攻略:
HTML结构
首先,我们需要设置HTML结构,一般情况下,我们会用<ul>
和<li>
标签进行设置。
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">Our Mission</a></li>
<li><a href="#">Our Team</a></li>
</ul>
</li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
通过上面的HTML结构,我们可以看出导航栏是由两个层级组成的。第一个层级是主菜单,第二个层级是下拉菜单。
CSS样式
接着,我们需要设置CSS样式。
主菜单的样式
nav ul {
margin: 0;
padding: 0;
list-style: none;
background-color: #333;
text-align: center;
}
nav li {
display: inline-block;
position: relative;
margin-right: -4px;
min-width: 100px;
}
nav a {
display: block;
padding: 10px;
text-decoration: none;
color: #fff;
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
}
nav ul ul {
position: absolute;
top: 100%;
left: 0;
background-color: #333;
}
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul a {
padding: 10px;
color: #fff;
font-size: 16px;
text-transform: none;
}
nav ul ul a:hover {
background-color: #444;
}
nav ul
:设置主菜单的样式。nav li
:设置每个菜单项的样式,并将其设置为相对定位(position: relative
),以便设置下属菜单的绝对定位(position: absolute
)。nav a
:设置每个菜单项中的链接的样式。nav ul ul
:设置下拉菜单的样式,并将其放置在相对于主菜单的下面(top: 100%
)。nav ul ul li
:设置每个下拉菜单项的样式。nav ul ul a
:设置每个下拉菜单项中的链接的样式。
下拉菜单的样式
当用户悬停在主菜单上时,我们需要显示下拉菜单。为此,我们需要设置nav ul li:hover > ul
的样式,如下面的代码所示:
nav ul li:hover > ul {
display: inherit;
}
上面的代码片段将下拉菜单设置为显示状态(display: inherit
)。
示例
示例一:https://codepen.io/PaulHBrennan/pen/rcaKj
示例二:https://codepen.io/javpet/pen/WQWrOq
以上两个示例中,第一个示例是一个基本示例,第二个示例是一个更加完善的示例,例如在更改窗口大小时,菜单的布局会随之改变。希望这些示例可以帮助您更好地理解如何使用纯CSS实现下拉导航栏。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:纯css实现的下拉导航栏附html结构及css样式 - Python技术站