Question

我有一个如下所示的顶级菜单： enter image description here

但是当我选择家或任何其他项目时，我希望它突出显示。那就是当它处于活动状态时，我希望它的颜色与其他颜色不同。

我的菜单css如下：

#cssmenu_top{ height:37px; display:block; padding:0; margin: 0;  border:1px solid; border-radius:5px; } 
#cssmenu_top > ul {list-style:inside none; padding:0; margin:0;} 
#cssmenu_top > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} 
#cssmenu_top > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } 
#cssmenu_top > ul > li:first-child > a{border-radius:5px 0 0 5px;} 
#cssmenu_top > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } 
#cssmenu_top ul li.has-sub:hover > a:after{top:0; bottom:0;} 
#cssmenu_top > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } 
#cssmenu_top > ul > li.has-sub:hover > a:before{top:19px;} 
#cssmenu_top ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 
#cssmenu_top ul li.has-sub:hover > ul, #cssmenu_top ul li.has-sub:hover > div{display:block;} 
#cssmenu_top ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;} 
#cssmenu_top ul li > ul, #cssmenu_top ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; } 
#cssmenu_top ul li > ul{width:200px;} 
#cssmenu_top ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 
#cssmenu_top ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } 


#cssmenu_top, #cssmenu_top > ul > li > ul > li a:hover{ background:#333333; background:-moz-linear-gradient(top, #333333 0%, #222222 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222)); background:-webkit-linear-gradient(top, #333333 0%,#222222 100%); background:-o-linear-gradient(top, #333333 0%,#222222 100%); background:-ms-linear-gradient(top, #333333 0%,#222222 100%); background:linear-gradient(top, #333333 0%,#222222 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 ); } 
#cssmenu_top{border-color:#000;} 
#cssmenu_top > ul > li > a{border-right:1px solid #000; color:#fff;} 
#cssmenu_top > ul > li > a:after{border-color:#444;} 
#cssmenu_top > ul > li > a:hover{background:#111;}

我在页面上显示菜单的方式如下：

<div id="cssmenu_top">

        <ul>
            <li ><a href="index.php"><span style="text-color:#FF0000;">Home</span></a></li>

            <li class='has-sub'><a href="#"><span>Add New Question</span></a>
                <ul>
                    <li><a href="add_question.php?sub=bangla">Bangla</a></li>
                    <li><a href="add_question.php?sub=english">English</a></li>
                    <li><a href="add_question.php?sub=math">Math</a></li>
                    <li><a href="add_question.php?sub=generalscience">General Science</a></li>
                    <li><a href="add_question.php?sub=bangladeshaffairs">Bangladesh Affairs</a></li>
                    <li class='last'><a href="add_question.php?sub=internationalaffairs">International Affairs</a>

                    </li>
                </ul>

            </li>
</ul>
</div>

因此，为了突出显示（活动），我尝试在我的css中添加以下代码：

#cssmenu_top ul > li.active{
    background-color: #FF0000;
}

但它没有提供我想要的输出。

我该怎么做？请帮助。

Answer 1

如果您想要活动状态，则应使用li：active

#cssmenu_top ul > li:active{
    background-color: #FF0000;
}

Answer 2

使用css执行此操作的方法是，每个正文页面是否具有唯一的类/ ID

例如，如果您的主页和主页上有这样的内容

<body id="home_page">

然后，您可以执行此操作以使主页菜单项保持高亮

    #home_page .home_li { 
background-color: silver; 
}

您还需要为每个顶级菜单项提供自己的ID或类.home_li才能使其正常工作

然后你对其他只有不同类/ ids的页面做同样的事情

Answer 3

尝试：

#cssmenu_top ul > li:active{
    background-color: #FF0000;
}

Answer 4

请试试这个：

<!doctype html>



<meta charset='utf-8'>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">

   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="script.js"></script>
   <title>CSS</title>
</head>
<body>

<div id='css'>
<ul>
   <li class='active'><a href='#'>Home</a></li>
   <li><a href='#'>Products</a></li>
   <li><a href='#'>Company</a></li>
   <li><a href='#'>Contact</a></li>
</ul>
</div>

和CSS：

@import url（http://fonts.googleapis.com/css?family=Raleway）;

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu {
  width: auto;
  border-bottom: 3px solid #47c9af;
  font-family: Raleway, sans-serif;
  line-height: 1;
}
#cssmenu ul {
  background: #ffffff;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu.align-right > ul > li > a {
  margin-right: 0;
  margin-left: -4px;
}
#cssmenu > ul > li > a {
  z-index: 2;
  padding: 18px 25px 12px 25px;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  color: #444444;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  margin-right: -4px;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  color: #ffffff;
}
#cssmenu > ul > li > a:after {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 120%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  content: "";
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transform: perspective(5px) rotateX(2deg);
  -webkit-transform-origin: bottom;
  -moz-transform: perspective(5px) rotateX(2deg);
  -moz-transform-origin: bottom;
  transform: perspective(5px) rotateX(2deg);
  transform-origin: bottom;
}
#cssmenu > ul > li.active > a:after,
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li > a:hover:after {
  background: #47c9af;
}

如何突出显示css中的活动菜单

4 个答案: