0

これは私のCSSルールです

<style type="text/css">
#navigation2 {

    font: 0.80em Arial, Helvetica, sans-serif;
    width:100%;
}

#navigation2 ul {
    margin:0; 
    padding:0;
    background-color:transparent;
}

#navigation2 li {
    list-style: none;
    background:#fff;
}

ul.top-category{
    display:none;   
}

ul.top-category li {
    border: #6092bc solid;
    border-width: 1px;
    margin-top:1px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#navigation2 a {
 color: #265d8c;
 cursor: pointer;
 display:block;                 
 text-decoration:none;
 margin-left:3%;
 margin-top:5%;
 margin-bottom:5%;
 width:100%;
}

#navigation2 li:hover {
 background: #ebf2f6;
 position: relative;
}

a.all-categories:hover ul.top-category{
     display:block;
}
</style>

これは私のhtmlです

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <a  href="#" class="all-categories" >  All Categories </a> 

                    <div id="navigation2">

                       <ul class="top-category">
                          <li><a href="#">Kategori1</a></li>
                          <li><a href="#">Kategori2</a></li>
                          <li><a href="#">Kategori3</a></li>
                          <li><a href="#">Kategori4</a></li>
                          <li><a href="#">Kategori5</a></li>
                       </ul>
                    </div> 
</body>
</html>

で完全に実行されるcssメニューがありますdisplay:block。リンクの上にマウスを置くとメニューが開きますが、反応がありません。不足しているものを説明していただけますか。アドバイスをありがとうございます。

4

1 に答える 1

1

これを試してくださいhttp://jsfiddle.net/yf4W8/4/

あなたの問題はこの行にあります

a.all-categories:hover ul.top-category{
     display:block;
}

これは、ULがリンク要素の子であることを意味しますが、そうではありません。

a.all-categories:hover + #navigation2 ul.top-category{
     display:block;
}

は、リンクの兄弟である+を選択するために使用されます。次に、の子であるため、を選択します。CSSセレクターについてさらに詳しく知りたい場合は、このリストを参照してください。#navigation2ul#navigation2

上記に一致するようにコードを変更することにより、サブメニューの親コンテナを選択し、ホバースタイルを正しく適用します

于 2012-08-26T19:35:29.247 に答える