我的html / css导航栏悬停功能导致列表项移动到位

时间：2015-06-10 01:38:38

标签： html css html5 css3

我不知道为什么但是我很难解释这个如此抱歉，如果标题不是我试图说的话。我已经创建了一个不同类型的html / css导航栏，只是为了良好的练习，但我遇到了一个小问题。正如你看到如果你运行下面的代码，当你将鼠标悬停在导航项目上时，背景颜色不合适，我希望它像下面的图像一样伸展，但是它很重要，它重叠！感谢您的帮助！继承人的代码和形象！ image

＆＃13;
＆＃13; 
*{margin:0; padding:0;}
body{
	background:black;
	/*background-image:url(../res/back.jpg);*/
	background-size:cover;
}
header{
	width:200px;
	height:600px;
	background-color:rgba(255, 255, 255, 0.5);
	border:4px solid white;
	border-radius:7px;
	margin:10px 0px 0px 360px;
}
header h1{
	font-family:Impact;
	font-size:30px;
	color:white;
	font-weight:900;
	text-align:center;
	margin-top:75px;
}
header nav{

}
header nav ul{

}
header nav ul li{
	list-style:none;
	text-align: center;
	margin-top:25px;
	position:relative;
	top:60px;
}
header nav ul li a{
	font-family:Impact;
	font-size:25px;
	text-decoration: none;
	color:white;
	font-weight:900;
	text-align:center;

}
header nav ul li a:hover{
	background:#ADABAB;
	color:black;
	padding:5px 70px 5px 70px;
}
＆＃13; 
<html>
<head>
	<meta charset="UTF-8">
	<title>Home</title>

	<link rel="stylesheet" type="text/css" href="style/style.css">

	<script type="text/javascript" src="script/jquery.js"></script>
	<script type="text/javascript" src="script/script.js"></script>
</head>
<body>
	<header>
		<h1>WELCOME</h1>
		<nav>
			<ul>
				<li><a href="#">HOME</a></li>
				<li><a href="#">GALLERY</a></li>
				<li><a href="#">ABOUT</a></li>
				<li><a href="#">PRODUCTS</a></li>
				<li><a href="#">CONTACT</a></li>
				<li><a href="#">DONATE</a></li>
			</ul>
		</nav>
	</header>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：1)

你非常接近。如果这是你想要的，请告诉我。

查看我在css中的评论 

*{margin:0; padding:0;}
body{
	background:black;
	/*background-image:url(../res/back.jpg);*/
	background-size:cover;
}
header{
	width:200px;
	height:600px;
	background-color:rgba(255, 255, 255, 0.5);
	border:4px solid white;
	border-radius:7px;
	margin:10px 0px 0px 360px;
}
header h1{
	font-family:Impact;
	font-size:30px;
	color:white;
	font-weight:900;
	text-align:center;
	margin-top:75px;
}
header nav{

}
header nav ul{

}
header nav ul li{
	list-style:none;
	text-align: center;
	margin-top:25px;
	position:relative;
	top:60px;
  
  /*added padding*/
  padding:10px;
}
header nav ul li a{
	font-family:Impact;
	font-size:25px;
	text-decoration: none;
	color:white;
	font-weight:900;
	text-align:center;

}

/*
chaged from: header nav ul li a:hover

to:header nav ul li:hover

also removed the padding on hover

*/
header nav ul li:hover{
	background:#ADABAB;
	color:black;
	
}
<html>
<head>
	<meta charset="UTF-8">
	<title>Home</title>

	<link rel="stylesheet" type="text/css" href="style/style.css">

	<script type="text/javascript" src="script/jquery.js"></script>
	<script type="text/javascript" src="script/script.js"></script>
</head>
<body>
	<header>
		<h1>WELCOME</h1>
		<nav>
			<ul>
				<li><a href="#">HOME</a></li>
				<li><a href="#">GALLERY</a></li>
				<li><a href="#">ABOUT</a></li>
				<li><a href="#">PRODUCTS</a></li>
				<li><a href="#">CONTACT</a></li>
				<li><a href="#">DONATE</a></li>
			</ul>
		</nav>
	</header>
</body>
</html>

答案 1 :(得分：0)

JSFiddle：http://jsfiddle.net/hqadcurt/

我在此处所做的是确保<a>与列表的宽度相同。 

header nav ul li a{
    font-family:Impact;
    font-size:25px;
    text-decoration: none;
    color:white;
    font-weight:900;
    text-align:center;
    display:inline-block;
    max-width:100%;
    width:100%;
}

如果你不想在悬停时晃动，只需移除悬停上的填充物。

header nav ul li a:hover{
    background:#ADABAB;
    color:black;
}

答案 2 :(得分：0)

使用li:hover代替li a:hover并删除其上的填充。

