使用 CSS 突出显示菜单项

Question

我有以下菜单：

<ul id="nav-mobile" class="right">
                <li><img src="images/ic_icon1.png"/>
        <a class="white-text" href='#'><span>Links</span></a>
                            <ul id="quicklinkdrop" class="dropdown-content">
                                <li><a href="#">Home</a></li>
                                   <li><a href="#">Access</a></li>
                                   <li><a href="#">Zone</a></li>
                            </ul>
             </li>
                <li><img src="images/ic_icon2.png"/>
        <a class="white-text" href='#'><span>User</span></a>
            <ul id="userdrop" class="dropdown-content">
                    <li><a href="profile.html">My Profile</a></li>
                    <li><a href="logout.html">Log Off</a></li>
                  </ul>
        </li>
        </ul>

我使用 CSS 来设置它的样式：

#nav-mobile{
    margin-top: 0px; 
}
    #nav-mobile li { 
        display: inline-block;
        margin: 0 2.5em 1.5em 1.5em;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    }
    #nav-mobile li a{ 
        text-decoration: none;
    position: relative;
     }
#nav-mobile li img{ 
    position: relative;
    top: .4em;
     }

     #nav-mobile li .dropdown-content { 
        display: none;
    position: absolute;
    color: #188CCC;
    background-color: white;
    z-index: 1;
    box-shadow: 0px 8px 25px 0px rgba(28, 24, 28, 0.65);
    max-width: 180px;
      }
      #nav-mobile li:hover .dropdown-content{ 
           display: block;
      }
#nav-mobile li .dropdown-content li:hover { 
    background-color: #CCCCCC;
}

     #nav-mobile li .dropdown-content li a { 
         display: none;}
    #nav-mobile li:hover .dropdown-content li a { 
        display: block;
    }

在大多数情况下，一切都按预期工作。仅当用户将鼠标悬停在"主页"、"访问"和"区域"菜单项上时，才会突出显示单词本身，而不是整行。如何使用 CSS 实现这一点？

Answer 1

您可以使用

以下解决方案（对 CSS 代码进行了许多更改）：

#nav-mobile{
  margin-top: 0px; 
}
#nav-mobile li { 
  display: inline-block;
  margin: 0 2.5em 1.5em 1.5em;
  font-family: Roboto, Helvetica, Arial, sans-serif;
}
#nav-mobile li a{ 
  text-decoration: none;
  position: relative;
}
#nav-mobile li img{ 
  position: relative;
  top: 0.4em;
}
#nav-mobile li .dropdown-content { 
  display: none;
  position: absolute;
  color: #188CCC;
  background-color: white;
  z-index: 1;
  box-shadow: 0px 8px 25px 0px rgba(28, 24, 28, 0.65);
  max-width: 180px;
}
#nav-mobile li:hover .dropdown-content{ 
 display: block;
 padding:0;
 margin:0;
}
#nav-mobile li .dropdown-content li {
  margin:0;
  width:100%;
}
#nav-mobile li .dropdown-content li a {
  display: block;
  margin:0;
  padding: 0.75em 2.5em 0.75em 1.5em;
  font-family: Roboto, Helvetica, Arial, sans-serif;
}
#nav-mobile li .dropdown-content li:hover { 
  background-color: #CCCCCC;
}

<ul id="nav-mobile" class="right">
  <li>
    <img src="images/ic_icon1.png"/>
    <a class="white-text" href='#'><span>Links</span></a>
    <ul id="quicklinkdrop" class="dropdown-content">
      <li><a href="#">Home</a></li>
      <li><a href="#">Access</a></li>
      <li><a href="#">Zone</a></li>
    </ul>
  </li>
  <li>
    <img src="images/ic_icon2.png"/>
    <a class="white-text" href='#'><span>User</span></a>
    <ul id="userdrop" class="dropdown-content">
      <li><a href="profile.html">My Profile</a></li>
      <li><a href="logout.html">Log Off</a></li>
    </ul>
  </li>
</ul>

---

