Question

我一直在尝试不同的东西，但仍然能够得到我想要的东西。我想创建一个菜单。我希望菜单宽度约为20px，下拉列表为80-100px。

<div id="menulevel2grouping2">
                <ul>
                    <li><a href="#" onClick="">T</a>
                        <ul>
                            <li><a href="#" onClick="">Type 1</a></li>
                            <li><a href="#" onClick="">Type 2</a></li>
                            <li><a href="#" onClick="">Type 3</a></li>
                            <li><a href="#" onClick="">Type 4</a></li>
                        </ul>
                    </li>
                    <li><a href="#" onClick="">S</a>
                        <ul>
                            <li><a href="#" onClick="">Small</a></li>
                            <li><a href="#" onClick="">Medium</a></li>
                            <li><a href="#" onClick="">Large</a></li>
                        </ul>    
                    </li>
                </ul>

            </div>



   #menulevel2grouping2{
    margin: 0px;
    padding: 0px;
}

#menulevel2grouping2 ul{
    margin: 0px;
    padding: 0px;
    line-height: 30px;


}

#menulevel2grouping2 li{
    margin: 0px;
    padding: 0px;
    list-style: none;
    float: left;
    position: relative;


}

#menulevel2grouping2 ul li a{
    text-align: center;
    font-family: Helvetica, Verdana Arial, sans-serif;
    font-size: 12px;

    background-color: blue;

    width: 60px;

    text-decoration: none;

    display: block;
    color: #000000;
}    

#menulevel2grouping2 ul ul{
    position: absolute;
    display: none;
    top: 30px
}

#menulevel2grouping2 ul li:hover ul{
    display: block;

}

关于如何完成任务的任何想法？

谢谢！

Drjay

Answer 1

这是你想要的效果吗？请参阅此处的小提琴：http://jsfiddle.net/scTgZ/

我修改了你的CSS。看小提琴。

Answer 2

首先，只要有可能，您应该为元素提供类或id以避免并发症。这就是CSS的目的，以促进事情，而不是使它们复杂化。

无论如何，这样的事情应该有效：

#menulevel2grouping2 ul li{width:20px; position:relative; z-index:10}
#menulevel2grouping2 ul li ul li{width:200px; position:relative; z-index:10}

你可能不需要位置和z-index（我没有测试它）你可能需要一些浮动上层li，但这应该足以让你有个想法

设置下拉宽度比菜单长

2 个答案: