Html 用CSS突出显示菜单项

我有以下菜单：

<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>

---

在大多数情况下，一切都按预期进行。只有当用户将鼠标悬停在Home、Access和Zone菜单项上时，才会高亮显示单词本身，而不是整行。如何使用CSS实现这一点？

您可以使用以下解决方案（CSS代码有许多更改）：

#移动导航{
边际上限：0px；
}
#导航移动li{
显示：内联块；
保证金：0.2.5em 1.5em 1.5em；
字体系列：Roboto、Helvetica、Arial、无衬线字体；
}
#导航移动LiA{
文字装饰：无；
位置：相对位置；
}
#导航移动li img{
位置：相对位置；
顶部：0.4em；
}
#导航移动li.下拉内容{
显示：无；
位置：绝对位置；
颜色：#188CCC；
背景色：白色；
z指数：1；
盒影：0px 8px 25px 0px rgba（28,24,28,0.65）；
最大宽度：180像素；
}
#导航移动li:悬停。下拉内容{
显示：块；
填充：0；
保证金：0；
}
#导航移动li.下拉列表内容li{
保证金：0；
宽度：100%；
}
#导航移动li.下拉式内容li a{
显示：块；
保证金：0；
填充：0.75em 2.5em 0.75em 1.5em；
字体系列：Roboto、Helvetica、Arial、无衬线字体；
}
#导航移动li.下拉内容li:hover{
背景色：#中交；
}

您可以使用以下解决方案（CSS代码有许多更改）：

#移动导航{
边际上限：0px；
}
#导航移动li{
显示：内联块；
保证金：0.2.5em 1.5em 1.5em；
字体系列：Roboto、Helvetica、Arial、无衬线字体；
}
#导航移动LiA{
文字装饰：无；
位置：相对位置；
}
#导航移动li img{
位置：相对位置；
顶部：0.4em；
}
#导航移动li.下拉内容{
显示：无；
位置：绝对位置；
颜色：#188CCC；
背景色：白色；
z指数：1；
盒影：0px 8px 25px 0px rgba（28,24,28,0.65）；
最大宽度：180像素；
}
#导航移动li:悬停。下拉内容{
显示：块；
填充：0；
保证金：0；
}
#导航移动li.下拉列表内容li{
保证金：0；
宽度：100%；
}
#导航移动li.下拉式内容li a{
显示：块；
保证金：0；
填充：0.75em 2.5em 0.75em 1.5em；
字体系列：Roboto、Helvetica、Arial、无衬线字体；
}
#导航移动li.下拉内容li:hover{
背景色：#中交；
}

给列表项100%宽度且不留边距，调整

给列表项100%宽度且不留边距，调整

#移动导航{
边际上限：0px；
}
#移动导航>li{
显示：内联块；
保证金：0.2.5em 1.5em 1.5em；
字体系列：Roboto、Helvetica、Arial、无衬线字体；
}
#导航移动LiA{
文字装饰：无；
位置：相对位置；
}
#导航移动li img{
位置：相对位置；
顶部：.4em；
}
#导航移动li.下拉内容{
显示：无；
位置：绝对位置；
颜色：#188CCC；
背景色：白色；
z指数：1；
盒影：0px 8px 25px 0px rgba（28,24,28,0.65）；
最大宽度：180像素；
宽度：100%；
左侧填充：0px；
列表样式：无；
}
#导航移动li:悬停。下拉内容{
显示：块；
}
#导航移动li：悬停。下拉内容li a{
显示：块；
填充：0.75em 2.5em 0.75em 1.5em；
}
#导航移动li.下拉内容li:悬停a{
背景色：#中交；
}















#移动导航{
边际上限：0px；
}
#移动导航>li{
显示：内联块；
保证金：0.2.5em 1.5em 1.5em；
字体系列：Roboto、Helvetica、Arial、无衬线字体；
}
#导航移动LiA{
文字装饰：无；
位置：相对位置；
}
#导航移动li img{
位置：相对位置；
顶部：.4em；
}
#导航移动li.下拉内容{
显示：无；
位置：绝对位置；
颜色：#188CCC；
背景色：白色；
z指数：1；
盒影：0px 8px 25px 0px rgba（28,24,28,0.65）；
最大宽度：180像素；
宽度：100%；
左侧填充：0px；
列表样式：无；
}
#导航移动li:悬停。下拉内容{
显示：块；
}
#导航移动li：悬停。下拉内容li a{
显示：块；
填充：0.75em 2.5em 0.75em 1.5em；
}
#导航移动li.下拉内容li:悬停a{
背景色：#中交；
}















#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;
    }

#nav-mobile li .dropdown-content li {
  width: 100%;
  margin-left: 0;
}

#nav-mobile li:hover .dropdown-content li a {
  padding-left: 10px;
}