Question

花了相当多的时间在这个菜单上我仍然遇到问题，按照我希望的方式排列，这是我的菜单代码，希望有些人能够提供帮助。

这是我的HTML：

lazer.physicsBody?.affectedByGravity = false

CSS：

<div id="bandmenu">
   <ul class="nav">
      <li><a href="index.html">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="song-list.html">Song List</a></li>
      <li><a href="testimonials.html">Testimonials</a></li>
      <li><a href="shows.html">Shows</a></li>
      <li><a href="photos.html">Photos</a></li>
      <li><a href="videos.html">Videos</a></li>
      <li><a href="faq.html">FAQ</a></li>
      <li><a href="comments.html">Comments</a></li>
      <li><a href="contacts.html">Contacts</a></li>
   </ul>
</div>

Answer 1

根据您的评论，我猜您想要this demo

您需要像这样修改CSS：

#bandmenu .nav a{
   display: inline-block;
   padding: 0 15px;
   height: 15px;
   line-height: 15px;
   text-decoration: none;
   color: #fff;
   font-size: 16px;        
}

由于您在顶部和底部定义了填充，因此您将获得一个大的灰色悬停区域。您需要将其移除，设置高度并将文本放在高度的中心。

如何让悬停灰色的颜色合适

1 个答案: