2013-07-24 79 views
0

大家好,我有解决这个问题,有时会使用李:悬停但这次我似乎无法做到这一点..使悬停保持悬停(选择)CSS 2列菜单

我有一个与菜单栏一个横向下拉..但主要的按钮失去了HOVER属性时,该父菜单的内部菜单被选中..

我的意思是,当你在看一个主要按钮内的选项,这个主要按钮必须保持悬停属性选择。

Here is my code,或至少它是CONTROLL这部分..

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{} 
+0

不知道这是否会有所帮助,但也许你可以尝试类似的东西:http://stackoverflow.com/a/2290969/1599551 – Oberst

+0

我正在寻找一个CSS解决方案..但我会试一试 –

+0

我想你是。但我想我会联系,以防万一没人能提供帮助。 – Oberst

回答

2

请检查该

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; } 
+0

太棒了!真的,你不知道这是多么有用的想法..它只是语法!该死的 –

+0

im很高兴有什么对你有用的东西 – Hushme