ड्रॉपडाउन पर होवरिंग करते समय सक्रिय स्थिति में सूची आइटम कैसे रखें?

Question

मैं अपनी वेबसाइट पर एक ड्रॉपडाउन मेनू बना रहा हूं और एक चीज़ से सफलतापूर्वक कार्य को कम या कम कर चुका हूं।

ड्रॉपडाउन मेनू पर होवर करते समय, मुख्य मेनू लिंक की होवर स्थिति इस तथ्य के कारण गायब हो जाती है कि मैं अब इस पर होवर नहीं कर रहा हूं।

ड्रॉपडाउन आइटमों पर होवर करते समय मैं लिंक पर सक्रिय स्थिति स्टाइल कैसे रख सकता हूं?

मैंने कोड को http://cssdesk.com/PZBM2 पर कॉपी किया है यदि आप पहली सूची आइटम को होवर करते हैं तो आपको होवर स्टेटस दिखाई देगा और मैं ड्रॉपडाउन के बारे में बात कर रहा हूं।

यहाँ भी कोड है:

/*Main nav*/ 
.main_nav_container{ 
    margin-top:10px; 
    margin-bottom:10px; 
    display:block; 
    float:right; 
} 
ul.main_nav{ 
    margin:0; 
    padding:0; 
} 
ul.main_nav li{ 
    display:inline-block; 
    margin:0; 
    padding:0; 
} 
ul.main_nav li a{ 
    font-size:13px; 
    display:block; 
    font-weight:bold; 
    position:relative; 
    height:25px; 
    line-height:25px; 
    padding:0 13px; 
    text-decoration:none; 
    color:#1122cc; 
    border:1px solid transparent; 
} 
ul.main_nav li a:hover{ 
    text-decoration:underline !important; 
    border-top:solid 1px #ccc; 
    border-left:solid 1px #ccc; 
    border-right:solid 1px #ccc; 
} 
ul.main_nav li ul{ 
    display:none; 
    position:absolute; 
    background: #fff; 
    margin:0; 
    padding:0; 
    border:solid 1px #ccc; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -khtml-border-radius: 4px; 
    border-radius: 4px; 
} 
ul.main_nav li ul:hover #hover{ 
    border:#ccc 1px solid; 
} 
ul.main_nav li ul li{ 
    display:block; 
    margin:0; 
    padding:0; 
    text-align:left; 
} 
ul.main_nav li ul li a{ 
    font-weight:normal; 
} 
ul.main_nav li:hover ul{ 
    display:inline; 
} 

एचटीएमएल

<div class="main_nav_container"> 
    <ul class="main_nav"> 
     <li> 
      <a id="hover" href="#">For sale</a> 
      <ul> 
       <li><a href="#">Property for sale</a></li> 
       <li><a href="#">New homes for sale</a></li> 
       <li><a href="#">Find estate agents</a></li> 
      </ul> 
     </li> 
     <li><a href="#">To rent</a></li> 
     <li><a href="#">New homes</a></li> 
     <li><a href="#">House prices</a></li> 
     <li><a href="#">Blog</a></li> 
     <li><a href="#">Property advice</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</div> 

Answer 1

आप बदलना चाहिए

ul.main_nav li a:hover{ 
    text-decoration:underline !important; 
    border-top:solid 1px #ccc; 
    border-left:solid 1px #ccc; 
    border-right:solid 1px #ccc; 
} 

ul.main_nav li:hover{ 
    text-decoration:underline !important; 
    border-top:solid 1px #ccc; 
    border-left:solid 1px #ccc; 
    border-right:solid 1px #ccc; 
} 

साथ आपके सीएसएस में 0

। का आनंद लें! :)