CSS二级菜单ul框内的颜色怎么设置

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

给文字加一个<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>
参考技术A

如果是背景颜色,background,

<ul class="a"></ul>
.a
background:red;

参考技术B <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>
参考技术C #menu li ul 参考技术D 设置li的背景颜色就可以了

原生js+css实现二级伸缩菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生js实现二级伸缩菜单</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul,li{
            list-style: none;
        }
        .closed{
            display: block;
            width: 200px;
            background-color: coral;
        }
        #manager ul li{
            width: 200px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
        }
       .hide{
            display: none;
        }
        .show{
            display: block;
        }
        .open{
            display: block;
            background-color: coral;
        }
        .hide{
            display: none;
        }
        #manager ul li.pro{
            border:1px solid #fff;
        }
        #manager ul li ul li{
            padding:3px 0;
            border: 0;
            color:lightgray;
            line-height: 20px;
            border-top:1px solid #fff;
            background-color: darkorchid;
        }
        #manager ul li ul li:hover{
            color: #fff;
        }
        #manager ul li ul li:last-child{
            border-bottom:1px solid #fff;
        }
    </style>
</head>
<body>


    <div id="manager">
        <ul class="tree">
            <li class="pro">
                <span class="open" onclick="toggleTable(this)">考勤管理</span>
                <ul class="show">
                    <li>日常考勤</li>
                    <li>请假申请</li>
                    <li>加班/出差</li>
                </ul>
            </li>
            <li class="pro">
                <span class="closed" onclick="toggleTable(this)">信息中心</span>
                <ul class="hide">
                    <li>通知公告</li>
                    <li>公司新闻</li>
                    <li>规章制度</li>
                </ul>
            </li>
            <li class="pro">
                <span class="closed" onclick="toggleTable(this)">协同办公</span>
                <ul class="hide">
                    <li>公文流转</li>
                    <li>文件中心</li>
                    <li>内部邮件</li>
                    <li>即时通讯</li>
                    <li>短信提醒</li>
                </ul>
            </li>
            <li class="pro">
                <span class="closed" onclick="toggleTable(this)">合同管理</span>
                <ul class="hide">
                    <li>内部合同</li>
                    <li>外部合同</li>
                    <li>到期合同</li>
                    <li>未签合同</li>
                    <li>保密合同</li>
                </ul>
            </li>
            <li class="pro">
                <span class="closed" onclick="toggleTable(this)">人事流程</span>
                <ul class="hide">
                    <li>人事入职</li>
                    <li>职工保险</li>
                    <li>职工升值</li>
                    <li>薪资计划</li>
                    <li>员工福利</li>
                </ul>
            </li>
            <li class="pro">
                <span class="closed" onclick="toggleTable(this)">客户管理</span>
                <ul class="hide">
                    <li>企业客户</li>
                    <li>一般客户</li>
                    <li>重要客户</li>
                    <li>小区客户</li>
                    <li>外地客户</li>
                </ul>
            </li>
        </ul>
    </div>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script>
        function toggleTable(span){
//            如果span的class为open
            if(span.className=="open"){
//                将span的class设为closed
                span.className="closed";
//                将span的下一个兄弟元素的class改为hide
                span.nextElementSibling.className="hide";
            }else{//否则
//                查找class为tree的元素下的一个class为open的span,保存在open中
                var open=document.querySelector("[class=tree] span[class=open]");
                if(open!=null){
//                    设置open的class为closed
                    open.className="closed";
//                    设置open的下一个兄弟元素的class为hide
                    open.nextElementSibling.className="hide";
                }
                span.className="open";
                span.nextElementSibling.className="show";
            }
        }
    </script>

</body>
</html>

 

以上是关于CSS二级菜单ul框内的颜色怎么设置的主要内容,如果未能解决你的问题,请参考以下文章

怎么设置ul?

用原生JS写关于鼠标移入移出ul的二级菜单问题,怎么都实现不了效果

如何设置Android Studio背景的颜色

各位大侠CSS中list-style-type属性前面小圆圈的颜色可以设置吗?系统默认是黑色的我想搞成红的应怎么设置

怎么调整xshell的文字大小和颜色

微信一级菜单二级菜单怎么设置