0

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

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

}

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

谢谢！

杰伊

4

2 回答 2

2

这是你想要的效果吗？在这里看小提琴：http: //jsfiddle.net/scTgZ/

我已经修改了你的 CSS。见小提琴。

于 2012-06-23T04:38:13.670 回答
1

首先，只要有可能，您应该为您的元素提供一个类或 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，但这应该足以让您了解

于 2012-06-23T04:01:06.230 回答