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;

}

どうすればそれを成し遂げることができるかについてのアイデアはありますか?

ありがとう!

Drjay

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 に答える