2016-03-02 27 views
0

所以我面臨着創建下拉子菜單的麻煩。我已經開始給ul的一個類和第二個ul的id,但之後我不知道應該在哪裏應用CSS。 我同時設置UL#SUB1 &李一:懸停顯示封鎖,所以你可以看到正是我想說的 演示:在我的下拉菜單上有問題

ul { 
 
\t list-style-type:none; 
 
\t margin:0; 
 
\t padding:0; 
 
\t background-color:#404040; 
 
\t overflow:hidden; 
 
} 
 

 
li { 
 
\t float:left; 
 
} 
 

 
li a { 
 
\t display:block; 
 
\t padding:15px; 
 
\t color:#8c8c8c; 
 
\t float:left; 
 
\t text-decoration:none; 
 
\t padding:30px; 
 
\t display:absolute; 
 
\t font-size:15px; 
 
\t letter-spacing:2px; 
 
\t 
 
} 
 

 
ul#sub1 { 
 
\t display:block; 
 
\t position:absolute; 
 
\t top:78px; 
 
\t left:410px; 
 
} 
 

 
li a:hover { 
 
\t background-color:#ff8533; 
 
\t color:white; 
 
\t transition:0.4s; 
 
\t display:block; 
 
} 
 

 
li a.active { 
 
\t background-color:#ff8533; 
 
\t color:white; 
 
}
<ul class='navmenu'> 
 
\t \t \t <li><a href='http://www.google.ro'>HOME</a></li> 
 
\t \t \t <li><a class='active' href='http://www.google.ro'>ABOUT US</a></li> 
 
\t \t \t <li><a href='http://www.google.ro'>SERVICES</a></li> 
 
\t \t \t <li><a href='http://www.google.ro'>GALLERY</a></li> 
 
\t \t \t \t <ul id='sub1'> 
 
\t \t \t \t \t <li> 
 
\t \t \t \t \t \t <a href='http://www.google.ro'>GALLERY 2</a> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t <li> 
 
\t \t \t \t \t \t <a href='http://www.google.ro'>GALLERY 3</a> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t <li> 
 
\t \t \t \t \t \t <a href='http://www.google.ro'>GALLERY 4</a> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t </ul> 
 
\t \t \t <li><a href='http://www.google.ro'>NEWS</a></li> 
 
\t \t \t <li><a href='http://www.google.ro'>CONTACTS</a></li> 
 
\t \t </ul>

+0

不清楚,你想隱藏畫廊的孩子嗎? – Pedram

回答

0

ul { 
 
    \t list-style-type:none; 
 
\t margin:0; 
 
\t padding:0; 
 
\t background-color:#404040; 
 
    } 
 

 
ul.navmenu { 
 

 
    position:relative; 
 
    display:inline-block; 
 
    width:100%; 
 
} 
 

 
li { 
 
\t float:left; 
 
    position:relative; 
 
} 
 

 
li a { 
 
\t display:block; 
 
\t padding:15px; 
 
\t color:#8c8c8c; 
 
\t float:left; 
 
\t text-decoration:none; 
 
\t padding:30px; 
 
\t display:absolute; 
 
\t font-size:15px; 
 
\t letter-spacing:2px; 
 
\t 
 
} 
 

 
ul.navmenu > li:hover a + ul { 
 
display:block; 
 
    } 
 

 
ul.navmenu ul { 
 
\t display:none; 
 
\t position:absolute; 
 
\t top:100%; \t 
 
} 
 

 
ul#sub1 li { 
 
    display:block; 
 
    float:none; 
 
    } 
 

 
li a:hover { 
 
\t background-color:#ff8533; 
 
\t color:white; 
 
\t transition:0.4s; 
 
\t display:block; 
 
} 
 

 
li a.active { 
 
\t background-color:#ff8533; 
 
\t color:white; 
 
}
<ul class='navmenu'> 
 
\t \t \t <li><a href='http://www.google.ro'>HOME</a></li> 
 
\t \t \t <li><a class='active' href='http://www.google.ro'>ABOUT US</a></li> 
 
\t \t \t <li><a href='http://www.google.ro'>SERVICES</a></li> 
 
\t \t \t <li><a href='http://www.google.ro'>GALLERY</a> 
 
\t \t \t \t <ul id='sub1'> 
 
\t \t \t \t \t <li> 
 
\t \t \t \t \t \t <a href='http://www.google.ro'>GALLERY 2</a> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t <li> 
 
\t \t \t \t \t \t <a href='http://www.google.ro'>GALLERY 3</a> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t <li> 
 
\t \t \t \t \t \t <a href='http://www.google.ro'>GALLERY 4</a> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t </ul> 
 
      </li> 
 
\t \t \t <li><a href='http://www.google.ro'>NEWS</a></li> 
 
\t \t \t <li><a href='http://www.google.ro'>CONTACTS</a></li> 
 
\t \t </ul>