CSS菜单赢得'；单击后无法保持活动状态_Css_Menu

CSS菜单赢得'；单击后无法保持活动状态

css menu

CSS菜单赢得'；单击后无法保持活动状态,css,menu,Css,Menu,我找到了一个不错的下拉菜单，并将其设计成我需要的样式。现在我只需要补充一件事。单击顶部链接后，子菜单应保持活动状态，且不会消失 #菜单{ 字体系列：日内瓦，Arial，Helvetica，无衬线；位置：绝对位置；顶部：100px；宽度：1100px；高度：70像素；背景色：#484441；颜色：#8C8985；字体大小：粗体；明确：两者皆有；文本对齐：居中；垂直对齐：中间对齐；线高：70px； } /*液滴菜单开始*/ ul#nav{ 浮动：左；宽度：1100px；

我找到了一个不错的下拉菜单，并将其设计成我需要的样式。现在我只需要补充一件事。单击顶部链接后，子菜单应保持活动状态，且不会消失


#菜单{
字体系列：日内瓦，Arial，Helvetica，无衬线；
位置：绝对位置；
顶部：100px；
宽度：1100px；
高度：70像素；
背景色：#484441；
颜色：#8C8985；
字体大小：粗体；
明确：两者皆有；
文本对齐：居中；
垂直对齐：中间对齐；
线高：70px；
}
/*液滴菜单开始*/
ul#nav{
浮动：左；
宽度：1100px；
保证金：0；
填充：0；
列表样式：无；
背景：#484441 url（../img/menu parent.png）repeat-x；
-moz边框半径右上角：10px；
-webkit边框右上角半径：10px；
-左上角moz边界半径：10px；
-webkit边框左上半径：10px；
}
ul#nav li{
显示：内联；
}
/*DROPLINE菜单级别1*/
ul#nav li a{
浮动：左；
字体：.7em arial、verdana、tahoma、无衬线字体；
线高：70px；
颜色：#fff；
文字装饰：无；
文本阴影：1px 1px 1px#8C8985；
保证金：0；
填充：0 30px；
背景：#484441 url（img/mainarrow.png）无重复；
-moz边界半径右上角：40px；
-webkit边框右上角半径：40px；
-左上角moz边界半径：40px；
-webkit边框左上半径：40px；
边框左上半径：40px；/*IE固定*/
边框右上半径：40px；/*IE固定*/
}
/*应用活动状态*/
ul#nav.当前a，ul#nav li:悬停>a{
颜色：#EAF4EF；
文字装饰：无；
文本阴影：1px 1px 1px#330000；
背景：33万；
-moz边界半径右上角：40px；
-webkit边框右上角半径：40px；
-左上角moz边界半径：40px；
-webkit边框左上半径：40px；
边框右下半径：40px；/*IE固定*/
边框左下半径：40px；/*IE固定*/
背景：#6D6967 url（'img/arrowup.png'）不重复；
}
/*默认情况下隐藏子菜单列表*/
ul#nav ul{
显示：无；
}
/*当第一级菜单项悬停时，将显示子菜单*/
ul#nav li:悬停>ul{
位置：绝对位置；
显示：块；
宽度：1060px；
高度：25px；
位置：绝对位置；
利润率：70像素0；
背景：#EAF4EF/*url（img/subrrow.png）*/无重复；
边框右下半径：0px；/*IE固定*/
边框左下半径：0px；/*IE固定*/
-moz边框半径右下角：0px；
-webkit边框右下半径：0px；
-moz边框半径左下角：0px；
-webkit边框左下半径：0px；
z指数：999；
}
ul#nav li:悬停>ul li a{
浮动：左；
字体：.7em arial、verdana、tahoma、无衬线字体；
线高：25px；
颜色：#525453；
文字装饰：无；
/*文本阴影：1px 1px 1px#110000*/
边际：0px；
填充：0px28px0px0px；
背景：#EAF4EF/*url（../img/menu child.png）repeat-x*/；
}
ul#nav li:hover>ul li a:hover{
颜色：#979898；
文字装饰：无；
文本阴影：无；
}
/*液滴菜单结束*/

我试图玩主动伪类，但仍然没有成功。。。有人有主意了吗？

如果没有一点JavaScript，我认为这是不可能的。我只想在单击菜单项时添加一个相应的类，然后在CSS中使用该类。

但它保持活动状态，不会消失。为此，您需要一些JS。@E L子菜单消失。我对JS不太在行……您有sg吗。可用于may case？@larson不，不可以。既不单击主菜单也不单击子菜单（opera）。upd：只有在

mouseout

<!DOCTYPE>
<html>
<head>

