css:background-color for main menu sub1 and sub2 n

2019-08-03 04:58发布

站内问答 / HTML/CSS
974 3 4

In my following navigation bar menu, all elements are getting displayed in blue. How can I get sub1 and sub2 to display in orange and list elements in blue? 

<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>

3条回答
甜甜的少女心
2楼-- · 2019-08-03 05:40

http://jsfiddle.net/HtMLY/

check it out may b that's the result u want hope it solve your problem

查看更多
0人赞 添加讨论(0) 举报
我想做一个坏孩纸
3楼-- · 2019-08-03 05:41

Modify the CSS selectors.

Try with this ones:

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*/

Like this you will define exactly which CSS has to be applied to the tree level you want. Like you were applying the same style for all ul and for all li, independently of the level they are.

查看更多
0人赞 添加讨论(0) 举报
在下西门庆
4楼-- · 2019-08-03 05:51 
<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;
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)