3

我有一个创建菜单的任务。我想在选择其子项时将菜单设置为选中状态。我的css文件是

 #wrapper {
     width:100%;
     height:500px;
 }
 h2 {
     color:#787878;
 }
 #menu, #menu ul {
     list-style: none;
     //padding: 2px;
 }
 #nav{
     border-bottom: 1px solid #CCCCCC;
     border-spacing: 0;
     display: table;
     float: left;
     height: 25px;
     width: 100%;
 }
 #nav ul {
     margin: 0;
     padding: 0;
 }
 #nav > ul > li:hover {
     background: none repeat scroll 0 0 #FFFFFF;
     border-color: #ccc #ccc #FFFFFF;
     border-style: solid;
     border-width: 1px;
     padding-bottom: 0;
     border-radius:1px;
 }
 .menu-child {
     width:160px;
     display:block !important;

 }
 #nav ul li ul li:hover {
 }
 #nav ul li ul :hover { 
 }
 #menu {
     float: left;
     height: 25px;
 }
 #menu> li {
     float: left;
 }
 #menu li a {
     display: block;
     height: 2em;
     line-height: 2em;
     padding: 0 1.5em;
     text-decoration: none;
 }
 #menu ul {
     position: absolute;
     display: none;
     z-index: 999;
 }
 #menu ul li a { 
 }
 #menu li:hover ul {
     display: block;
 }
 #menu {
     font-family: Arial;
     font-size: 12px;
     //background: #F8F8F8;
 }
 #menu > li > a {
     font-family: Verdana, Arial, sans-serif;
     font-style: normal;
     color:#787878;
     font-weight: bold;
 }
 #menu > li > a:hover {
     color: #000;
 }
 #menu ul {
     background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 0 0 5px 5px;
    margin-top: 1px;
 }
 #menu ul li a {
     color: #000;
 }
 #menu ul li a:hover {
     background: #E0E0E0;
 }
 .logout {
     float:right;
     width:300px;
 }
 .title {
     float:left;
     width:300px;
 }
 #footer {
     width:100%;
     height:100px;
     float:left;
 }
 .subchild-list {
     margin:0;

     position: absolute !important;
     top:0;
     right:-87px;
     //border-color: #ccc #FFFFFF #ccc #FFFFFF;
 }
 .child-list ul {
     display: none !important;
     position: absolute !important;
     z-index: 999 !important;
 }
 .child-list li {
     position:relative !important;

 }
 .child-list li:hover ul {
     display: block !important;
 }

.child-list li{

    border-left:1px solid #C0C0C0; 
    border-right:1px solid #C0C0C0;
}

.child-list ul{
    border-top:1px solid #C0C0C0; 
    border-bottom:5px solid #C0C0C0; 
}

.child-list{
    border-bottom:5px solid #C0C0C0; 
}
.nav-subchild
{
    border-color: #ccc #FFFFFF #ccc #FFFFFF;
}
#nav > ul > li:hover {
 border-color: #ccc #ccc #FFFFFF;
 border-style: solid;
 border-width: 1px;
 padding-bottom: 0;
 border-radius:1px;
 }

#menu > li {
border-bottom:#ccc;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
}
#nav ul li:hover ul { margin-left:-1px; } #nav ul li ul:hover { margin-left:-1px; }
ul li ul li 
{
    width: 180px;
}
.subchild-list {
    margin:0;
    right:-183px;
    position: absolute !important;
    top:0;
}
.hassub {
    background: url('arrow.gif') right no-repeat;
}

我怎么解决这个问题？

4

2 回答 2

3

试试这个字体粗体：粗体；

于 2013-03-01T06:49:03.963 回答
0

如果我正确理解您的问题，您希望顶级导航即使在子级悬停时也具有活动状态。

在这种情况下，这是答案（附加到您的 CSS）：

#menu li:hover > a {
    color: #000;
}

jsfiddle：http: //jsfiddle.net/wDcV5/2/

于 2013-02-28T15:11:55.643 回答