我正在尝试在下拉菜单(Inglês,Informática和Manutenção)中插入3个列表,但是它不起作用。
我在线上获得了这个非常酷而丰富多彩的菜单,并且我正在尝试向其中添加更多列表。
谁能看到我做错了什么?
/*===== 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>
最佳答案
我玩了一些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>
最好以整页模式查看...
(此代码片段不够大)
关于javascript - 下拉列表菜单-不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43313261/