-1

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

比如chrome开发工具菜单栏。

请任何人帮助我如何制作它？

4

1 回答 1

1

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

代码

<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/

于 2013-04-23T07:41:55.713 回答