请教下css 下拉菜单的问题？
我想把这个下拉菜单栏，每个首菜单里的背景颜色不一样，要怎么改呢？<styletype="text/css">.menu{font-family:arial,sans-se...
我想把这个下拉菜单栏，每个首菜单里的背景颜色不一样，要怎么改呢？
<style type="text/css">
.menu {
font-family: arial, sans-serif;
width:750px;
margin:0;
margin:50px 0;
}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li {
float:left;
position:relative;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
width:104px;
height:30px;
color:#000;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c9c9a7;
line-height:30px;
font-size:11px;
}
.menu ul li ul {
display: none;
}
.menu ul li:hover a {
color:#fff;
background:#b3ab79;
}
.menu ul li:hover ul {
display:block;
position:absolute;
top:31px;
left:0;
width:105px;
}
.menu ul li:hover ul li a {
display:block;
background:#faeec7;
color:#000;
}
.menu ul li:hover ul li a:hover {
background:#dfc184;
color:#000;
}
</style>
<body>
<div class="menu">
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="index.html">MENUS</a>
<!--[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
<!-- clear the floats if required -->
<div class="clear"> </div>
</div>
谢谢各位，能再请教一个问题吗？就是能不能让这个下拉菜单停留久一点，就是指向他会停留一下，因为现在有时指向它时，鼠标还没往下拉，就消失了。 展开
<style type="text/css">
.menu {
font-family: arial, sans-serif;
width:750px;
margin:0;
margin:50px 0;
}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li {
float:left;
position:relative;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
width:104px;
height:30px;
color:#000;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c9c9a7;
line-height:30px;
font-size:11px;
}
.menu ul li ul {
display: none;
}
.menu ul li:hover a {
color:#fff;
background:#b3ab79;
}
.menu ul li:hover ul {
display:block;
position:absolute;
top:31px;
left:0;
width:105px;
}
.menu ul li:hover ul li a {
display:block;
background:#faeec7;
color:#000;
}
.menu ul li:hover ul li a:hover {
background:#dfc184;
color:#000;
}
</style>
<body>
<div class="menu">
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="index.html">MENUS</a>
<!--[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
<!-- clear the floats if required -->
<div class="clear"> </div>
</div>
谢谢各位，能再请教一个问题吗？就是能不能让这个下拉菜单停留久一点，就是指向他会停留一下，因为现在有时指向它时，鼠标还没往下拉，就消失了。 展开
6个回答
展开全部
我来总结下吧。
你想要的是背景颜色不一样还是鼠标放上去感应后背景颜色不一样。
其实很简单。
对a标签进行{display:block;}
然后分别定义样式
.color1{color:#000;}
.color2{color:#999;}
然后分别定义
.color1:hover{#f00;}
.color2:hover{#666;}
以此类推就可以了。
你想要的是背景颜色不一样还是鼠标放上去感应后背景颜色不一样。
其实很简单。
对a标签进行{display:block;}
然后分别定义样式
.color1{color:#000;}
.color2{color:#999;}
然后分别定义
.color1:hover{#f00;}
.color2:hover{#666;}
以此类推就可以了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
css定义每个大的菜单的背景色
.menu .nav1 {background:#ff0}
.menu .nav2 {background:#fcc}有多少个就设置多少个；下面是div标签部分
<li><a class="nav1" href="../menu/index.html">DEMOS</a>
<li><a class="nav2" href="index.html">MENUS</a>
nav*与上面一一对应就行了。
更多追问追答
追问
谢谢，能再请教一个问题吗？就是能不能让这个下拉菜单停留久一点，就是指向他会停留一下，因为现在有时指向它时，鼠标还没往下拉，就消失了。
追答
这个主要是焦点丢失的问题，建议你用js特效的菜单代码吧，去百度搜索相关代码就能找到很多。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
.menu .hide1 {background:#000000}你只要想添加背景的 a标签里加 class="hide1" 这样 就能改背景颜色了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
其实一般是用脚本控制，要嘛就用css3但是css3不是每一个浏览器都兼容，所以还是使用jquery简单方便，
function tio(){
$(div li a:odd(或者是even)).addClass("sel")
}
这里的sel是你单独添加的样式，希望能帮到你
function tio(){
$(div li a:odd(或者是even)).addClass("sel")
}
这里的sel是你单独添加的样式，希望能帮到你
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用JQ写一小段就可以完成
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