<style>
#menu{
    font-family: Geneva, Arial, Helvetica, sans-serif;
    position: absolute;
    top:100px;
    width: 1100px;
    height: 70px;
    background-color: #484441;
    color: #8C8985;
    font-weight: bold;
    clear: both;
    text-align: center;
    vertical-align: middle;
    line-height: 70px;
}


/* DROPLINE MENU START*/

ul#nav {
  float: left;
  width: 1100px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #484441 url(../img/menu-parent.png) repeat-x;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px; 

}

ul#nav li {
  display: inline;
}
 /* DROPLINE MENU Level 1*/
ul#nav li a {
  float: left;
  font: .7em arial,verdana,tahoma,sans-serif;
  line-height: 70px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #8C8985;
  margin: 0;
  padding: 0 30px;
  background: #484441 url(img/mainarrow.png) no-repeat;
  -moz-border-radius-topright: 40px;
  -webkit-border-top-right-radius: 40px;
  -moz-border-radius-topleft: 40px;
  -webkit-border-top-left-radius: 40px; 
  border-top-left-radius: 40px; /*IE fix*/
  border-top-right-radius: 40px; /*IE fix*/
}

/* APPLIES THE ACTIVE STATE */
ul#nav .current a, ul#nav li:hover > a  {
  color: #EAF4EF;
  text-decoration: none;
  text-shadow: 1px 1px 1px #330000;
   background: #330000;
  -moz-border-radius-topright: 40px;
  -webkit-border-top-right-radius: 40px;
  -moz-border-radius-topleft: 40px;
  -webkit-border-top-left-radius: 40px;
  border-bottom-right-radius: 40px; /*IE fix*/
  border-bottom-left-radius: 40px; /*IE fix*/
  background: #6D6967 url('img/arrowup.png') no-repeat;
}


/* THE SUBMENU LIST HIDDEN BY DEFAULT */
ul#nav  ul {
  display: none;
}

/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
ul#nav li:hover > ul {
  position: absolute;
  display: block;
  width: 1060px;
  height: 25px;
  position: absolute;
  margin: 70px 0 0 0;
  background: #EAF4EF /*url(img/subarrow.png)*/ no-repeat;
  border-bottom-right-radius: 0px; /*IE fix*/
  border-bottom-left-radius: 0px; /*IE fix*/
  -moz-border-radius-bottomright: 0px;
  -webkit-border-bottom-right-radius: 0px;
  -moz-border-radius-bottomleft: 0px;
  -webkit-border-bottom-left-radius: 0px;
  z-index: 999;
}

ul#nav li:hover > ul li a {
  float: left;
  font:  .7em arial,verdana,tahoma,sans-serif;
  line-height: 25px;
  color: #525453;
  text-decoration: none;
/*  text-shadow: 1px 1px 1px #110000;*/
  margin: 0px;
  padding: 0px 28px 0px 0px;
  background: #EAF4EF /*url(../img/menu-child.png) repeat-x*/;
}

ul#nav li:hover > ul li a:hover {
  color: #979898;
  text-decoration: none;
  text-shadow: none;
}


/* DROPLINE MENU End*/

</style>



</head>
<body>
<div id="menu">
<ul id="nav">
<li><a href="#">TopLink1</a>
 <ul>
 <li><a href="#">Sublink</a></li>
 <li><a href="#">Sublink</a></li>

 </ul>
</li>

<li><a href="#">TopLink2</a>
 <ul>
 <li><a href="#">Sublink</a></li>
 <li><a href="#">Sublink</a></li>

 </ul>
</li>

<li><a href="#">TopLink3</a>
 <ul>
 <li><a href="#">Sublink</a></li>
 <li><a href="#">Sublink</a></li>

 </ul>
</li>

<li><a href="#">TopLink</a>
 <ul>
 <li><a href="#">Sublink</a></li>
 <li><a href="#">Sublink</a></li>
 <li><a href="#">Sublink</a></li>
 <li><a href="#">Sublink</a></li>
 </ul>
</li>

<li><a href="#">TopLink</a>
 <ul>
 <li><a href="#">Sublink</a></li>
 <li><a href="#">Sublink</a></li>
 <li><a href="#">Sublink</a></li>
 <li><a href="#">Sublink</a></li>
 <li><a href="#">Sublink</a></li>
 </ul>
</li>

<li><a href="#">TopLink</a>
 <ul>
 <li><a href="#">Sublink</a></li>
 <li><a href="#">Sublink</a></li>

 </ul>
</li>
<li><a href="#">TopLink</a>
 <ul>
 <li><a href="#">Sublink</a></li>
 <li><a href="#">Sublink</a></li>
 <li><a href="#">Sublink</a></li>
 </ul>
</li>
</ul>


                        </div><!-- menu -->



</body>
</html>