一个改进的示例（减少的CSS代码）：

ul#nav-mobile, ul#nav-mobile ul {
  color:#188ccc;
  list-style-type:none;
  margin:0;
  padding:0;
}
ul#nav-mobile li {
  display:inline-block;
  margin:0;
}
ul#nav-mobile li a, ul#nav-mobile li a:link {
  display:inline-block;
  font-family:Roboto, Helvetica, Arial, sans-serif;
  margin:0;
  padding:0.75em 2.5em 0.75em 0.5em;
  position:relative;
  text-decoration:none;
}
ul#nav-mobile li ul.dropdown-content {
  box-shadow:0px 8px 25px 0px rgba(28, 24, 28, 0.65);
  display:none;
  max-width:180px;
  position:absolute;
  z-index:1;
}  
ul#nav-mobile li:hover ul.dropdown-content { 
  display:block;
}  
ul#nav-mobile li:hover ul.dropdown-content li,
ul#nav-mobile li:hover ul.dropdown-content li a {
  width:100%;
}
ul#nav-mobile li:hover ul.dropdown-content li:hover {
  background:#ccc;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul id="nav-mobile" class="right">
  <li>
    <i class="fa fa-stack-overflow" aria-hidden="true"></i>
    <a class="white-text" href='#'><span>Links</span></a>
    <ul id="quicklinkdrop" class="dropdown-content">
      <li><a href="#">Home</a></li>
      <li><a href="#">Access</a></li>
      <li><a href="#">Zone</a></li>
    </ul>
  </li>
  <li>
    <i class="fa fa-stack-overflow" aria-hidden="true"></i>
    <a class="white-text" href='#'><span>User</span></a>
    <ul id="userdrop" class="dropdown-content">
      <li><a href="profile.html">My Profile</a></li>
      <li><a href="logout.html">Log Off</a></li>
    </ul>
  </li>
</ul>

Answer 2

为列表项提供 100% 的宽度且没有剩余边距，相应地调整<a>标签的填充：

#nav-mobile li .dropdown-content li {
  width: 100%;
  margin-left: 0;
}
#nav-mobile li:hover .dropdown-content li a {
  padding-left: 10px;
}

http://jsfiddle.net/w6he4pgt/

Answer 3

#nav-mobile{
   margin-top: 0px; 
}
#nav-mobile > li { 
    display: inline-block;
    margin: 0 2.5em 1.5em 1.5em;
    font-family: Roboto, Helvetica, Arial, sans-serif;
}
#nav-mobile li a{ 
    text-decoration: none;
    position: relative;
}
#nav-mobile li img{ 
    position: relative;
    top: .4em;
}
#nav-mobile li .dropdown-content { 
    display: none;
    position: absolute;
    color: #188CCC;
    background-color: white;
    z-index: 1;
    box-shadow: 0px 8px 25px 0px rgba(28, 24, 28, 0.65);
    max-width: 180px;
    width: 100%;
    padding-left: 0px;
    list-style: none;
}
#nav-mobile li:hover .dropdown-content{ 
   display: block;
}
#nav-mobile li:hover .dropdown-content li a{
    display: block;
    padding: 0.75em 2.5em 0.75em 1.5em;
}
#nav-mobile li .dropdown-content li:hover a{ 
    background-color: #CCCCCC;
}

    <ul id="nav-mobile" class="right">
    <li><img src="images/ic_icon1.png"/>
      <a class="white-text" href='#'><span>Links</span></a>
      <ul id="quicklinkdrop" class="dropdown-content">
        <li><a href="#">Home</a></li>
        <li><a href="#">Access</a></li>
        <li><a href="#">Zone</a></li>
      </ul>
    </li>
    <li><img src="images/ic_icon2.png"/>
      <a class="white-text" href='#'><span>User</span></a>
      <ul id="userdrop" class="dropdown-content">
        <li><a href="profile.html">My Profile</a></li>
        <li><a href="logout.html">Log Off</a></li>
      </ul>
    </li>
  </ul>

希望这对你有帮助