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

我前几天发现了这个链接，它是一个分步指南，附有完整示例，请查看：http://www.adam-bray.com/blog/91/Easy+HTML+5+%26+CSS+3+Navigation+Menu/

Answer 2

检查此fiddle，类似的实现

<nav>
    <ul>
     <li class="header">
            <a href="#">People</a>
        <ul class="content">
            <li><a href="#">Sub 1</a></li>
            <li><a href="#">Sub 2</a></li>
        </ul>
     </li>
    <li class="header">
            <a href="#">Animals</a>
        <ul class="content">
            <li><a href="#">Sub 1</a></li>
            <li><a href="#">Sub 2</a></li>
        </ul>
    </li>
    </ul>
</nav>

nav > ul{}
nav > ul > li{float:left;margin:0 5px;background:#cc3333;}
.header li a{background:#eee;color:#cc3333;}
.header li a:hover{color:#fff;background:#cc3333;}
ul{padding:0;}
li{list-style-type:none;}
a{color:#fff;text-decoration:none;padding:5px;display:block;text-align:center;}
.content{
    display:none;
    }
.header:hover > .content{display:block;}

Answer 3

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;
}

CSS下拉菜单垂直

3 个答案: