为什么HTML / Javascript按钮弄乱我的CSS下拉菜单？

时间：2015-07-22 04:34:07

标签： javascript html css drop-down-menu

我正在尝试制作的按钮是为了让它们成为某个C.S.S. ID。在我在浏览器中进行测试之前，“我已添加了大量代码”，而不是只在我将鼠标悬停在“关于我们”上时显示，所有名称都显示在父菜单上。

规格：

  • 用于测试的浏览器： Chrome

CSS＆amp; HTML：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,600,300);

*{
	padding : 0;
	margin : 0;
}

a.hlink:link {color : #000000; text-decoration : none;}
a.hlink:visited {color : #000000; text-decoration : none;}
a.hlink:hover {color : #ffffff; text-decoration : none;}
a.clink:link {color : #000000; text-decoration : none;}
a.clink:visited {color : #000000; text-decoration : none;}
a.clink:hover {color : #000000; text-decoration : none;}

ul {list-style: none;padding: 0x;margin: 0px;width: 232px;height: 40px;margin-left: auto;margin-right: auto;}
ul li {display: block;position: relative;float: left;padding: 5px}
li ul {display: none;}
ul li a {display: block;background: #fff;padding: 5px 10px 5px 10px;text-decoration: none;white-space: nowrap;color: #000;}
ul li a:hover {background: #fff;}
li:hover ul {display: block; position: absolute; width: 150px;}
li:hover li {float: none;}
li:hover a {background: #fff;}
li:hover li a:hover {background: #fff;}
#drop-nav li ul li {border-top: 0px;}
#drop-nav:after {content: "";clear: both;display: table;}

body{
	background-image : url(' Images/IST Wizards2.png ');
	background-repeat: no-repeat;
	background-position: center; 
	background-attachment : fixed;
	background-size : 100%;
	background-size : cover;
}
header{
	background-color : #ffffff;
	background-position: center; 
	background-attachment : fixed;
	background-size : cover;
	font-family : 'Open Sans', Sans-Serif;
	font-weight : 600;
	box-shadow: 0px 2px 10px #000000;
}
.buttons{
	font-family : 'Open Sans', Sans-Serif;
	font-weight : 600;
	border : 0;
	background : #ffffff;
	font-size : 12pt;
	outline: none;
}
.buttons:hover{
	cursor : pointer;
}
<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="Style.css">
		<link rel="shortcut icon" type="image/x-icon" href="Images/favicon.ico">
		<title>WELCOME!</title>
	</head>
	<header>
	<img src="Images/IST Logo.png" style="height : 30px; position : absolute; top : 5px; left : 5px;">
		<ul id="drop-nav">
		
		  <li> <button class="buttons" onclick="document.getElementById('Home').scrollIntoView();">HOME</button></li>
		  <li> <button class="buttons" onclick="document.getElementById('About Us').scrollIntoView();">ABOUT US
			<ul>
			  <li> <button class="buttons"  onclick="document.getElementById('Anthony').scrollIntoView();">Anthony</button></li>
			  <li onclick="document.getElementById('Brandon').scrollIntoView();">Brandon</li>
			  <li onclick="document.getElementById('Colyn').scrollIntoView();">Colyn</li>
			  <li onclick="document.getElementById('Elijah').scrollIntoView();">Elijah</li>
			  <li onclick="document.getElementById('Evan').scrollIntoView();">Evan</li>
			  <li onclick="document.getElementById('Gabe').scrollIntoView();">Gabe</li>
			  <li onclick="document.getElementById('Joel').scrollIntoView();">Joel</li>
			  <li onclick="document.getElementById('Joe').scrollIntoView();">Joe</li>
			  <li onclick="document.getElementById('Matt').scrollIntoView();">Matt</li>
			  <li onclick="document.getElementById('Mike B.').scrollIntoView();">Mike B.</li>
			  <li onclick="document.getElementById('Mike D.').scrollIntoView();">Mike D.</li>
			  <li onclick="document.getElementById('Nate').scrollIntoView();">Nate</li>
			  <li onclick="document.getElementById('Nic').scrollIntoView();">Nic</li>
			  <li onclick="document.getElementById('Reese').scrollIntoView();">Reese</li>
			  <li onclick="document.getElementById('Rhalene').scrollIntoView();">Rhalene</li>
			  <li onclick="document.getElementById('Robert').scrollIntoView();">Robert</li>
			  <li onclick="document.getElementById('Sagan').scrollIntoView();">Sagan</li>
			  <li onclick="">Xavier</li>
			</ul>
		  </li>
		  <li onclick="document.getElementById('Contact').scrollIntoView();">CONTACT</li>
		</ul>
	</header>
	<body>
		
	</body>
</html>

P.S。如果您觉得自己更倾向于使代码更有效，请随意这样做。

1 个答案:

答案 0 :(得分：0)

您错过了</button>更近的标记，而<header>也在body代码之前开始。

请检查下面的代码段，现在工作正常：

由于

＆＃13;
＆＃13; 
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,600,300);

*{
	padding : 0;
	margin : 0;
}

a.hlink:link {color : #000000; text-decoration : none;}
a.hlink:visited {color : #000000; text-decoration : none;}
a.hlink:hover {color : #ffffff; text-decoration : none;}
a.clink:link {color : #000000; text-decoration : none;}
a.clink:visited {color : #000000; text-decoration : none;}
a.clink:hover {color : #000000; text-decoration : none;}

ul {list-style: none;padding: 0x;margin: 0px;width: 232px;height: 40px;margin-left: auto;margin-right: auto;}
ul li {display: block;position: relative;float: left;padding: 5px}
li ul {display: none;}
ul li a {display: block;background: #fff;padding: 5px 10px 5px 10px;text-decoration: none;white-space: nowrap;color: #000;}
ul li a:hover {background: #fff;}
li:hover ul {display: block; position: absolute; width: 150px;}
li:hover li {float: none;}
li:hover a {background: #fff;}
li:hover li a:hover {background: #fff;}
#drop-nav li ul li {border-top: 0px;}
#drop-nav:after {content: "";clear: both;display: table;}

body{
	background-image : url(' Images/IST Wizards2.png ');
	background-repeat: no-repeat;
	background-position: center; 
	background-attachment : fixed;
	background-size : 100%;
	background-size : cover;
}
header{
	background-color : #ffffff;
	background-position: center; 
	background-attachment : fixed;
	background-size : cover;
	font-family : 'Open Sans', Sans-Serif;
	font-weight : 600;
	box-shadow: 0px 2px 10px #000000;
}
.buttons{
	font-family : 'Open Sans', Sans-Serif;
	font-weight : 600;
	border : 0;
	background : #ffffff;
	font-size : 12pt;
	outline: none;
}
.buttons:hover{
	cursor : pointer;
}
＆＃13; 
<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="Style.css">
		<link rel="shortcut icon" type="image/x-icon" href="Images/favicon.ico">
		<title>WELCOME!</title>
	</head>
<body>
	<header>
	<img src="Images/IST Logo.png" style="height : 30px; position : absolute; top : 5px; left : 5px;">
		<ul id="drop-nav">
		
		  <li> <button class="buttons" onclick="document.getElementById('Home').scrollIntoView();">HOME</button></li>
		  <li> <button class="buttons" onclick="document.getElementById('About Us').scrollIntoView();">ABOUT US</button>
			<ul>
			  <li> <button class="buttons"  onclick="document.getElementById('Anthony').scrollIntoView();">Anthony</button></li>
			  <li onclick="document.getElementById('Brandon').scrollIntoView();">Brandon</li>
			  <li onclick="document.getElementById('Colyn').scrollIntoView();">Colyn</li>
			  <li onclick="document.getElementById('Elijah').scrollIntoView();">Elijah</li>
			  <li onclick="document.getElementById('Evan').scrollIntoView();">Evan</li>
			  <li onclick="document.getElementById('Gabe').scrollIntoView();">Gabe</li>
			  <li onclick="document.getElementById('Joel').scrollIntoView();">Joel</li>
			  <li onclick="document.getElementById('Joe').scrollIntoView();">Joe</li>
			  <li onclick="document.getElementById('Matt').scrollIntoView();">Matt</li>
			  <li onclick="document.getElementById('Mike B.').scrollIntoView();">Mike B.</li>
			  <li onclick="document.getElementById('Mike D.').scrollIntoView();">Mike D.</li>
			  <li onclick="document.getElementById('Nate').scrollIntoView();">Nate</li>
			  <li onclick="document.getElementById('Nic').scrollIntoView();">Nic</li>
			  <li onclick="document.getElementById('Reese').scrollIntoView();">Reese</li>
			  <li onclick="document.getElementById('Rhalene').scrollIntoView();">Rhalene</li>
			  <li onclick="document.getElementById('Robert').scrollIntoView();">Robert</li>
			  <li onclick="document.getElementById('Sagan').scrollIntoView();">Sagan</li>
			  <li onclick="">Xavier</li>
			</ul>
		  </li>
		  <li onclick="document.getElementById('Contact').scrollIntoView();">CONTACT</li>
		</ul>
	</header>
	
		
	</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题