html - 我必须在CSS中进行哪些更改，以便将鼠标悬停在导航菜单上时，它不会像现在这样遍布整个地方？

因此，我们必须在IT类中使用css和html创建自己的网页，我决定我的导航菜单比开始时要短一些，但是现在我不知道如何更改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>

最佳答案

我想这就是你想要的吗？ （删除#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>