html - 使用 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>