css下拉菜單隻能在文本上懸停

使用我的css下拉菜單時，只有下拉文本處於活動狀態，這使得選擇更加困難，而不是易於使用的區域（尤其是使用移動設備）。css下拉菜單隻能在文本上懸停

CSS是：

#topMenu ul { 
    text-align: center; 
    display: inline; 
    margin: 0; 
    padding: 15px 20px 17px 20px; 
    list-style: none; 
} 
#topMenu ul li { 
    font: bold 12px sans-serif; 
    text-transform:uppercase; 
    color:#666; 
    display: inline-block; 
    margin-right: -4px; 
    position: relative; 
    padding: 10px 40px; 
    background: #EEE; 
    cursor: pointer; 
    -webkit-transition: all 0.2s; 
    -moz-transition: all 0.2s; 
    -ms-transition: all 0.2s; 
    -o-transition: all 0.2s; 
    transition: all 0.2s; 
} 
#topMenu ul li:hover { 
    background: #EEE; 
    color: #000; 
} 
#topMenu ul li ul { 
z-index: 5000; 
    padding: 0; 
    position: absolute; 
    top: 38px; 
    left: 0; 
    width: 150px; 
    display: none; 
    opacity: 0; 
    visibility: hidden; 
    -webkit-transiton: opacity 0.2s; 
    -moz-transition: opacity 0.2s; 
    -ms-transition: opacity 0.2s; 
    -o-transition: opacity 0.2s; 
    -transition: opacity 0.2s; 
} 
#topMenu ul li ul li { 
    background: #EEE; 
    display: block; 
    color: #000; 
    border:solid 1px #999999; 
} 
#topMenu ul li ul li:hover { background: #EEE; } 
#topMenu ul li:hover ul { 
    display: block; 

    opacity: 1; 
    visibility: visible; 
}

代碼可以是有點麻煩。

感謝

來源

2013-10-31 Feargal

你可以把你的html代碼呢？ – Romain

@Romain這是棘手的一點，你必須弄清楚自己:)開玩笑。在這裏OP使用這個網站http://jsfiddle.net在未來顯示你的代碼 – 2013-10-31 15:48:12

@htmltroll如果它最先發布在這裏，那麼它對遺留效果更好。 – Xareyo

您可以添加display:block;到您的錨標記CSS，使其填補li。

CSS：

#topMenu ul li ul a { 
    display: block; 
}

HTML：

<ul id="topMenu"> 
    <li> 
    <ul> 
     <li> 
     <a href="#">Link Text</a> 
     </li> 
     <!-- more submenu items --> 
    </ul> 
    </li> 
    <!-- more topMenu items --> 
</ul>

來源

2013-10-31 15:50:59

試試這個< --->而不是使用padding:10px 40px確定高度使用本：

line-height:30px <---- it replaces the padding top and bottom (20px) and add 10px of the font.

然後你的CSS可能是：

#topMenu ul li { 
font: bold 12px sans-serif; 
text-transform:uppercase; 
color:#666; 
display: inline-block; 
margin-right: -4px; 
position: relative; 
padding: 0px 40px; 
line-height:30px; 
background: #EEE; 
cursor: pointer; 
-webkit-transition: all 0.2s; 
-moz-transition: all 0.2s; 
-ms-transition: all 0.2s; 
-o-transition: all 0.2s; 
transition: all 0.2s; 
}

如果你有li然後使它塊和同一行高內a標籤：

#topmenu ul li a { 
    display:block; 
    line-height:30px; 
    height:30px; 
}

來源

2013-10-31 16:03:09 DaniP

css下拉菜單隻能在文本上懸停

回答

相關問題