ul li垂直菜單使用css

Question

我需要一個垂直ul li菜單固定寬度。 當窗口調整大小，如果李隱藏它將顯示像一個下拉菜單。

例如chrome開發工具菜單欄。

請任何人幫我如何做到這一點？

Answer 1

我希望你明白一口井。要確定更改菜單我使用媒體查詢，下面是代碼示例。如果您需要任何幫助，只需寫信給我。

HTML代碼

<div class="menu"> 
    <ul> 
     <li><a href="#">Item 1</a></li> 
     <li><a href="#">Item 2</a></li> 
     <li><a href="#">Item 3</a></li> 
     <li><a href="#">Item 4</a></li> 
    </ul> 
</div> 

CSS代碼

body { 
    width:400px; 
} 
.menu { 
    width: 100px; 
} 
ul { 
    padding: 0; 
    margin: 0; 
} 
ul li a { 
    display:block; 
    padding: 5px 15px; 
    color: #999; 
    background-color: #e5e5e5; 
    border-top: 1px solid #999; 
    text-decoration: none; 

} 
ul li:first-child { 
    border: none; 
} 
ul li a:hover { 
    background-color: #f2f2f2; 

} 
@media only screen 
and (max-width : 600px) { 
    .menu { 
     width: 40px; 
     height: 40px; 
     background: #08c9a2 url('http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/32x32/list_bullets.png') no-repeat scroll 50% 50%; 
    } 
    .menu ul { 
     display:none; 
    } 
    .menu:hover ul { 
     display:block; 
    }.menu:hover { 
     width: 100px; 
     height: auto; 
    } 
} 

DEMO

http://jsfiddle.net/4nBHf/2/