我必须在我的 CSS 中更改什么，以便当悬停在导航菜单上时，悬停不会像现在这样到处都是？

Question

所以我们必须使用 IT css 和 html 创建我们自己的网页 class 我决定我希望我的导航菜单比我在开始，但现在我不知道如何更改 css 以便当我将鼠标悬停在导航菜单上时，鼠标悬停不会像现在这样到处都是。

有人能帮帮我吗？

#nav {
  height:28px;
  background-color:#222;
  position: fixed;
  top: 92px;
  left: 0;
  margin-bottom:0;
  box-shadow: 10px 2px 5px #888;
  blur: 3px;
  spread: 2px;
}

#nav_wrapper {
  width: 1185px;
  height:28px;
  margin-left: 260px;
  text-align: left;
  margin-top:-10px;
}

#nav ul{
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
}

#nav ul li{
  font-family:arial;
  font-size: 15px;
  display: inline-block;
}

#nav ul li:hover{
  background-color: #333;
}

#nav ul li img{
  width: 8px;
  height:8px;
  vertical-align:middle;
  padding-left: 10px;
}

#nav ul li a,visited{
  color: #ccc;
  display:block;
  padding: 15px;
  text-decoration:none;
}

#nav ul li a:hover{
  color: #ccc;
  text-decoration: none;
}

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

#nav ul ul{
  display: none;
  position: absolute;
  background-color: #333;
  border: 5px solid #222;
  border-top: 0;
  margin-left: -1px;
  min-width: 80px;
  padding:0px;
}

#nav ul ul li {
  display: block;
}

#nav ul ul li a,visited{
  color: #ccc;
}

#nav ul ul li a:hover{
  color: #099;
}

<div id="nav">
  <div id="nav_wrapper">
    <ul>
      <li>
        <a href="home.html">
          <img src="pictures/home.png" alt="" style="width:18px;height:18px;vertical-align:middle;padding-right:11px;"/>
        </a>
      </li>
      <li><a href="intro_html.html">HTML <img src="pictures/arrow.png" alt="" /></a>
        <ul>
          <li><a href="#">Intro</a></li>
          <li><a href="#">Basic</a></li>
          <li><a href="#">Tags</a></li>
          <li><a href="#">Links</a></li>
          <li><a href="#">Classes</a></li>
          <li><a href="#">Intro</a></li>
          <li><a href="#">Intro</a></li>
          <li><a href="#">Intro</a></li>
        </ul>
      </li>
      <li><a href="intro_css.html">CSS <img src="pictures/arrow.png" alt="" /></a>
        <ul>
          <li><a href="intro_css.html">Intro</a></li>
          <li><a href="basics_css.html">Basics</a></li>
          <li><a href="#">Intro</a></li>
          <li><a href="#">Intro</a></li>
          <li><a href="#">Intro</a></li>
          <li><a href="#">Intro</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Answer 1

我想这就是你想要的？（删除 #nav_wrapper 中的负边距并减少 #nav ul li a 中的填充）

#nav {
 height:28px;
 background-color:#222;
 position: fixed;
    top: 92px;
    left: 0;
 margin-bottom:0;
 box-shadow: 10px 2px 5px #888;
 blur: 3px;
 spread: 2px;
}

#nav_wrapper {
 width: 1185px;
 height:28px;
 margin-left: 260px;
 text-align: left;
}

#nav ul{
 list-style-type: none;
 padding: 0;
 margin: 0;
 position: relative;
}

#nav ul li{
 font-family:arial;
 font-size: 15px;
 display: inline-block;
}

#nav ul li:hover{
 background-color: #333;
}

#nav ul li img{
 width: 8px;
 height:8px;
 vertical-align:middle;
 padding-left: 10px;
}

#nav ul li a,
#nav ul li a.visited{
 color: #ccc;
 display:block;
 padding: 4px;
 text-decoration:none;
}

#nav ul li a:hover{
 color: #ccc;
 text-decoration: none;
}

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

#nav ul ul{
 display: none;
 position: absolute;
 background-color: #333;
 border: 5px solid #222;
 border-top: 0;
 margin-left: -1px;
 min-width: 80px;
 padding:0px;
}

#nav ul ul li {
 display: block;
}

#nav ul ul li a,visited{
 color: #ccc;
}

#nav ul ul li a:hover{
 color: #099;
}

<div id="nav">
   <div id="nav_wrapper">
    <ul>
     <li>
      <a href="home.html">
       <img src="pictures/home.png" alt="" style="width:18px;height:18px;vertical-align:middle;padding-right:11px;"/>
      </a>
     </li>
     <li><a href="intro_html.html">HTML <img src="pictures/arrow.png" alt="" /></a>
      <ul>
       <li><a href="#">Intro</a></li>
       <li><a href="#">Basic</a></li>
       <li><a href="#">Tags</a></li>
       <li><a href="#">Links</a></li>
       <li><a href="#">Classes</a></li>
       <li><a href="#">Intro</a></li>
       <li><a href="#">Intro</a></li>
       <li><a href="#">Intro</a></li>
      </ul>
     </li>
     <li><a href="intro_css.html">CSS <img src="pictures/arrow.png" alt="" /></a>
      <ul>
       <li><a href="intro_css.html">Intro</a></li>
       <li><a href="basics_css.html">Basics</a></li>
       <li><a href="#">Intro</a></li>
       <li><a href="#">Intro</a></li>
       <li><a href="#">Intro</a></li>
       <li><a href="#">Intro</a></li>
      </ul>
     </li>
    </ul>
   </div>
  </div>

我必须在我的 CSS 中更改什么，以便当悬停在导航菜单上时，悬停不会像现在这样到处都是？

What do i have to change in my CSS so that when hover over the navigation menu, the hover is not all over the place like it is now?

html

css

navigation