1

次のナビゲーション バー メニューでは、すべての要素が青色で表示されています。sub1 と sub2 をオレンジ色で表示し、要素を青色で表示するにはどうすればよいですか?

<head>
<style type="text/css">
ul{
list-style-type:none;
margin:0;
padding:0;
background-color:#33CCFF;/*orange is not displaying*/
}
li{float:left;
display:block;
width:120px;
text-align:center;
padding:4px;
color:#FFFFFF;
background-color:;#FFCC33;}/*blue*/
</style>
</head>
<body>
<ul id="menu">
<li id="menu1">Sub 1
    <ul>
        <li>test 1</li>
        <li>test 2</li>
        <li>test 3</li>
        <li>test 4</li>
    </ul>
</li>
<li id="menu2">Sub 2
    <ul>
        <li>test 1</li>
        <li>test 2</li>
        <li>test 3</li>
        <li>test 4</li>
    </ul>
</li>
      </ul>     
      </body>
4

3 に答える 3

1 
<ul id="menu">
<li id="menu1"><span>Sub 1</span>
    <ul>
        <li>test 1</li>
        <li>test 2</li>
        <li>test 3</li>
        <li>test 4</li>
    </ul>
</li>
<li id="menu2"><span>Sub 2</span>
    <ul>
        <li>test 1</li>
        <li>test 2</li>
        <li>test 3</li>
        <li>test 4</li>
    </ul>
</li>
      </ul>

CSS

li{float:left;
  display:block;
  width:120px;
  text-align:center;
  padding:4px;
  color:#FFFFFF;
  background-color:;#FFCC33;}/*blue*/
}
#menu1 span,#menu2 span
{
color:orange;
}
于 2012-07-19T08:41:25.547 に答える
0

http://jsfiddle.net/HtMLY/

それをチェックしてくださいbそれはあなたがあなたの問題を解決することを願っている結果です

于 2012-07-19T09:24:48.480 に答える
-1

CSS セレクターを変更します。

これで試してください：

ul li{
list-style-type:none;
margin:0;
padding:0;
background-color:#FFCC33;/*orange is not displaying*/
}
ul li ul li{float:left;
display:block;
width:120px;
text-align:center;
padding:4px;
color:#FFFFFF;
background-color:#33CCFF;}/*blue*/

このように、必要なツリー レベルにどの CSS を適用する必要があるかを正確に定義します。レベルに関係なく、すべての ul とすべての li に同じスタイルを適用しているように。

于 2012-07-19T07:45:56.033 に答える