[英]How do I make drop down menu from document.getElementById javascript
我需要在下面的代碼中從“ menu4”創建一個下拉菜單。 代碼運行良好，但我需要引入一個下拉菜單。 我嘗試了多種方法在列表中包含列表，但似乎無法正常工作。 我真的需要別人的幫助。 任何人？ 謝謝。
document.getElementById("nav01").innerHTML = "<ul id='menu'>" + " <li><a href= '#'>Home</a></li> " + " <li><a href= '#'>menu1</a></li> " + " <li><a href= '#'>menu2</a></li> " + " <li><a href = '#'>menu3</a></li> " + " <li><a href = '#'>menu4</a></li> " + " <li><a href = 'index.php'> Log Out</a></li> " + "</ul>";
body { font-family: Bookman Old Style; font-size: 13px; background-color:#EBF4FA; color: #696969; padding-right: 150px; padding-left: 150px; } #top{ background-color: ; height: 120px; box-shadow: 10px #888888; } #main { padding: 5px; padding-left: 15px; padding-right: 15px; background-color: #EBF4F4; border-radius: 0 0 5px 5px; border-style: solid; border-right-width: 1px; } h3 { font-family: Bookman Old Style; border-bottom: 3px; color: black; font-size: 16px; } table { width:100%; } table, th , td { border: 1px solid white; border-collapse: collapse; padding: 0px; } th { text-align: left; } table tr:nth-child(odd) { background-color: #ffffff; } table tr:nth-child(even) { background-color: #ffffff; } ul#menu { padding: 0; margin-bottom: 11px; } ul#menu li { display: inline; margin-right: 3px; margin: 100px auto; line-height:30px; max-width:860px; } ul#menu li a { background-color: #ffffff; padding: 10px 20px; text-decoration: none; color: #696969; border-radius: 4px 4px 0 0; } ul#menu li a:hover { color: white; background-color: black; } #footer { position: right; color: #ffffff; } h1 { border-bottom: 3px solid orange; font-size: 30px; }
<!DOCTYPE html> <html> <head> <title>About</title> <link href="site.css" rel="stylesheet"> </head> <nav id="nav01"></nav> <body> <div id="main"> <h1>About Us</h1> <p>Dibon Company Limited is a project delivery and technical consultancy firm that provides efficient and cost effective methodologies and expertise in managing complex as well as simple projects</p> <div class="box contactdetails"> <h2>Our Contact Details </h2> <ul> <li>Dibon Limited Company</li> <li class="last">Website: <a href="https://www.dibon.co.ke">dibon</a></li> <li>Email: info@dibon</li> <li class="last">Facebook: <a href="https://web.facebook.com">Dibon</a></li> </ul> </div> </div> <script src="script.js"></script> </body> </html>
您確定要使用JavaScript嗎？
如果我理解正確，則可以不使用JavaScript。 功能齊全的下拉菜單可以利用鏈接的hover狀態。 我繼續並為您清理了一些CSS。 看看這個。 這是關鍵的CSS：
.navigation-menu li:hover ul {
display: inline-block;
position: absolute;
background-color: #fff;
border: 3px ridge #ccc;
box-shadow:2px 2px 5px 2px #ccc;
padding:5px;
}
您不需要任何js或其他東西，只需將css3（過渡）懸停即可：
.mainMenu { display: flex; flex-direction: column; overflow: hidden; width: 200px; height: 30px; background-color: darkgrey; color: black; font-family: Arial; line-height: 30px; -webkit-transition: max-height 0.5s ease-in-out; -moz-transition: max-height 0.5s ease-in-out; -o-transition: max-height 0.5s ease-in-out; transition: max-height 0.5s ease-in-out; } .mainMenu:hover { color: white; background-color: #2f6992; cursor: pointer; height: 150px; } ul { padding-left: 15px; } li { list-style: none; } li:hover { color: yellow; } .title { color: white; background-color: darkgrey; width: 100%; height: 30px; padding-left: 5px; }
<div class="mainMenu"> <span class="title">HOVER MENU-POINT...</span> <ul> <li>Menu 1</li> <li>Menu 1</li> <li>Menu 1</li> </ul> </div>
干杯
我如何讓 document.getElementById('id').value 在 Javascript 中返回一個數字而不是一個字符串
[英]How do I make document.getElementById('id').value return a number not a string in Javascript
如何使用模態輸入中的document.getElementById？
[英]How do I use document.getElementById from an input in a modal?
如何使用 javascript 在另一個網頁上使用 document.getElementById() 顯示用戶輸入？
[英]How do I display user input using document.getElementById() from one webpage on another using javascript?
document.getElementById為我的下拉選擇菜單返回null
[英]document.getElementById returns null for my drop-down select menu
如何使用 document.getElementById(“abc”).innerHTML DOM 以字符串格式顯示 JavaScript object 的內容？
[英]How do I display the content of a JavaScript object in a string format using document.getElementById(“abc”).innerHTML DOM?
如何使用Javascript創建等效於document.getElementById的圖像引用？
[英]How do I create an image reference in Javascript equivalent to a document.getElementById?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.