Question

我找到了一个不错的下线菜单，并按照我的需要进行了样式设置。现在我只需要添加1件事。点击顶部链接后，子菜单应保持活动状态，不会消失。

<!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>

我尝试使用主动伪类，但我仍然没有成功......有人有想法吗？

Answer 1

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

单击后，CSS菜单不会保持活动状态

1 个答案: