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

Question

所以我们必须在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>

Answer 1

我想这就是你想要的？ （删除 <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"> <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover"><span style="position:absolute; right:0; left:0; top: 0; z-index: 2; text-align: center; width: 100%; color:#333; alignment-adjust:middle;">Add display Image</span></a> </div> </div> <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script> 中的负边距并减少#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;
}