1

サイドメニューを作成することができ、メニュー項目にカーソルを合わせるとサブメニューが表示されます。今、私は 2 つの問題に直面しています。ホバー状態にする必要があります。2. サブメニュー ブロックが表示されると、透明に表示され、その背後にあるコンテンツを見ることができます。しかし、どうすれば完全に不透明にすることができますか?

私のコードは次のとおりです...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Drop Down Menus</title>

<style type="text/css">
<!-- * {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Trebuchet MS", Helvetica, Sans-Serif;
    font-size: 14px;
} -->

a {
    text-decoration: none;
    color: #FFFFFF;
}

a:hover {
    color: black;

}

#menu {
    position: relative;
    width:20%;
    height:400px;
    border:1px solid #000;
}

#menu a {
    display: block;
    width: 140px;
    background-image:url(menuitemhover.png);
}

#menu ul {
    list-style-type: none;
    padding-top: 5px;
}

#menu li {
    float: top;
    position: relative;
    padding: 3px 0;
    text-align: center;
}

#menu ul.sub-menu {
    display: none;
    position: absolute;
    top: -10px;
    left: 170px;
    padding: 10px;
    z-index: 90;
}

#menu ul.sub-menu li {
    text-align: top;
}

#menu li:hover > ul.sub-menu {
    display: block;
    border: 1px solid #ececec;
    background-image:url(menuitemhover.png);
}
</style>

</head>
<body>

<div id="menu">
    <ul>
        <li><a href="#">Home</a>

        <ul class="sub-menu" style="border:1px solid #d14836"}>
            <li><a href="#">Pages</a></li>
            <li><a href="#">Archives</a></li>
            <li><a href="#">New Posts</a></li>
            <li><a href="#">Recent Comments</a></li>
        </ul>

        </li>

        <li><a href="#">About</a>

        <ul class="sub-menu" style="border:1px solid #d14836">
            <li><a href="#">Get to know us</a></li>
            <li><a href="#">Find out what we do</a></li>
        </ul>

        </li>

        <li><a href="#">Contact</a>

        <ul class="sub-menu" style="border:1px solid #d14836">
            <li><a href="#">E-mail Us</a></li>
            <li><a href="#">Use Our Contact Form</a></li>
        </ul>

        </li>
    </ul>
</div>

</body>
</html>
4

1 に答える 1

2

私の理解が正しければ、#menu li:hover > ul.sub-menuと にも背景色を適用する必要があります#menu a。緑や赤など、非常に明白な色をテストに使用する方が簡単です。テストが完了したら、好きな色に置き換えるだけです

于 2013-03-11T06:48:24.263 に答える