邊框底部太寬

我的網站有這個dropdownmenu，我想在菜單中添加邊框底部，但邊框顯得太寬。我檢查了每一步：Border too wide because of margin，因爲它似乎是同樣的問題，但沒有任何工作。邊框底部太寬

希望你能幫助我！

enter image description here

這裏的德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> 
       &nbsp;</li> 
     </ul> 
    </li> 
</ul>

fiddle here

謝謝大家！

我加入這個代碼，工作對我來說： #dropdownmenu UL李UL李{保證金右：0;}

這一個工作，以及： 1）從#dropdownmenu UL李UL邊界li {border-left：0; border-right：0}並將邊框添加到#dropdownmenu ul li：hover ul {border：1px solid #ccc;邊框頂部：0;}

來源

2014-06-05 user3032401

你想要那樣的東西http://jsfiddle.net/ZvRER/1/？ –

它的原因是：

#dropdownmenu ul li { 
    margin-right:10px; 
}

即保證金導致您的下拉菜單中比它應該拓展更寬。嘗試添加：

#dropdownmenu ul li ul li { 
    margin-right: 0; 
}

Fiddle

來源

2014-06-05 20:17:54

如果這些10px的邊距對設置很重要，不管怎樣，它們都可以被移除並且被添加到填充右邊。 http://jsfiddle.net/VLRUL/3/沒用，但要說邊距增加寬度或保留一些可用空間可以從內部和外部元素設置 –

兩個解決方案，您可以採取

1）#dropdownmenu ul li ul li {border-left:0; border-right:0} 刪除邊框，並添加邊框的#dropdownmenu ul li:hover ul {border:1px solid #ccc; border-top:0;}

2）添加邊框底部的#dropdownmenu ul li ul li #dropdownmenu ul li ul li:last {border-bottom: 1px solid #ccc;}的最後一個元素如果瀏覽器支持不是問題

來源

2014-06-05 20:21:51

Fiddle

刪除邊境從這裏

#dropdownmenu ul li:hover ul

風格，在這裏添加

#dropdownmenu ul li ul li:last-child { 
    border-bottom:1px solid #ccc; 
}

CSS選擇器:last-child瀏覽器支持stat's here

來源

2014-06-05 20:22:21 Bhavik

邊框底部太寬

回答

相關問題