html - CSS下拉菜单垂直

Question

我正在尝试制作一个垂直下拉菜单，但似乎不起作用。它目前不显示任何文本，只是一个横跨页面顶部的栏。由于要求，它被推到 115px。这是 HTML:

<div id="wrapper">
<h1>Flags </h1>
<nav>
 <ul>
  <li><a href="flags.html#introduction">Introduction</a></li>
  <li><a href="flags.html#history">History</a></li>
  <li><a href="flags.html#national">National Flags</a></li>
  <li><a href="flags.html#international">International Maritime Signal Flags</a>
    <ul>
        <li><a href="flags.html#letters">Maritime Signals: Letters</a></li>
        <li><a href="flags.html#numbers">Maritime Signals: Numbers</a></li>
    </ul>
  </li>
 </ul>
</nav>

这是 CSS:

nav {
    height:30px; 
    }

nav ul {
    background-color: #5d2c2c; 
    padding: 0;
    list-style: none;
    position: relative;
    bottom: 115px;
    display: block;
}
    nav ul:after {
        content: ""; clear: both; display: block;
    }

nav ul li {
    float: right;
    bottom: 115px;
    position: relative;
}
    nav ul li a {
        display: block; padding: 5px 5px;
        color: #FFF; text-decoration: none;
        text-align:right;
    }
nav ul ul {
    background: #5d2c2c; padding: 0;
    position: absolute; top: 100%;
}
    nav ul ul li {
        float: none; 
        border-top: 1px solid #000;
        border-bottom: 1px solid #575f6a;
        position: relative;
    }   

Answer 1

CSS 需要一些改进试试这个 FIDDLE它会起作用

缺少这个:

nav ul li:nth-child(4) ul { display:none; }

nav ul li:nth-child(4):hover ul { display:block; color:red; }

底部被移除了

nav ul li {
  float: left;

  position: relative;
}