当鼠标悬停在另一个</li> <li>成员</li>上时，<li>成员移动

时间：2015-04-15 12:38:59

标签： html css navbar navigationbar

当我将鼠标悬停在另一个<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>

首次截图

First screenshot

第二个屏幕截图

Second screenshot

1 个答案:

答案 0 :(得分：2)

尝试像这样向你的li添加border-bottom: 5px solid transparent;：

<!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 */
            }
相关问题
最新问题