Dropdown list menu - not working

时间：2017-04-10 00:10:19

标签： javascript jquery html css

I'm trying to insert 3 lists in a dropdown menu (Inglês, Informática and Manutenção), but it's not working.

I got this pretty cool and colorful menu online, and I'm trying to add more lists into it.
Can anyone see what is it that I'm doing wrong?

/*===== 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>

3 个答案:

答案 0 :(得分：0)

I played a little with your CSS.
It looks better now...

Can't do more since, from now on, it will be designer's choice.
;)

Look at the code, there is a mention /* CHANGE here */ on every lines I changed.

/*===== 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>

Better look at it in full page mode...
(This snippet is not large enought)

答案 1 :(得分：0)

First thing is to get rid of margin-left: -30px; on header nav ul li, which will stop the overlap. You'll also want to hide the list markers with list-style:none. Your header nav li ul should be positioned below the menu as well. Finally, you'll need to apply some rules to header nav li ul li a to override the rules for the main menu.

That should give you a start.

/*===== 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>

答案 2 :(得分：0)

View on FullScreen(Stackoverflow forces resize) You can copy this snippet if you like.

*{
  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>

相关问题
最新问题