我的站点有这个下拉菜单,我想将 border-bottom 添加到菜单,但边框看起来太宽了。 我检查了 Border too wide because of margin 的每一步,因为它似乎是同样的问题,但没有任何效果。
希望你能帮帮我!!
这是de css代码:
#dropdownmenu a {
color:inherit !important;
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:#fff;
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>
谢谢大家!
我添加了这段对我有用的代码: #dropdownmenu ul li ul li { margin-right: 0;}
这个也很管用: 1) 从#dropdownmenu ul li ul li {border-left:0; 移除边框border-right:0} 并添加边框到#dropdownmenu ul li:hover ul {border:1px solid #ccc;边框顶部:0;}
最佳答案
原因是:
#dropdownmenu ul li {
margin-right:10px;
}
该边距导致您的下拉菜单扩展得比应有的宽。尝试添加:
#dropdownmenu ul li ul li {
margin-right: 0;
}
关于html - 边框底部太宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24069367/