CSS下拉菜单垂直

我想做一个垂直下拉菜单，但似乎没有工作。它目前不显示任何文本，只是一个横跨页面顶部的栏。由于要求，它被推到了115px。这里的HTML：CSS下拉菜单垂直

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

来源

2014-03-12 Sebastian Smolorz

取出

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

和底部你应该尝试削减下来到显示您的问题所需的最少量的HTML和CSS。例如，忘掉所有的颜色和背景风格。另外，尝试发布工作[JSFiddle]（http://jsfiddle.net/）。 –

该C SS需要在一点的工作试试这个FIDDLE它会工作

这是丢失：从这个

nav ul li { 
    float: left; 

    position: relative; 
}

来源

2014-03-12 06:19:45 Abhi

我发现这个链接的一天，这是一个一步以饱满的例子一步的指导，检查出来：http://www.adam-bray.com/blog/91/Easy+HTML+5+%26+CSS+3+Navigation+Menu/

来源

2014-03-12 05:48:28

“鼓励与外部资源的链接，但请在链接上添加上下文，以便您的同行用户了解它是什么以及为什么在那里。始终引用重要链接中最相关的部分，以防目标网站无法访问或永久离线。“ http://stackoverflow.com/help/how-to-answer –

检查这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;}

来源

2014-03-12 06:07:38 XciA

CSS下拉菜单垂直

回答

相关问题