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下拉菜单只能在文本上悬停

回答

相关问题