我的网站有一个dropdownmenu,我注意到只有单词本身是可点击的,而不是整个单词(链接)被放入。
我已经添加了display:block;到一个元素,但这似乎只是水平工作,仍然不是整个框。
希望你能帮助我!并提前谢谢你!
这是de css代码:
#dropdownmenu a {
color:inherit !important;
display:block;
text-decoration:none !important}
#dropdownmenu {
width:1050px;
background:#137cd7;
z-index:2;
position:relative }
#dropdownmenu ul {
text-align:left;
display:inline;
margin:0px;
padding:10px 4px 25px 0;
list-style:none }
#dropdownmenu ul li {
display:inline-block;
margin-right:10px;
position:relative;
padding:15px 15px 14px;
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;
color:#fff }
#dropdownmenu ul li:hover {
background-color:#ffffff;
color:#137cd7 }
@media screen and (-webkit-min-device-pixel-ratio:0)
#dropdownmenu ul li ul {
top:44px !important}
#dropdownmenu ul li ul {
padding:0px;
position:absolute;
top:47px;
left:0px;
width:170px;
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 }
#dropdownmenu ul li ul li {
background-color:#fff;
display:block;
color:#222;
border-left:1px solid #ccc;
border-right:1px solid #ccc;}
#dropdownmenu ul li ul li:hover {
color:#137cd7;
background:#222;
text-decoration:none !important }
#dropdownmenu ul li:hover ul {
display:block;
opacity:1;
visibility:visible;
border-bottom:1px solid #ccc; }
和HTML:
<div id="dropdownmenu">
<ul>
<li>
<a href="/">Home</a></li>
<li>
<a href="/">Menu 1</a>
<ul>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
</ul>
</li>
<li>
<a href="/">Menu 2</a>
<ul>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
</ul>
</li>
<li>
<a href="/contact">Contact</a>
<ul>
<li>
<a href="/contact"><img alt="" src="/files/19731/editor/images/support(1).JPG" style="width: 140px; height: 140px; border-width: 0px; border-style: solid;" /></a></li>
<li>
</li>
</ul>
</li>
</ul>
谢谢大家!
谢谢你的回答!这对我帮助很大!现在一切都很好!
答案 0 :(得分:7)
在下图中,您可以看到您的下拉式锚点为蓝色,而您的li填充为绿色。 当您单击绿色区域时,浏览器将不会跟随锚点,这是正常行为。
要更正此问题,请删除li padding,然后将其应用于锚点。由于锚是内联元素,因此您必须将它们显示为块以应用填充。
#dropdownmenu a {
padding:15px 15px 14px;
display: block;
}
我也做了一些CSS改进,你可以查看updated Fiddle