带垂直子菜单的水平菜单（仅限HTML / CSS） [英] Horizontal Menu with Vertical Submenu (HTML/CSS Only)

问题描述

我有一个困难的时间，试图使我的子菜单垂直而不是水平。任何帮助将非常感激。

I'm having a difficult time trying to make my submenu vertical instead of horizontal. Any help would be much appreciated.

HTML：

<ul id="menu">
  <li><a href="/" title="HOME">HOME</a></li>
  <li>
    <a href="/" title="ECO ENERGY">ECO ENERGY</a>
    <ul>
      <li><a href="/Evaluations" title="Evaluations">Evaluations</a></li>
      <li><a href="/Incentives" title="Incentives">Incentives</a></li>
      <li><a href="/HouseFiles" title="House Files">House Files</a></li>
      <li><a href="/UpdateSubmissions" title="Update Submissions">Update Submissions</a>/li>
    </ul>
    </li>
    <li>
      <a href="/" title="NEW HOMES">NEW HOMES</a>
      <ul>
        <li><a href="/NH" title="Evaluations">Evaluations</a></li>
      </ul>
    </li>
</ul>

CSS：

#menu {
  background-color: #206676;
  float: left;
  width: 100%;
  height: 60px;
}

ul#menu {
  font-size: 1.3em;
  font-weight: 600;
  margin: 0 0 5px;
  padding: 0;
  text-align: left;
}

ul#menu li {
  display: inline;
  list-style: none;
  padding-left: 15px;
  float: left;
}

ul#menu li a {
  background: none;
  color: #FFF;
  text-decoration: none;
}

ul#menu li a:hover {
  color: #FFF;
  text-decoration: none;
}

ul#menu ul {
  display: none;
}

ul#menu li {
  display: inline;
}

ul#menu li:hover ul {
  display: block;
}

ul#menu li:hover ul li a {
  display: block;
  color: red;
}

我有它的地方，我可以切换的颜色，主菜单项，但只是不能让他们垂直。

I have it to the point where I can toggle the colour when hovered over the main menu items, but just can't get them vertical.

fiddle HERE

推荐答案

ul#menu ul
{
    display:none;
    position:absolute;
    left:0;
    top:20px;
}
ul#menu li
{
    display:block;   
}

最重要的更改。 JSFIDDLE> http://jsfiddle.net/LSbvJ/ （您必须调整paddings，margin，text -align ...但这是一个好的开始，我希望。）

Most important changes. JSFIDDLE> http://jsfiddle.net/LSbvJ/ (You will have to tweak paddings, margins, text-align... but this is good start, I hope.)

这篇关于带垂直子菜单的水平菜单（仅限HTML / CSS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！