Question

我目前正在设计一个Nav菜单，其中包含 ul ， li 和 a 元素。我试图产生一种效果，将鼠标悬停在 a 标记上只会改变链接本身文本附近的背景颜色，而不是围绕它的整个 li 区域。

HTML：

 <nav>
    <div class="full_menu">
    <ul>
        <li><a href="#">Login</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#" class="drop">Our Team</a>
            <ul>
                <li><a href="#">Bob</a></li>
                <li><a href="#">James</a></li>
                <li><a href="#">Tom</a></li>
            </ul>
        </li><!--End team dropdown  -->
    </ul> 
    </div>

CSS：

nav {
   margin:0 auto;
   text-align:center;
}

nav ul ul {
   display: none;  
}

nav ul li:hover > ul {
   display:block;
}

nav ul {
  background: #17A74A;
  padding:0px;
  list-style:none;
  position:relative;
  display: inline;
  border:0px;
}

nav ul li {
  float:right;
  margin-top:0px;
}

nav ul li a {
  display:block;
  padding:33px 40px;
  color:#000;
  text-decoration:none;
  font-weight:bold;
  font-size:18px;
}

nav ul li a:hover {
  background-color:#2D6AF7;
  color:#FFF;
}

nav ul ul {
  background:#17A74A;
  position:absolute;
  top:71px;
}

nav ul ul li {
  float:none;
  border-bottom:1px solid #FFFFFF;
}

nav ul ul li a {
  padding:15px 40px;
  color:#FFF;
}

nav ul ul li a:hover {
  background:#27BCDD;
}

nav ul ul ul {
  position:absolute;
  left:100%;
  top:0;
}

我认为通过使用导航ul a：hover 可以解决这个问题，但整个 li 区域仍在改变其背景颜色而不仅仅是周围的区域链接文字。

非常感谢任何帮助！

Answer 1

您想获得以下结果吗？我已从您的<a>元素中删除了填充，并将其添加到<li>元素中。

JSFiddle

Answer 2

如果您不希望整个内容改变颜色，则需要将填充更改为边距。试试这个：

    nav ul ul li a {
  margin:15px 40px;
  color:#FFF;
}

CSS在weblink上悬停时调整背景颜色的高度（<a> tag)</a>

2 个答案: