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

Question

我在html中有一个垂直的Nav菜单，我正在尝试制作一个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>