HTML 和 CSS 的新功能：不显示下拉菜单

Question

您好，我正在创建一个网站导航菜单。我已经为我的其中一个链接实现了下拉选项，但它根本没有显示。我确信这是一个我忽略的简单修复，我们将不胜感激。

我只包含了相关的 HTML 和 CSS 代码。谢谢！

HTML:

<nav onmouseout="hide()">
<ul id="navMenu">
<li><a href="homepage.html">Home</a></li>
<li><span onmouseover="show(about)">About Us</span>
<div id="about" onmouseover="show(about)" style="visibilty:hidden;">
<a href="Darwin.html">Darwin</a>
<a href="Alex.html">Alex</a>
</div>
</li>
<li><a href="quote.html">Get a Quote</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>

CSS:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #922e2e;
  margin-top: 4px;
  margin-bottom: 4px;
}

li {
  float: left;
}

li a, span {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

#navMenu div {
  position: absolute;
  visibility: hidden;
}

#navMenu div a {
  display: block;
  width: 500px;
  height: 50px;
  background-color: #922e2e;
  color: black;
  text-align: center;
  margin-bottom: 0px;
}

#navMenu div:hover {
 display: block;
 background-color: #7e8182;
}

Answer 1

不需要JS，纯CSS。希望这会有所帮助 ;)

nav
{
 margin-top:15px
}

nav ul
{
 list-style:none;
 position:relative;
 float:left;
 margin:0;
 padding:0
}

nav ul a
{
 display:block;
 color:#333;
 text-decoration:none;
 font-weight:700;
 font-size:12px;
 line-height:32px;
 padding:0 15px;
 font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

nav ul li
{
 position:relative;
 float:left;
 margin:0;
 padding:0
}

nav ul li.current-menu-item
{
 background:#ddd
}

nav ul li:hover
{
 background:#f6f6f6
}

nav ul div
{
 display:none;
 position:absolute;
 top:100%;
 left:0;
 background:#fff;
 padding:0
}

nav ul div li
{
 float:none;
 width:200px
}

nav ul div a
{
 line-height:120%;
 padding:10px 15px
}


nav ul li:hover > div
{
 display:block
}

<nav>
  <ul id="navMenu">
    <li><a href="homepage.html">Home</a></li>
    <li><a>About Us</a>
      <div id="about">
        <a href="Darwin.html">Darwin</a>
        <a href="Alex.html">Alex</a>
      </div>
    </li>
  <li><a href="quote.html">Get a Quote</a></li>
  <li><a href="contact.html">Contact Us</a></li>
  </ul>
</nav>

Answer 2

您可以使用 CSS 执行此操作，无需使用 javaScript。检查下面更新的代码段

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #922e2e;
  margin-top: 4px;
  margin-bottom: 4px;
}

li {
  float: left;
}

li a, span {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

#navMenu div {
  position: absolute;
 display: none;
 background-color: #7e8182;
}

#navMenu div a {
  display: block;
  width: 200px;
  height: 50px;
  background-color: #922e2e;
  color: black;
  text-align: center;
  margin-bottom: 0px;
}

#navMenu li:hover div{
 display: block;
}

<nav>
<ul id="navMenu">
<li><a href="homepage.html">Home</a></li>
<li><span>About Us</span>
<div id="about">
<a href="Darwin.html">Darwin</a>
<a href="Alex.html">Alex</a>
</div>
</li>
<li><a href="quote.html">Get a Quote</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>

HTML 和 CSS 的新功能：不显示下拉菜单

New to HTML and CSS: Drop down menu not displaying

html

javascript

css

navigationbar

drop-down-menu