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

Question

我在html中有一个垂直的Nav菜单，我正在尝试创建一个submeu，但它并不顺利。当我去点击submeu它消失了。任何帮助将不胜感激

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 <li> */
  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>

Answer 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 <li> */
  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>