下拉列表菜單 - 不工作

Question

我試圖在下拉菜單中插入3個列表（英語，Informática和Manutenção），但它不起作用。

我在網上得到了這個非常酷炫多彩的菜單，我正在嘗試添加更多列表。
有人能看出我做錯了什么嗎？

 /*===== header =====*/ header nav { float:right; } header nav ul li { float:left; margin-left: -30px; } header nav ul li a { font-size:22px; color:#fff; height:67px; line-height:67px; text-decoration:none; width:101px; text-align:center; float:left; background:#433b8f; background-image: gradient(top, #383282, #484095); /* FF3.6 */ background-image: -moz-linear-gradient(top, #383282, #484095); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #383282),color-stop(1, #484095)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282', EndColorStr='#484095'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282', EndColorStr='#484095')"; /* IE8 */ } header nav ul li a.current, header nav ul li a:hover { padding-bottom:5px; } header nav ul li:nth-of-type(2) a { background:#0184cd; background-image: -moz-linear-gradient(top, #017bc8, #018ed3); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #017bc8),color-stop(1, #018ed3)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3')"; /* IE8 */ } header nav ul li:nth-of-type(3) a { background:#7cbc19; background-image: -moz-linear-gradient(top, #73b515, #86c31d); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #73b515),color-stop(1, #86c31d)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d')"; /* IE8 */ } header nav ul li:nth-of-type(4) a { background:#ffbc00; background-image: -moz-linear-gradient(top, #ffb500, #ffc300); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffb500),color-stop(1, #ffc300)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffb500', EndColorStr='#ffc300'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffb500', EndColorStr='#ffc300')"; /* IE8 */ } header nav ul li:nth-of-type(5) a { background:#f07502; background-image: -moz-linear-gradient(top, #ee6c01, #f27f02); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ee6c01),color-stop(1, #f27f02)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee6c01', EndColorStr='#f27f02'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee6c01', EndColorStr='#f27f02')"; /* IE8 */ } header nav ul li{position: relative;} header nav li ul{position: absolute;display: none;} header nav li:hover ul, header nav li ul li:hover ul, header nav li.over ul, header nav li ul li.over ul{display: block;} header nav li ul li{width:100px; height:25px; line-height:20px;} header nav li ul li:nth-of-type() a { background:#7cbc19; background-image: -moz-linear-gradient(top, #73b515, #86c31d); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #73b515),color-stop(1, #86c31d)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d')"; /* IE8 */ } 

 <header> <div class="container"> <h1><a href="index.html"><img src="images/inove.png"></a></h1> <nav> <ul> <li><a href="index.html" class="current">Home</a></li> <li><a href="about.html">Sobre</a></li> <li><a href="privacy.html">Cursos</a> <ul> <li><a href="privacy.html">Inglês</a></li> <li><a href="privacy.html">Informática</a></li> <li><a href="privacy.html">Manutenção</a></li> </ul> </li> <li><a href="gallery.html">Inscrições</a></li> <li><a href="contacts.html">Contato</a></li> </ul> </nav> </div> </header> 

Answer 1

我用你的CSS玩了一點。
現在看起來好多了......

不能再做了，從現在開始，它將成為設計師的選擇。
;）

看看代碼，我改變的每一行都提到/* CHANGE here */ 。

 /*===== header =====*/ header nav { float:right; } header nav ul li { float:left; /*margin-left: -30px; */ /* CHANGE here */ list-style-type:none; /* CHANGE here */ } header nav ul li a { font-size:22px; color:#fff; height:67px; line-height:67px; text-decoration:none; width:115px; /* CHANGE here */ text-align:center; float:left; background:#433b8f; background-image: gradient(top, #383282, #484095); /* FF3.6 */ background-image: -moz-linear-gradient(top, #383282, #484095); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #383282),color-stop(1, #484095)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282', EndColorStr='#484095'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282', EndColorStr='#484095')"; /* IE8 */ } header nav ul li a.current, header nav ul li a:hover { padding-bottom:5px; } header nav ul li:nth-of-type(2) a { background:#0184cd; background-image: -moz-linear-gradient(top, #017bc8, #018ed3); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #017bc8),color-stop(1, #018ed3)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3')"; /* IE8 */ } header nav ul li:nth-of-type(3) a { background:#7cbc19; background-image: -moz-linear-gradient(top, #73b515, #86c31d); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #73b515),color-stop(1, #86c31d)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d')"; /* IE8 */ } header nav ul li:nth-of-type(4) a { background:#ffbc00; background-image: -moz-linear-gradient(top, #ffb500, #ffc300); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffb500),color-stop(1, #ffc300)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffb500', EndColorStr='#ffc300'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffb500', EndColorStr='#ffc300')"; /* IE8 */ } header nav ul li:nth-of-type(5) a { background:#f07502; background-image: -moz-linear-gradient(top, #ee6c01, #f27f02); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ee6c01),color-stop(1, #f27f02)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee6c01', EndColorStr='#f27f02'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee6c01', EndColorStr='#f27f02')"; /* IE8 */ } header nav ul li{position: relative;} header nav li ul{position: absolute;display: none;} header nav li:hover ul, header nav li ul li:hover ul, header nav li.over ul, header nav li ul li.over ul{display: block;} header nav li ul li{ width:100px; height:25px; line-height:20px; margin-top:40px; /* CHANGE here */ } header nav li ul { /* CHANGE here */ margin-top:27px; /* CHANGE here */ margin-left:-40px; /* CHANGE here */ } /* CHANGE here */ header nav li ul li:nth-of-type() a { background:#7cbc19; background-image: -moz-linear-gradient(top, #73b515, #86c31d); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #73b515),color-stop(1, #86c31d)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d')"; /* IE8 */ } 

 <header> <div class="container"> <!--h1><a href="index.html"><img src="images/inove.png"></a></h1--> <nav> <ul> <li><a href="index.html" class="current">Home</a></li> <li><a href="about.html">Sobre</a></li> <li><a href="privacy.html">Cursos</a> <ul> <li><a href="privacy.html">Inglês</a></li> <li><a href="privacy.html">Informática</a></li> <li><a href="privacy.html">Manutenção</a></li> </ul> </li> <li><a href="gallery.html">Inscrições</a></li> <li><a href="contacts.html">Contato</a></li> </ul> </nav> </div> </header> 

在整頁模式下更好地看一下......
（這個片段並不大）

Answer 2

首先要擺脫margin-left: -30px; 在header nav ul li ，它將停止重疊。 您還需要使用list-style:none隱藏列表標記。 您的header nav li ul欄也應位於菜單下方。 最后，您需要將一些規則應用於header nav li ul li a以覆蓋主菜單的規則。

這應該給你一個開始。

 /*===== header =====*/ header nav { float:right; } header nav ul li { float:left; list-style:none } header nav ul li a { font-size:22px; color:#fff; height:67px; line-height:67px; text-decoration:none; width:101px; text-align:center; float:left; background:#433b8f; background-image: gradient(top, #383282, #484095); /* FF3.6 */ background-image: -moz-linear-gradient(top, #383282, #484095); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #383282),color-stop(1, #484095)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282', EndColorStr='#484095'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282', EndColorStr='#484095')"; /* IE8 */ } header nav ul li a.current, header nav ul li a:hover { padding-bottom:5px; } header nav ul li:nth-of-type(2) a { background:#0184cd; background-image: -moz-linear-gradient(top, #017bc8, #018ed3); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #017bc8),color-stop(1, #018ed3)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3')"; /* IE8 */ } header nav ul li:nth-of-type(3) a { background:#7cbc19; background-image: -moz-linear-gradient(top, #73b515, #86c31d); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #73b515),color-stop(1, #86c31d)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d')"; /* IE8 */ } header nav ul li:nth-of-type(4) a { background:#ffbc00; background-image: -moz-linear-gradient(top, #ffb500, #ffc300); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffb500),color-stop(1, #ffc300)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffb500', EndColorStr='#ffc300'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffb500', EndColorStr='#ffc300')"; /* IE8 */ } header nav ul li:nth-of-type(5) a { background:#f07502; background-image: -moz-linear-gradient(top, #ee6c01, #f27f02); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ee6c01),color-stop(1, #f27f02)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee6c01', EndColorStr='#f27f02'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee6c01', EndColorStr='#f27f02')"; /* IE8 */ } header nav ul li{position: relative;} header nav li ul{position: absolute; left: -40px; top: 60px; display: none;} header nav li:hover ul, header nav li ul li:hover ul, header nav li.over ul, header nav li ul li.over ul{display: block;} header nav li ul li, header nav li ul li a {width:100px; height:25px; line-height:20px;} header nav li ul li:nth-of-type() a { background:#7cbc19; background-image: -moz-linear-gradient(top, #73b515, #86c31d); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #73b515),color-stop(1, #86c31d)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d')"; /* IE8 */ } 

 <header> <div class="container"> <h1><a href="index.html"><img src="images/inove.png"></a></h1> <nav> <ul> <li><a href="index.html" class="current">Home</a></li> <li><a href="about.html">Sobre</a></li> <li><a href="privacy.html">Cursos</a> <ul> <li><a href="privacy.html">Inglês</a></li> <li><a href="privacy.html">Informática</a></li> <li><a href="privacy.html">Manutenção</a></li> </ul> </li> <li><a href="gallery.html">Inscrições</a></li> <li><a href="contacts.html">Contato</a></li> </ul> </nav> </div> </header> 

Answer 3

在FullScreen上查看（Stackoverflow強制調整大小）您可以根據需要復制此代碼段。

 *{ margin:0; padding:0; } ul{ list-style:none; } li{ float:left; padding:15px 30px; width:100px; cursor:pointer; text-align:center; } li:nth-child(1){ background-color:#383282; } li:nth-child(2){ background-color:#017bc8; } li:nth-child(3){ background-color:#73b515; } li:nth-child(4){ background-color:#ffb500; } li:nth-child(5){ background-color:#ee6c01; } li a{ text-decoration:none; font-family:sans-serif; color:#fff; } #inner{ position:absolute; margin-left:-30px; margin-top:15px; display:none; } #inner li{ display:block; float:none; background-color:#73b515; } #inner li{ border-top:1px solid rgba(0,0,0,.3); } #cursos:hover #inner{ display:block; } li:hover{ opacity:.9; } 

 <header> <div class="container"> <nav> <ul> <li><a href="index.html" class="current">Home</a></li> <li><a href="about.html">Sobre</a></li> <li id="cursos"><a href="privacy.html">Cursos</a> <ul id="inner"> <li><a href="privacy.html">Inglês</a></li> <li><a href="privacy.html">Informática</a></li> <li><a href="privacy.html">Manutenção</a></li> </ul> </li> <li><a href="gallery.html">Inscrições</a></li> <li><a href="contacts.html">Contato</a></li> </ul> </nav> </div> </header>