＆＃13;
＆＃13; 
* {
  margin: 0;
  padding: 0;
}
body {
  background: black;
  /*background-image:url(../res/back.jpg);*/
  background-size: cover;
}
header {
  width: 200px;
  height: 600px;
  background-color: rgba(255, 255, 255, 0.5);
  border: 4px solid white;
  border-radius: 7px;
  margin: 10px 0px 0px 360px;
}
header h1 {
  font-family: Impact;
  font-size: 30px;
  color: white;
  font-weight: 900;
  text-align: center;
  margin-top: 75px;
}
header nav {} header nav ul {} header nav ul li {
  list-style: none;
  text-align: center;
  margin-top: 25px;
  position: relative;
  top: 60px;
}
header nav ul li a {
  font-family: Impact;
  font-size: 25px;
  text-decoration: none;
  color: white;
  font-weight: 900;
  text-align: center;
}
header nav ul li:hover {
  background: #ADABAB;
}
header nav ul li:hover a {
  color: black;
}
＆＃13; 
<html>

<head>
  <meta charset="UTF-8">
  <title>Home</title>

  <link rel="stylesheet" type="text/css" href="style/style.css">

  <script type="text/javascript" src="script/jquery.js"></script>
  <script type="text/javascript" src="script/script.js"></script>
</head>

<body>
  <header>
    <h1>WELCOME</h1>
    <nav>
      <ul>
        <li><a href="#">HOME</a>
        </li>
        <li><a href="#">GALLERY</a>
        </li>
        <li><a href="#">ABOUT</a>
        </li>
        <li><a href="#">PRODUCTS</a>
        </li>
        <li><a href="#">CONTACT</a>
        </li>
        <li><a href="#">DONATE</a>
        </li>
      </ul>
    </nav>
  </header>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

＆＃13;
＆＃13; 
*{margin:0; padding:0;}
body{
	background:black;
	/*background-image:url(../res/back.jpg);*/
	background-size:cover;
}
header{
	width:200px;
	height:600px;
	background-color:rgba(255, 255, 255, 0.5);
	border:4px solid white;
	border-radius:7px;
	margin:10px 0px 0px 360px;
}
header h1{
	font-family:Impact;
	font-size:30px;
	color:white;
	font-weight:900;
	text-align:center;
	margin-top:75px;
}
header nav{

}
header nav ul{

}
header nav ul li{
	list-style:none;
	text-align: center;
	margin:15px 0px;
	position:relative;
	top:60px;
}
header nav ul li a{
	font-family:Impact;
	font-size:25px;
	text-decoration: none;
	color:white;
	font-weight:900;
	display:block;
	text-align:center;
	padding:5px 0px;
}
header nav ul li a:hover{
	background:#ADABAB;
	color:black;
}
＆＃13; 
<html>
<head>
	<meta charset="UTF-8">
	<title>Home</title>

	<link rel="stylesheet" type="text/css" href="style/style.css">

	<script type="text/javascript" src="script/jquery.js"></script>
	<script type="text/javascript" src="script/script.js"></script>
</head>
<body>
	<header>
		<h1>WELCOME</h1>
		<nav>
			<ul>
				<li><a href="#">HOME</a></li>
				<li><a href="#">GALLERY</a></li>
				<li><a href="#">ABOUT</a></li>
				<li><a href="#">PRODUCTS</a></li>
				<li><a href="#">CONTACT</a></li>
				<li><a href="#">DONATE</a></li>
			</ul>
		</nav>
	</header>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

刚刚更改了某些地方的边距和填充。你很亲密。

答案 4 :(得分：0)

试试这个：

header nav ul li a{
    font-family:Impact;
    font-size:25px;
    text-decoration: none;
    color:white;
    font-weight:900;
    text-align:center;
    padding: 5px 0px;
    display: block;
}
header nav ul li a:hover{
    background:#ADABAB;
    color:black;
}

请参阅Jsfiddle here

＆＃13;
＆＃13; 
*{margin:0; padding:0;}
body{
	background:black;
	/*background-image:url(../res/back.jpg);*/
	background-size:cover;
}
header{
	width:200px;
	height:600px;
	background-color:rgba(255, 255, 255, 0.5);
	border:4px solid white;
	border-radius:7px;
	margin:10px 0px 0px 360px;
}
header h1{
	font-family:Impact;
	font-size:30px;
	color:white;
	font-weight:900;
	text-align:center;
	margin-top:75px;
}
header nav{

}
header nav ul{

}
header nav ul li{
	list-style:none;
	text-align: center;
	margin-top:25px;
	position:relative;
	top:60px;
}
header nav ul li a{
	font-family:Impact;
	font-size:25px;
	text-decoration: none;
	color:white;
	font-weight:900;
	text-align:center;
	padding: 5px 0px;
	display: block;
}
header nav ul li a:hover{
	background:#ADABAB;
	color:black;
}
＆＃13; 
<html>
<head>
	<meta charset="UTF-8">
	<title>Home</title>

	<link rel="stylesheet" type="text/css" href="style/style.css">

	<script type="text/javascript" src="script/jquery.js"></script>
	<script type="text/javascript" src="script/script.js"></script>
</head>
<body>
	<header>
		<h1>WELCOME</h1>
		<nav>
			<ul>
				<li><a href="#">HOME</a></li>
				<li><a href="#">GALLERY</a></li>
				<li><a href="#">ABOUT</a></li>
				<li><a href="#">PRODUCTS</a></li>
				<li><a href="#">CONTACT</a></li>
				<li><a href="#">DONATE</a></li>
			</ul>
		</nav>
	</header>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题