<script>
function init()
{
document.getElementById("header").onclick = function()
{
document.getElementById('subtwo').style.display = 'none';
}
window.onload=init;
</script><style>
* {
margin: 0;
box-sizing: border-box;
}
body {
font: 1.2em Verdana, sans-serif;
background-color: antiquewhite;
}
h2, h3 {
text-align: center;
}
p {
padding: 0.5em 0.2em;
}
ul {
list-style-type: none;
padding-left: 0;
}
a {
text-decoration: none;
color: crimson;
display: block;
}
#header {
background-color: tan;
padding: 0.5em;
}
#mainMenu {
overflow: hidden;
}
#mainMenu li {
background-color: white;
border: 1px solid black;
text-align: center;
float: left;
width: 25%;
}
#leftBar, #rightBar {
padding-top: 2em;
}
#leftBar {
float: left;
width: 8em;
}
#leftBar li {
width: 100%;
text-align: center;
background-color: white;
border-bottom: 1px solid black;
}
#leftBar li:first-child {
border-top: 1px solid black;
}
#leftBar a, #mainMenu a {
padding: .25em 0;
}
#rightBar {
float: right;
width: 8em;
padding-left: 0.4em;
}
#main {
padding: 2em 5px 1em 5px;
border: 1px solid tan;
border-width: 0 8em;
border-bottom: 1px solid black;
}
#footer ul {
padding: 10px 8em;
}
#footer li {
float: left;
width: 33%;
text-align: center;
border-right: 1px solid black;
font-size: 0.8em;
}
#footer li:last-child {
border-right-style: none;
}
#leftBar a:hover, #mainMenu a:hover {
color: black;
background-color: #ccc;
background-color: peru;
}
#footer a:hover {
display:inline;
border-bottom: 1px solid red;
}
.submenu {
background-color: gold;
border: 2px solid black;
border-radius: .5em;
}
#subone {
height:100px;
}
#subtwo {
height: 120px;
}
</style><body>
<div id="header">
<h2>Lab8 - Submenus</h2>
</div>
<div id="mainMenu">
<ul>
<li id="one"><a href="#"> Home </a></li>
<li id="two"><a href="#"> About Us ▼</a></li>
<li id="three"><a href="#"> Directory ▼</a></li>
<li><a href="#"> Map </a></li>
</ul>
</div>
<div id ="subone" class ="submenu">
<h3>The first submenu. </h3>
</div>
<div id ="subtwo" class ="submenu">
<h3>The second submenu.</h3>
</div>
<div id="leftBar">
<ul>
<li><a href="#"> Link 1 </a></li>
<li><a href="#"> Link 2 </a></li>
<li><a href="#"> Link 3 </a></li>
<li><a href="#"> Link 4 </a></li>
<li><a href="#"> Link 5 </a></li>
</ul>
</div>
<div id="rightBar">
<p>
Here is perhaps a small related article.
</p>
<p>And perhaps a few more links</p>
</div>
<div id="main">
<h3> Content Heading </h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus vehicula, lorem sed hendrerit auctor, sapien dolor
consectetur enim, nec pharetra odio orci nec massa.
Duis suscipit elit libero, sit amet cursus ante.
Mauris laoreet tellus in urna suscipit ornare.
Aenean erat purus, commodo in aliquet et, aliquet at quam.
</p><p>
Suspendisse commodo imperdiet dolor mattis scelerisque.
Morbi blandit sem ac augue gravida sed vehicula augue blandit.
Mauris hendrerit vestibulum faucibus.
Integer tellus augue, adipiscing id commodo vitae, volutpat id nunc.
Maecenas ultrices, ante a commodo rutrum, sapien purus consectetur nibh,
id auctor erat lectus ac purus. Morbi id suscipit nunc.
</p>
</div>
<div id="footer">
<ul>
<li><a href="http://csci.viu.ca/~hohman/"> Bill H </a></li>
<li><a href="https://validator.w3.org/"> HTML </a></li>
<li><a href="https://jigsaw.w3.org/css-validator/"> CSS </a></li>
</ul>
</div>
</body>我首先想添加一些 CSS 规则来定位然后“隐藏”子菜单，然后添加 JavaScript 事件处理程序来创建下拉菜单行为。如果有人能告诉我该怎么做，我将不胜感激。 如果我点击一个词，就会弹出一个下拉菜单，如果我点击页面的任何地方，它就会出现。
最佳答案
此功能内置于 HTML 中。除非你真的需要重新创建轮子，否则只需使用已经为你实现的内容，如下所示。 source MDN Select
<!-- The second value will be selected initially --> <select name="text"> <!--Supplement an id here instead of using 'text'--> <option value="value1">Value 1</option> <option value="value2" selected>Value 2</option> <option value="value3">Value 3</option> </select>
如果您正在寻找最美观的 UI，请尝试使用 Twitter 的 Bootstrap 或 Google 的 Material Components Web 等库。
关于javascript - 如何制作下拉菜单行为？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49545293/