[英]Hover not working on dropdown menu
我在此下拉菜單中遇到問題,當您單擊表單(鏈接)時會打開一個菜單,並且如果您移出表單(鏈接),則顏色會變為藍色,很難看到它
任何想法如何解決
演示: http : //jsfiddle.net/27Kgq/
HTML:
<nav id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" id="showHide" class="act">Forms</a>
<ul id="smenu">
<li><a href="#" >Car Form</a></li>
<li><a href="#">Job Fomr </a></li>
<li><a href="#" target="_blank">Test Form </a></li>
<li><a href="#">Forms </a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
CSS:
nav#menu
{
width:192px;
background:#FFF;
padding:0px;
margin:-7px 0px 0px 0px;
}
nav#menu a
{
color:#18819c;
text-decoration:none;
display:block;
height:100%;
margin: -10px 0px 0px -10px;
padding: 10px 0px 10px 10px;
}
nav#menu ul li
{
width: 192px;
margin: 5px 0px -8px -10px;
padding: 10px 0px 0px 10px;
border-bottom:2px solid #c9dce1;
}
nav#menu ul li:hover
{
background:#0f7691;
color:#FFF !important;
}
nav#menu ul li a:hover
{
color:#FFF;
}
#smenu {
display:none;
background:#FFF;
margin: 0px 0px 0px -10px;
padding: 0px 0px 0px 30px;
}
#smenu ul
{
margin:0;
}
#smenu ul li a:hover
{
background:#FFF;
}
JS:
$(document).ready(function(){
$('#showHide').click(function(){
$('#smenu').slideToggle('slow');
});
});
使用此選擇器nav#menu ul li:hover>a
在此處查看演示
http://jsfiddle.net/27Kgq/1/
你這樣做是錯的。 使您的HTML這樣
<nav id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" id="showHide" class="act">Forms</a></li>
<li id="smenu">
<ul>
<li><a href="#" >Car Form</a></li>
<li><a href="#">Job Fomr </a></li>
<li><a href="#" target="_blank">Test Form </a></li>
<li><a href="#">Forms </a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
將此添加到您的CSS
nav#menu ul li:hover>a
{
color:#FFF;
}
<li><a href="#" id="showHide" class="act">Forms</a>
您需要關閉'<li>'標簽。 始終與HTML或XML的開始標記同時創建結束標記。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.