CSS二级菜单ul框内的颜色怎么设置
我的代码在下面------------------------------------------------------------------------------...
我的代码在下面
---------------------------------------------------------------------------------
<head><meta http-equiv="Content-Type" content="text/html; charset=utf8" /><style type="text/css">body {font-size:12px;}a {color:#000; text-decoration:none;}a:hover {color:#F00;}/*主菜单伪类*/#menu {width:100px; border:1px solid #ccc;}#menu ul {list-style:none; margin:0px; padding:0px;}#menu ul li {background:#eee; padding:0px 10px; height:26px; line-height:26px;/*字体在上下边框的剧中位置*/ border-bottom:1px solid #ccc; position:relative;}#menu ul li ul {display:none;/*隐藏此UL*/ position:absolute; left:100px; top:0px; width:100px; border:1px solid #ccc; border-bottom:none; }#menu ul li:hover ul {display:block;}/*ul li下的ul显示*/</style></head><body><div id="menu"><ul><li><a href="@#">首页</a><li><a href="#">网页版式布局</a> <ul> <li><a href="#">自适应宽度</a></li> <li><a href="#">固定宽度</a></li> </ul></li><li><a href="#">div+css教程</a> <ul> <li><a href="#">新手入门</a></li> <li><a href="#">视频教程</a></li> <li><a href="#">常见问题</a></li> </ul></li><li><a href="#">div+css实例</a></li><li><a href="#">常用代码</a></li><li><a href="#">站长杂谈</a></li><li><a href="#">技术文档</a></li><li><a href="#">资源下载</a></li><li><a href="#">图片素材</a></li></ul><ul><li><a href="#">常用代码</a></li><li><a href="#">站长杂谈</a></li><li><a href="#">技术文档</a></li><li><a href="#">资源下载</a></li><li><a href="#">图片素材</a></li></ul></div></body></html> 展开
---------------------------------------------------------------------------------
<head><meta http-equiv="Content-Type" content="text/html; charset=utf8" /><style type="text/css">body {font-size:12px;}a {color:#000; text-decoration:none;}a:hover {color:#F00;}/*主菜单伪类*/#menu {width:100px; border:1px solid #ccc;}#menu ul {list-style:none; margin:0px; padding:0px;}#menu ul li {background:#eee; padding:0px 10px; height:26px; line-height:26px;/*字体在上下边框的剧中位置*/ border-bottom:1px solid #ccc; position:relative;}#menu ul li ul {display:none;/*隐藏此UL*/ position:absolute; left:100px; top:0px; width:100px; border:1px solid #ccc; border-bottom:none; }#menu ul li:hover ul {display:block;}/*ul li下的ul显示*/</style></head><body><div id="menu"><ul><li><a href="@#">首页</a><li><a href="#">网页版式布局</a> <ul> <li><a href="#">自适应宽度</a></li> <li><a href="#">固定宽度</a></li> </ul></li><li><a href="#">div+css教程</a> <ul> <li><a href="#">新手入门</a></li> <li><a href="#">视频教程</a></li> <li><a href="#">常见问题</a></li> </ul></li><li><a href="#">div+css实例</a></li><li><a href="#">常用代码</a></li><li><a href="#">站长杂谈</a></li><li><a href="#">技术文档</a></li><li><a href="#">资源下载</a></li><li><a href="#">图片素材</a></li></ul><ul><li><a href="#">常用代码</a></li><li><a href="#">站长杂谈</a></li><li><a href="#">技术文档</a></li><li><a href="#">资源下载</a></li><li><a href="#">图片素材</a></li></ul></div></body></html> 展开
6个回答
展开全部
给文字加一个<b>标签,然后设置<b>标签的样式就可以了,如果换成<p>标签,显示会出一点小问题
代码如下:
---------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<style type="text/css">
body {font-size:12px;}
a {color:#000; text-decoration:none;}
a:hover {color:#F00;}/*主菜单伪类*/
#menu {width:100px; border:1px solid #ccc;}
#menu ul {list-style:none; margin:0px; padding:0px;}
#menu ul li {background:#eee; padding: 0px; height:26px; line-height:26px;/*字体在上下边框的剧中位置*/ border-bottom:1px solid #ccc; position:relative;}
#menu ul li ul {display:none;/*隐藏此UL*/ position:absolute; left:100px; top:0px; width:100px; border:1px solid #ccc; border-bottom:none; }
#menu ul li:hover ul {display:block;}/*ul li下的ul显示*/
/*修改了这里*****************************************/
#menu ul li ul b{ color: #FF0000}
/*修改了这里*****************************************/
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="@#">首页</a>
<li><a href="#">网页版式布局</a>
<ul>
<li><a href="#"><b >自适应宽度</b></a></li>
<li><a href="#">固定宽度</a></li>
</ul>
</li>
<li><a href="#">div+css教程</a>
<ul>
<li><a href="#">新手入门</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</li>
<li><a href="#">div+css实例</a></li>
<li><a href="#">常用代码</a></li>
<li><a href="#">站长杂谈</a></li>
<li><a href="#">技术文档</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">图片素材</a></li>
<li><a href="#">常用代码</a></li>
<li><a href="#">站长杂谈</a></li>
<li><a href="#">技术文档</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">图片素材</a></li>
</ul>
</div>
</body>
</html>
代码如下:
---------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<style type="text/css">
body {font-size:12px;}
a {color:#000; text-decoration:none;}
a:hover {color:#F00;}/*主菜单伪类*/
#menu {width:100px; border:1px solid #ccc;}
#menu ul {list-style:none; margin:0px; padding:0px;}
#menu ul li {background:#eee; padding: 0px; height:26px; line-height:26px;/*字体在上下边框的剧中位置*/ border-bottom:1px solid #ccc; position:relative;}
#menu ul li ul {display:none;/*隐藏此UL*/ position:absolute; left:100px; top:0px; width:100px; border:1px solid #ccc; border-bottom:none; }
#menu ul li:hover ul {display:block;}/*ul li下的ul显示*/
/*修改了这里*****************************************/
#menu ul li ul b{ color: #FF0000}
/*修改了这里*****************************************/
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="@#">首页</a>
<li><a href="#">网页版式布局</a>
<ul>
<li><a href="#"><b >自适应宽度</b></a></li>
<li><a href="#">固定宽度</a></li>
</ul>
</li>
<li><a href="#">div+css教程</a>
<ul>
<li><a href="#">新手入门</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</li>
<li><a href="#">div+css实例</a></li>
<li><a href="#">常用代码</a></li>
<li><a href="#">站长杂谈</a></li>
<li><a href="#">技术文档</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">图片素材</a></li>
<li><a href="#">常用代码</a></li>
<li><a href="#">站长杂谈</a></li>
<li><a href="#">技术文档</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">图片素材</a></li>
</ul>
</div>
</body>
</html>
展开全部
如果是背景颜色,background,
<ul class="a"></ul>
.a{
background:red;
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2023-01-13 · 百度认证:云南新华电脑职业培训学校官方账号
云南新华电脑学校
云南新华电脑学校是经云南省教育厅批准成立的省(部)级重点计算机专业学校,采用三元化管理模式,教学设备先进,师资雄厚学生毕业即就业,学院引进了电商企业入驻,创建心为电商创业园区,实现在校即创业
向TA提问
关注
展开全部
<ul>
<li><a href="@#">首页</a>
<li><a href="#">网页版式布局</a>
<ul>
<li><a href="#">自适应宽度</a></li>
<li><a href="#">固定宽度</a></li>
</ul>
</li>
<li><a href="#">div+css教程</a>
<ul>
<li><a href="#">新手入门</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</li>
<li><a href="#">div+css实例</a></li>
<li><a href="#">常用代码</a></li>
<li><a href="#">站长杂谈</a></li>
<li><a href="#">技术文档</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">图片素材</a></li>
</ul>
<ul>
<li><a href="#">常用代码</a></li>
<li><a href="#">站长杂谈</a></li>
<li><a href="#">技术文档</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">图片素材</a></li>
</ul>
</div>
</body>
</html>
<li><a href="@#">首页</a>
<li><a href="#">网页版式布局</a>
<ul>
<li><a href="#">自适应宽度</a></li>
<li><a href="#">固定宽度</a></li>
</ul>
</li>
<li><a href="#">div+css教程</a>
<ul>
<li><a href="#">新手入门</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</li>
<li><a href="#">div+css实例</a></li>
<li><a href="#">常用代码</a></li>
<li><a href="#">站长杂谈</a></li>
<li><a href="#">技术文档</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">图片素材</a></li>
</ul>
<ul>
<li><a href="#">常用代码</a></li>
<li><a href="#">站长杂谈</a></li>
<li><a href="#">技术文档</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">图片素材</a></li>
</ul>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2015-01-24
展开全部
#menu li ul
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询