1

休暇中は自由な時間を使って HTML の知識を深めています。

その間、私は CSS メニューを設計していました。私はいくつかの問題に直面しており、それらを解決する方法がわかりません。

Googleから検索してみました。英語が下手なため、解決策を見つけることができなかったので、ここで助けを求めます。

問題：

拡張可能なサブメニューを備えた CSS メニューを設計しようとしました。サブメニューの親リストが変更されないのはなぜですか?

スクリーンショットからわかるように。商品メニューは他とは異なります。

解決策はありますか？

スクリーンショット

私の評判のためにスクリーンショットを提供できないので、リンクを提供します：

http://i151.photobucket.com/albums/s155/HongJaiz/CSSMenu.jpg

CSS3コーディング

body{
    position: relative;
    height: 100%;
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));

}

.navbox {
    position: relative;
    float: left;
}

ul#expList {
    list-style: none;
    display: block;
    width: 200px;
    position: relative;
    padding: 60px 0 60px 0;
    background: url(shad2.png) no-repeat;
    -webkit-background-size: 50% 100%;
}

li#expList {
    list-style: none;
    display: block;
    width: 200px;
    position: relative;
    padding: 60px 0 60px 0;
    background: url(shad2.png) no-repeat;
    -webkit-background-size: 50% 100%;
}

ul li {
    list-style: none;
}

li {
    margin: 5px 0 0 0;
}

ul#expList li a {
    -webkit-transition: all 0.3s ease-out;
    background: #cbcbcb url(border.png) no-repeat;
    color: #174867;
    padding: 7px 15px 7px 15px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    width: 100px;
    display: block;
    text-decoration: none;
    -webkit-box-shadow: 2px 2px 4px #888;
}

ul#expList li a:hover {
    background: #ebebeb url(border.png) no-repeat;
    color: #67a5cd;
    padding: 7px 15px 7px 30px;
}

HTMLコーディング

<ul id="expList">
    <li class="home"><a href="">Home</a></li>
    <li class="freebies">Product
        <ul>
            <li><a href="">List 1</a></li>
            <li><a href="">List 2</a></li>
            <li><a href="">List 3</a></li>
        </ul>
    </li>
    <li class="about"><a href="">Register</a></li>
    <li class="about"><a href="">About Us</a></li>
</ul>
4

1 に答える 1

1

あなたがスタイルを与えただけ<a></a>で<li></li>、サブメニューの親の場合、つまりタグでProductラップしていない場合は<a></a>、そうすることで問題が解決します

<ul id="expList">
    <li class="home"><a href="">Home</a></li>
    <li class="freebies"><a>Product</a>
        <ul>
            <li><a href="">List 1</a></li>
            <li><a href="">List 2</a></li>
            <li><a href="">List 3</a></li>
        </ul>
    </li>
    <li class="about"><a href="">Register</a></li>
    <li class="about"><a href="">About Us</a></li>
</ul>
于 2012-08-31T07:16:01.770 に答える