css - 使悬停保持悬停状态(已选择)CSS 2 列菜单

Question

大家好，我有时使用 li:hover 解决了这个问题，但这次我似乎无法实现。

我有一个带有横向下拉菜单的列菜单..但是当选择该父菜单的内部菜单时，主按钮失去了它的 HOVER 属性..

我的意思是，当您查看主按钮内的选项时，该主按钮必须保持选中的悬停属性。

Here is my code,或至少控制它的一部分..

CSS

#fullcoverin a {position:absolute; z-index:90000;}

#selintro {position:absolute;
width:100%;
z-index:91000; }

#stateCity{
 float:right ;height:auto; width:710px; border:1px solid #000; margin-top:0px;position:absolute;z-index:90000; padding:15px; padding-top:5px; padding-bottom:5px; padding-right:0px; background:url(../images/blanc50p.png); background-color:#FFF; margin-left:450px; left: 16px;
    }
#stateCity ul{list-style-type:none;}
#stateCity li{  line-height:1.5em;
  border-bottom:0px solid #ccc;
  float:left;
  display:inline;}

  #stateCity { display:none; }

#double li ul li {color:#000; width:100%;}
#stateCity li ul li{ float:left; color:#0d7ad7;}
#stateIN li ul li{ float:left; color:#0d7ad7; overflow:hidden; }

#stateIN { display:none; }

#stateIN li ul li a{color: #0d7ad7;
width: 160px;
display: block;
overflow: hidden;}
#stateIN ul li a {display: block; width:140px; padding-left:15px}
#stateIN ul li a:hover{ background-color:#CCC; background-image:url(../images/redarrow.png); background-repeat:no-repeat; background-position:4px 3px; padding-left:25px; }

#stateCity li ul li a{color:#0d7ad7;}

#double li  { width:50%;} <span class="code-comment">/* 2 col */</span>
#double li ul li { width:100%;} <span class="code-comment">/* 2 col */</span>


#stateCity ul li:hover{background:#CCC; width:inherit; cursor:pointer;}
#stateCity ul li ul{ float:left;list-style-type:none; display:none;position:absolute; margin-left:170px; margin-top:-25px;background-color:transparent;}
#stateCity ul li:hover > ul{ display:block; }

#stateIN{
 float:left; height:auto; width:720px; border:1px solid #4b4b4b; margin-top:190px; margin-left:-15px; z-index:90000; border-radius:0px;  background:url(../images/blanc50p.png); background-color:#fff; padding:0px;
    }

#stateINborder { border:10px solid #b5ddff; float:left;  padding:5px; padding-top:5px; padding-bottom:5px; padding-right:0px; } 

#stateIN ul{list-style-type:none; }

#tocenterr {margin:50px auto; width:710px; height:auto;}

#stateIN li{  line-height:1.5em;
  border-bottom:0px solid #ccc;
  float:left;
  display:inline;}  
#stateIN ul li { width:49%; padding-top:1px; padding-bottom:1px;}
#stateIN ul li:hover{ }
#stateIN ul li ul{ float:left;list-style-type:none; display:none;position:absolute; margin-left:160px; margin-top:-25px;background-color:transparent;}
#stateIN ul li:hover > ul{ display:block; }

#stateIN #menuline1 { width:7px; height:415px; background-image:url(../images/menline.jpg); position:absolute; float:left; margin-left:160px;} 
#stateIN #menuline2 { width:7px; height:415px; background-image:url(../images/menline.jpg); position:absolute; float:left; margin-left:335px;} 
#stateIN #menuline3 { width:7px; height:415px; background-image:url(../images/menline.jpg); position:absolute; float:left; margin-left:500px;} 

#stateCity #menuline1 { width:7px; height:385px; background-image:url(../images/menline.jpg); position:absolute; float:left; margin-left:160px;} 
#stateCity #menuline2 { width:7px; height:385px; background-image:url(../images/menline.jpg); position:absolute; float:left; margin-left:340px;} 
#stateCity #menuline3 { width:7px; height:385px; background-image:url(../images/menline.jpg); position:absolute; float:left; margin-left:510px;} 

#menuclosecity { float:right; position:absolute; right:5px; top:5px; z-index:10000;}

#menucloseIN { float: right;
position: absolute;
margin-left: 645px;
z-index: 10000;
width: 28px;
height: 28px;
display: block;}

#stateIN ul li ul.ulCityDNJalisco { margin-top:-75px;}
#stateIN ul li ul.ulCityDNMéxico { margin-top:-390px;}

#stateIN ul li ul.ulCityDNMéxico.M { margin-top:-335px;}

#stateIN ul li ul.ulCityDNVeracruz { margin-top:-370px;}

#stateIN ul li ul.ulCityDNZacatecas { margin-top:-50px;}

#stateIN ul li ul.ulCityDNHidalgo { margin-top:-75px;}

#stateIN ul li ul.ulCityDNTamaulipas { margin-top:-150px;}
#stateIN ul li ul.ulCityDNJalisco { margin-top:-200px;}

#stateIN ul li ul.ulCityDNDistrito { margin-top:-200px;}

#stateIN ul li ul.ulCityDNGuanajuato { margin-top:-225px;}

#stateIN ul li ul.ulCityDNMichoacán { margin-top:-200px;}

.cmpbut
{
    width: 193px;
    height: 40px;
    bottom: 0px;
    right: 0px;
}


.dv_over
{
     width: 1200px;
     height:29px;

     position:absolute;

     margin-top: 10px;
     margin-bottom: 15px;
     overflow: hidden;

     background: none repeat scroll 0 0 #F4F4F4;
     border: 1px solid #EAEAEA;
}
.dv_first_inner
{
     padding-left:0px;
     float: left;
     position: relative;
     left: 0px;
}


.dv_second_inner
{
    float:left; 
    margin-top:8px;
    width:1200px;
    position: relative;
    text-align:center;  
}

.sad_next {cursor: pointer;float: left;height: 29px;right: 0px;position: absolute; width: 28px;z-index: 1001;}
.sad_previous {cursor: pointer;float: left;height: 29px;left: 0px;position: absolute;width: 28px;z-index: 1001;}

.sad_next img,.sad_previous img {margin-left: 0px;margin-top: 0px;}


.ad_loading{position: absolute;left: 425px;}





.ct_dv_outer{width: 100%;float: left;padding-top: 5px;padding-bottom: 5px;margin-top: 5px;margin-bottom: 5px;}
.ct_dv_inner{width: 22%;float: left;margin-right: 5px;}

.ct_li{margin-left: 15px;}
.ct_dv_child_data{}

Answer 1

请检查一下

http://jsfiddle.net/hushme/QR8Gb/2/

你错过了

    #stateIN  ul  li:hover > a{
 background-color:#CCC; 
background-image:url(../images/redarrow.png); 
background-repeat:no-repeat; 
background-position:4px 3px; 
padding-left:25px; }