如何从document.getElementById javascript制作下拉菜单
[英]How do I make drop down menu from document.getElementById javascript
问题描述
I need to make a drop down menu from "menu4" on the code below. 
我需要在下面的代码中从“ menu4”创建一个下拉菜单。 The code is running well but I need to introduce a drop down menu. 代码运行良好，但我需要引入一个下拉菜单。 I have tried different ways to have a list inside a list but seems not to work. 我尝试了多种方法在列表中包含列表，但似乎无法正常工作。 I really need someones help. 我真的需要别人的帮助。 Anyone? 任何人？ Thanks. 谢谢。
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>
2 个解决方案
解决方案1
1 已采纳 2016-06-21 13:21:07
Are you sure you need javascript for this? 您确定要使用JavaScript吗？
If I understand it correctly, you can do this without javascript. 如果我理解正确，则可以不使用JavaScript。 Fully functional dropdown menus can take advantage of hover states for the links. 功能齐全的下拉菜单可以利用链接的hover状态。 I went ahead and cleaned up some CSS for ya. 我继续并为您清理了一些CSS。 Check it out. 看看这个。 Here's the key 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;
}
http://codepen.io/anon/pen/MebwjB http://codepen.io/anon/pen/MebwjB
解决方案2
0 2016-06-21 13:26:42
You don't need any js or something else, do it with css3 (transition) by hover: 您不需要任何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>
Cheers 干杯
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.