為什么HTML / Javascript按鈕弄亂了我的CSS下拉菜單？
[英]Why are HTML/Javascript buttons messing up my CSS drop down-menu?
問題描述
我要制作的按鈕是經過精心設計的，以便它們具有特定的CSS ID。 在瀏覽器中進行測試之前，“我投入了很多代碼”，而不是僅將鼠標懸停在“關於我們”上時，所有名稱都顯示在父菜單上。
眼鏡：
- 用於測試的瀏覽器： Chrome
CSS和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>
PS：如果您非常想提高代碼的效率，請隨時這樣做。
1 個解決方案
解決方案1
0 2015-07-22 05:25:48
您錯過了</button>更接近的標記，並且您的<header>是在body標記之前開始的。
請檢查以下代碼段，現在可以正常使用：
謝謝
@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> <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>
為什么下拉菜單在我的本地服務器上可以工作，但是當我按下heroku卻不能用？
[英]Why does my drop down-menu work on my local server but not when I push to heroku?
html、css 和 javascript 的新手。 我無法從 onclick 的下拉菜單中將變量傳遞給我的 javascript 函數
[英]New to html,css, and javascript. I am having trouble passing variables to my javascript function from a drop down menu onclick
下拉菜單，CSS，HTML和JavaScript：JavaScript使菜單跳轉並且無法正常運行
[英]Drop down menu, CSS, HTML and JavaScript: JavaScript making menu jump and not function correctly
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
根據下拉菜單更改注冊表格？
為什么下拉菜單在我的本地服務器上可以工作，但是當我按下heroku卻不能用？
Javascript？/ CSS - 下拉菜單
改進下拉菜單的代碼（HTML / CSS / JavaScript）
html、css 和 javascript 的新手。 我無法從 onclick 的下拉菜單中將變量傳遞給我的 javascript 函數
下拉菜單，CSS，HTML和JavaScript：JavaScript使菜單跳轉並且無法正常運行
HTML和CSS：下拉菜單將不起作用
CSS JavaScript下拉菜單列表
HTML和CSS的新功能：下拉菜單不顯示
PhP javascript html中的下拉菜單
相關標簽