实现导航栏悬停菜单需要使用CSS的伪类选择器:hover。具体实现步骤如下:
<ul class="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
.navbar {
list-style: none;
background-color: #333;
text-align: center;
padding: 0;
margin: 0;
}
.navbar li {
display: inline-block;
margin-right: 10px;
}
.navbar li a {
color: #fff;
text-decoration: none;
font-size: 18px;
padding: 10px 15px;
}
.navbar li a:hover {
background-color: #555;
}
.navbar li a:hover {
background-color: #555;
color: #fff;
}
通过以上步骤,就可以实现导航栏悬停菜单效果了。需要注意的是,这里用到了:hover伪类选择器,它会在鼠标悬停在菜单项上时触发样式的改变。此外,为了让导航栏看起来更加美观,还可以对菜单项的样式进行进一步的设置,如字体大小、间距、边框等。