下拉菜单 HTML

Question

我在使用菜单中的下拉菜单时遇到问题。我希望我的菜单能够下拉，同时悬停下拉。你能帮我吗？

这是我的代码：

#menu {
  float: left;
  width: 971px;
  height: 70px;
  background: url(../images/menu_bg.gif) no-repeat 0 0 #CCC
}
#menu ul {
  float: right;
  width: 936px;
  list-style: none;
  margin: 0;
  padding: 12px 0 0 35px
}
#menu li {
  float: left;
  width: auto;
  font: 18px/20px"ZapfHumnst BT", Arial, Helvetica, sans-serif;
  color: #fff;
  padding: 10px 27px 20px 27px;
  background: url(../images/menu_border.gif) no-repeat 0 0
}
#menu li a {
  color: #fff;
  text-decoration: none;
}
#menu li a:hover {
  color: #fff;
  text-decoration: underline;
}
#menu li a.current {
  color: #fff;
  text-decoration: none
}
#menu li.first {
  background: none;
  padding: 10px 27px 0 64px
}
#menu li.last {
  background: none;
  background: url(../images/menu_border.gif) no-repeat 0 2px;
  padding: 10px 0 27px 27px
}

<div id="menu">
  <ul>
    <li class="first"><a href="index.php">Home</a>
    </li>
    <li><a href="about_us.html">About Me</a>
    </li>
    <li><a href="privacy.html">A True Story</a>
    </li>
    <li><a class="current" href="projects.html">Menopause Overview</a>
    </li>
    <!-- <li><a href="services.html">Services</a></li> -->
    <li><a href="support.html">News</a>
    </li>
    <li><a href="contact_us.html">Contact Us</a>
    </li>
  </ul>
</div>

Answer 1

您必须添加适当的下拉菜单结构，例如：

<div id="menu">
  <ul>
    <li class="first"><a href="index.php">Home</a>
    </li>
    <li><a href="about_us.html">About Me</a>
    </li>
    <li><a href="privacy.html">A True Story</a>
    </li>
    <li><a class="current" href="projects.html">Menopause Overview</a>
      <ul>
        <li><a href="services.html">Services</a></li>
      </ul>
    </li>

    <li><a href="support.html">News</a>
    </li>
    <li><a href="contact_us.html">Contact Us</a>
    </li>
  </ul>
</div>

然后，通过 :hover 事件，您可以 show/hide 下拉菜单：

#menu li ul { display: none; position : absolute; left: 0; top: 50px; background: #333; width: auto; padding: 0;}
#menu li:hover ul {display: block; }

See this fiddle

下拉菜单 HTML

DROPDOWN MENU HTML

html

css

hover

drop-down-menu

dropdown