带有 Css/html 的垂直子菜单下拉菜单答案

【问题标题】：Vertical submenu dropdown menu with Css/html带有 Css/html 的垂直子菜单下拉菜单
【发布时间】：2015-01-27 10:10:46
【问题描述】：

我有一个 html 中的垂直导航菜单，我正在尝试制作一个子菜单，但进展不顺利。当我点击子菜单时，它消失了。任何帮助将不胜感激

nav ul {
  list-style: none;
  margin: 0;
  padding: 0px;
  width: 200px;
  height: auto;
}
nav,
ul {
  margin-top: 4px;
}
nav ul li {
  border-top: 2px solid #000000;
  background-color: white;
  width: 10em;
  color: black;
  width: 200px;
  height: auto;
  padding: 5px 0px;
  font-size: 120%;
}
nav ul li:hover {
  background-color: #E88B2E;
}
nav.idk {
  color: yellow;
}
a:link {
  color: green;
}
a:visited {
  color: green;
}
a:hover {
  color: lightgreen;
}
ul li ul {
  list-style: none;
  margin: 0;
  padding: 0px;
  width: 200px;
  height: auto;
  display: none;
}
ul li ul li {
  border-top: 2px solid #000000;
  background-color: white;
  width: 10em;
  color: black;
  width: 200px;
  height: auto;
  padding: 5px 0px;
  font-size: 120%;
}
a:link {
  text-decoration: none;
}
nav ul li:hover ul {
  /* When list item is hovered, display UL nested within. */
  display: block;
}
nav ul ul {
  /* Remove element from document flow */
  position: absolute;
  /* Position relative to its parent &lt;li&gt; */
  left: 210px;
  top: 0;
  border-top: 1px solid #e9e9e9;
  display: none;
}
nav ul ul li {
  width: 200px;
  background: #f1f1f1;
  border: 1px solid #e9e9e9;
  border-top: 0;
}
nav ul ul li a {
  color: #a8a8a8;
  font-size: 12px;
  text-transform: none;
}
nav ul ul li a:hover {
  color: #929292;
}

<div class="wrapper">
  <div class="navigation">
    <nav>
      <ul>
        <li><a href="About.html">About</a>
        </li>
        <li><a href="News.html">News</a>
        </li>
        <li><a href="Controversy.html">The Controversy</a>
          <ul>
            <li><a href="Hounds.html">About the Hounds</a>
            </li>
            <li><a href="Clothing.html">What to Wear</a>
            </li>
            <li><a href="People.html">Who are these People</a>
            </li>
          </ul>
        </li>
        <li><a href="Contact.html">Contact</a>
        </li>
        <li><a href="Citation.html">References</a>
        </li>
        <li><a href="webmaster.html">Webmaster</a>
        </li>
        <li><a href="sitemap.html">Site Map</a>
        </li>
        <li><a href="faq.html">FAQ</a>
        </li>
      </ul>
    </nav>
  </div>

【问题讨论】：

标签： html css drop-down-menu nav submenu

【解决方案1】：

您必须将 left 的值从 210px 更改为 200，或者更好地使用 margin-left 来计算相对于父级的值。

nav ul {
  list-style: none;
  margin: 0;
  padding: 0px;
  width: 200px;
  height: auto;
}
nav,
ul {
  margin-top: 4px;
}
nav ul li {
  border-top: 2px solid #000000;
  background-color: white;
  width: 10em;
  color: black;
  width: 200px;
  height: auto;
  padding: 5px 0px;
  font-size: 120%;
}
nav ul li:hover {
  background-color: #E88B2E;
}
nav.idk {
  color: yellow;
}
a:link {
  color: green;
}
a:visited {
  color: green;
}
a:hover {
  color: lightgreen;
}
ul li ul {
  list-style: none;
  margin: 0;
  padding: 0px;
  width: 200px;
  height: auto;
  display: none;
}
ul li ul li {
  border-top: 2px solid #000000;
  background-color: white;
  width: 10em;
  color: black;
  width: 200px;
  height: auto;
  padding: 5px 0px;
  font-size: 120%;
}
a:link {
  text-decoration: none;
}
nav ul li:hover ul {
  /* When list item is hovered, display UL nested within. */
  display: block;
}
nav ul ul {
  /* Remove element from document flow */
  position: absolute;
  /* Position relative to its parent &lt;li&gt; */
  margin-left: 200px;
  top: 0;
  border-top: 1px solid #e9e9e9;
  display: none;
}
nav ul ul li {
  width: 200px;
  background: #f1f1f1;
  border: 1px solid #e9e9e9;
  border-top: 0;
}
nav ul ul li a {
  color: #a8a8a8;
  font-size: 12px;
  text-transform: none;
}
nav ul ul li a:hover {
  color: #929292;
}

<div class="wrapper">
  <div class="navigation">
    <nav>
      <ul>
        <li><a href="About.html">About</a>
        </li>
        <li><a href="News.html">News</a>
        </li>
        <li><a href="Controversy.html">The Controversy</a>
          <ul>
            <li><a href="Hounds.html">About the Hounds</a>
            </li>
            <li><a href="Clothing.html">What to Wear</a>
            </li>
            <li><a href="People.html">Who are these People</a>
            </li>
          </ul>
        </li>
        <li><a href="Contact.html">Contact</a>
        </li>
        <li><a href="Citation.html">References</a>
        </li>
        <li><a href="webmaster.html">Webmaster</a>
        </li>
        <li><a href="sitemap.html">Site Map</a>
        </li>
        <li><a href="faq.html">FAQ</a>
        </li>
      </ul>
    </nav>
  </div>

【讨论】：