2012-09-21 136 views
1

我是一個非常初學html/css。我創建了一個級別的下拉菜單欄。我想從我擁有的CSS中創建第二個級別。由於我不確定第二級代碼,任何人都可以使用下面的CSS來幫助我嗎?css二級下拉菜單

.menu ul{ 
    margin:0; 
    padding:0; 
    list-style:none; 
} 
.menu ul li { 
    margin:0; 
    height:41px; 
    float:left; 
    border-right:1px solid #efefef; 
} 
.menu ul li ul{ 
    margin:0; 
    padding:0; 
    list-style:none; 
} 
.menu ul li ul li { 
    margin:0; 
    height:41px; 
    float:left; 
    background:#fff; 
    border-right:1px solid #efefef; 
} 
.menu ul li .dwn{ 
    float:right; 
    top:-32px; 
    color:#505050; 
    margin-right:10px; 
    position:relative; 
    cursor:pointer; 
} 
.menu ul li a{ 
    padding:9px 28px 8px 28px; 
    display:block; 
    text-decoration:none; 
    color:#303030; 
} 
.menu ul li a:hover{ 
    background:url(images/menu_hover_bg.png) repeat-x; 
} 
.menu ul li .act{ 
    background:url(images/menu_hover_bg.png) repeat-x; 
} 
.menu ul li a span{ 
    width:24px; 
    height:24px; 
    display:inline-block; 
} 
#menu li{ 
    position: relative; 
} 
#menu li:hover > ul{ 
    display: block; 
} 
#menu ul{ 
    list-style: none; 
    margin:0; 
    padding:0; 
    display:none; 
    position:absolute; 
    top:41px; 
    z-index:99999; 
    background: #f5f5f5; 
    background: -moz-linear-gradient(top, #fcfcfc 0%, #f5f5f5 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#f5f5f5)); 
    background: -webkit-linear-gradient(top, #fcfcfc 0%,#f5f5f5 100%); 
    background: -o-linear-gradient(top, #fcfcfc 0%,#f5f5f5 100%); 
    background: -ms-linear-gradient(top, #fcfcfc 0%,#f5f5f5 100%); 
    background: linear-gradient(to bottom, #fcfcfc 0%,#f5f5f5 100%); 
    -moz-border-radius: 2px; 
    border-radius: 2px; 
    border-left:1px solid #d9d9d9; 
    -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.5); 
    -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.5); 
    box-shadow: 2px 2px 2px rgba(0,0,0,0.5); 
} 
#menu ul li{ 
    float: none; 
    margin: 0; 
    padding: 0; 
    width:auto; 
    display: block; 
} 
#menu ul .active{ 
    background: #fff9dc; 
    font-weight:bold; 
} 
#menu ul a{ 
    border-bottom:1px solid #f4f4f4; 
    height: 23px; 
    display: block; 
    padding-left:30px; 
    white-space: nowrap; 
    float: none; 
    text-transform: none; 
    font-size:14px; 
    text-decoration:none; 
    color:#303030; 
} 
+0

不,它很適合我與CSS!我會嘗試用小提琴 – user1012181

+1

http://jsfiddle.net/RdcVk/1/ 從Seeting菜單中,lan​​guange->我更喜歡第二個菜單。 – user1012181

回答