<li> 成员在鼠标悬停在另一个 <li> 成员上时移动答案

【问题标题】：<li> member moves when mouse hovering on another <li> member<li> 成员在鼠标悬停在另一个 <li> 成员上时移动
【发布时间】：2015-04-15 12:38:59
【问题描述】：

当我将鼠标悬停在另一个 <li> 成员上时，为什么我的 <li> 元素会移动？当我尝试通过将位置设置为绝对使其成为静态时，它仍然不会静态定位...

代码如下：

/*Global Settings*/

a {
  color: white;
}
body {
  padding: 0px;
  margin: 0px;
}
/********************/

/*Navigation Bar Setting*/

#navbar {
  background: red;
  height: 37px;
}
#navbar > ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}
#navbar > ul > li {
  /*display: inline;*/
  float: left;
  padding: 8px;
  height: 16px;
  padding-right: 10px;
  text-align: center;
}
#navbar > ul > li:hover {
  border-bottom: 5px solid rgb(0, 0, 0);
}
#firsttab:hover > ul {
  margin: 0px;
  height: 60px;
  padding: 5px;
  padding-left: 0px;
  padding-right: 0px;
  top: 37px;
  left: 111px;
  background: rgb(119, 14, 14);
  position: absolute;
}
#secondtab:hover > ul {
  margin: 0px;
  height: 60px;
  padding: 5px;
  padding-left: 5px;
  padding-right: 5px;
  top: 37px;
  left: 261px;
  background: rgb(119, 14, 14);
  position: absolute;
}
#firsttab:hover > ul > li {
  display: block;
  padding: 10px;
  height: 8px;
  padding-top: 5px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 15px;
}
#secondtab:hover > ul > li {
  display: block;
  padding-top: 5px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 15px;
  height: 8px;
}
#secondtab:hover > ul > li:hover {
  border-bottom: 5px solid black;
}
#firsttab:hover > ul > li:hover {
  border-bottom: 5px solid black;
}
#home {
  background: rgb(119, 14, 14);
  height: 16px;
  border-bottom: 5px solid rgb(119, 14, 14);
}
li > ul {
  list-style: none;
}
li > ul > li {
  display: none;
}
/********************/

#middle > ul {
  list-style: none;
}

<div id="navbar">
  <ul>
    <li id="home">
      <a>Home</a>
    </li>
    <li>
      <a>News</a>
    </li>
    <li id="firsttab">
      <a>Computer</a>
      <ul>
        <li>Software</li>
        <li>Hardware</li>
      </ul>
    </li>
    <li>
      <a>Internet</a>
    </li>
    <li id="secondtab">
      <a>HandPhone</a>
      <ul>
        <li>Software</li>
        <li>Hardware</li>
      </ul>
    </li>
    <li>
      <a>Online Stream</a>
    </li>
  </ul>
</div>
<div id="middle">
  <ul>
    <li>tab</li>
    <li>konten</li>
    <li>tab</li>
  </ul>
</div>

第一张截图

第二张截图

【问题讨论】：

那是一些令人痛苦的特定 CSS。无论如何，您可以清理它以减少 ID 和子选择器的使用吗？您可以在导航上放置一个类 .navbar 并执行 .navbar li:hover {border-bottom: 5px transparent... } 并减少此 css 中的大量重复。

标签： html css navbar navigationbar

【解决方案1】：

尝试像这样将border-bottom: 5px solid transparent; 添加到您的 li 中：

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style>
			/*Global Settings*/
			a{
			color: white;
			}
			body{
			padding: 0px;
			margin: 0px;
			}
			/********************/
			/*Navigation Bar Setting*/
			#navbar{
			background: red;
			height: 37px;
			}
			#navbar > ul{
			padding: 0px;
			margin: 0px;
			list-style: none;
			}
			#navbar > ul > li{
			/*display: inline;*/
			float: left;
			padding: 8px;
			height: 16px;
			padding-right: 10px;
			text-align: center;
			}
			#navbar > ul > li:hover{
			border-bottom: 5px solid rgb(0, 0, 0);
			}
			#firsttab:hover > ul{
			margin: 0px;
			height: 60px;
			padding: 5px;
			padding-left: 0px;
			padding-right: 0px;
			top: 37px;
			left: 111px;
			background: rgb(119, 14, 14);
			position: absolute;
			}
			#secondtab:hover > ul{
			margin: 0px;
			height: 60px;
			padding: 5px;
			padding-left: 5px;
			padding-right: 5px;
			top: 37px;
			left: 261px;
			background: rgb(119, 14, 14);
			position: absolute;
			}
			#firsttab:hover > ul > li{
			display: block;
			padding: 10px;
			height: 8px;
			padding-top: 5px;
			padding-right: 10px;
			padding-left: 10px;
			padding-bottom: 15px;
            border-bottom: 5px solid transparent;	
			}
			#secondtab:hover > ul > li{
			display: block;
			padding-top: 5px;
			padding-right: 10px;
			padding-left: 10px;
			padding-bottom: 15px;
			height: 8px;
            border-bottom: 5px solid transparent;	
			}
			#secondtab:hover > ul > li:hover{
			border-bottom: 5px solid black;	
			}
			#firsttab:hover > ul > li:hover{
			border-bottom: 5px solid black;	
			}
			#home{
			background: rgb(119, 14, 14);
			height: 16px;
			border-bottom: 5px solid rgb(119, 14, 14);
			}
			li > ul{
			list-style: none;
			}
			li > ul > li{
			display: none;
			}
			/********************/
			#middle > ul{
			list-style: none;
			}
		</style>
	</head>
	<body>
		<div id="navbar">
			<ul>
				<li id="home"><a>Home</a></li>
				<li><a>News</a></li>
				<li id="firsttab"><a>Computer</a>
					<ul>
						<li>Software</li>
						<li>Hardware</li>
					</ul>
				</li>
				<li><a>Internet</a>
				</li>
				<li id="secondtab"><a>HandPhone</a>
					<ul>
						<li>Software</li>
						<li>Hardware</li>
					</ul>
				</li>
				<li><a>Online Stream</a></li>
			</ul>
		</div>
		<div id="middle">
			<ul>
				<li>tab</li>
				<li>konten</li>
				<li>tab</li>
			</ul>
		</div>
	</body>
</html>

更新了我的答案：

CSS：

    #firsttab:hover > ul > li{
            display: block;
            padding: 10px;
            height: 8px;
            padding-top: 5px;
            padding-right: 10px;
            padding-left: 10px;
            padding-bottom: 15px;
            border-bottom: 5px solid transparent;    / *newly added */
            }
            #secondtab:hover > ul > li{
            display: block;
            padding-top: 5px;
            padding-right: 10px;
            padding-left: 10px;
            padding-bottom: 15px;
            height: 8px;
            border-bottom: 5px solid transparent;    / *newly added */
            }

【讨论】：

是的，谢谢，我明白你的意思了...我们不必再使用边框了吧？
如果你需要悬停边框，你也需要为 li 指定，否则不需要:)