Question

我需要一个垂直ul li菜单固定宽度。当窗口调整大小如果li被隐藏时，它将显示为下拉。

例如镀铬开发工具菜单栏。

请有人帮我怎么做？

Answer 1

我希望你能理解这一点。要确定更改菜单，我使用媒体查询，下面是代码示例。如果您需要任何帮助，请写信给我。

HTML CODE

<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;
    }
}

<强>样本

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

ul li垂直菜单使用css

1 个答案: