2017-04-10 13 views
1

ドロップダウンメニュー(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>

答えて

0

私はあなたの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>

フルページモードではそれで良く見える...
(このスニペットがenought大きくない)

+0

ありがとう!しかし、まだドロップダウンメニューが表示されていません:/ –

+0

スニペットで、私は "Cursos"の上にマウスで "Inglês"、 "Informática"と "Manutenção"を参照してください... –

0

まず最初はmargin-left: -30px;を取り除くことですon 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>

0

ビュー(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> 
 
     \t <ul id="inner">   
 
    \t \t <li><a href="privacy.html">Inglês</a></li> 
 
    \t \t <li><a href="privacy.html">Informática</a></li> 
 
    \t \t <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> 
 
\t </header>

+0

お時間をありがとう!しかし、私はどのように "Cursos"に3つのリストを追加することができます。私は –

+0

それはすでに追加されています。あなたが何か他のことを意味する場合は、ソースを確認して詳細に説明してください。 –

関連する問題