使懸停保持懸停（選擇）CSS 2列菜單

大家好，我有解決這個問題，有時會使用李：懸停但這次我似乎無法做到這一點..使懸停保持懸停（選擇）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{}

來源

2013-07-24 Jules Martinez

不知道這是否會有所幫助，但也許你可以嘗試類似的東西：http://stackoverflow.com/a/2290969/1599551 – Oberst

我正在尋找一個CSS解決方案..但我會試一試 –

我想你是。但我想我會聯繫，以防萬一沒人能提供幫助。 – Oberst

請檢查該

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

來源

2013-07-24 02:29:09 Hushme

太棒了！真的，你不知道這是多麼有用的想法..它只是語法！該死的 –

im很高興有什麼對你有用的東西 – Hushme

使懸停保持懸停（選擇）CSS 2列菜單

回答

相關問題