Html 如何在css中突出显示活动菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20600194/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Highlight active menu in css
提问by user2958359
I have a top menu that looks like as below:
我有一个顶部菜单，如下所示：
But when I select the home or any other items I want it to be highlighted. That is when it is active I want it to have just a different color than the others.
但是当我选择房屋或任何其他项目时，我希望它突出显示。那是当它处于活动状态时，我希望它的颜色与其他颜色不同。
My menu css is as below:
我的菜单 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;}
And the way I am showing menu on my page is like as below:
我在页面上显示菜单的方式如下：
<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>
So for highlighting(active) I tried adding the following code in my css:
因此，为了突出显示（活动），我尝试在我的 css 中添加以下代码：
#cssmenu_top ul > li.active{
background-color: #FF0000;
}
But it is not giving the output I want.
但它没有给出我想要的输出。
How can I do that. Help please.
我怎样才能做到这一点。请帮忙。
回答by Pedro Moreira
If you want the active state, you should use li:active
如果你想要活动状态，你应该使用 li:active
#cssmenu_top ul > li:active{
background-color: #FF0000;
}
回答by CRABOLO
a way to do this with just css is if each body page has a unique class/id
只用 css 做到这一点的一种方法是，如果每个正文页面都有一个唯一的类/ID
for example if your on your home page and the home page has somehting like this
例如，如果您的主页和主页上有这样的内容
<body id="home_page">
You can then do this to make the home page menu item stay highighted
然后，您可以执行此操作以使主页菜单项保持突出显示
#home_page .home_li {
background-color: silver;
}
You would also need to give each top menu item it's own id or class like .home_li for this to work
您还需要为每个顶部菜单项提供它自己的 id 或类，如 .home_li 以使其工作
Then you do the same for the other pages just with different classes/ids
然后你对其他页面做同样的事情，只是用不同的类/ID
回答by McElie
Please Try This:
请试试这个：
<!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>
And CSS:
和 CSS：
@import url(http://fonts.googleapis.com/css?family=Raleway);
@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;
}
回答by huda
try:
尝试：
#cssmenu_top ul > li:active{
background-color: #FF0000;
}
