惱人的空白在CSS橫向菜單

Question

我需要你的幫助，

我似乎無法弄清楚，爲什麼會有我的下拉菜單中的空間，有一些白色的頂部，爲此，我已經使用MS油漆指示紅本空白在我的例子：

預期結果如下：

這裏是一個JSFiddle。

這是我的HTML和CSS標記：

<ul id="mbtopmenuebul_table" class="mbtopmenuebul_menulist css_menu"> 
    <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient20"><a>File</a></div> 
    <ul class="gradient_menu gradient83"> 
    <li class="gradient_menuitem gradient23"><a title="">Save</a></li> 
    <li class="gradient_menuitem gradient23"><a title="">Print</a></li> 
    <li class="gradient_menuitem gradient23 last_item"><a title="">Close</a></li> 
    </ul></li> 
    <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient20"><a>Edit</a></div> 
    <ul class="gradient_menu gradient83"> 
    <li class="gradient_menuitem gradient23"><a title="">Add new</a></li> 
    <li class="gradient_menuitem gradient23"><a title="">Delete</a></li> 
    <li class="gradient_menuitem gradient23 last_item"><a title="">Clear all</a></li> 
    </ul></li> 
    <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient20"><a>View</a></div> 
    <ul class="gradient_menu gradient109"> 
    <li class="gradient_menuitem gradient23"><a title="">Next ></a></li> 
    <li class="gradient_menuitem gradient23"><a title="">< Prev</a></li> 
    <li class="gradient_menuitem gradient23"><a title=""><< First</a></li> 
    <li class="gradient_menuitem gradient23 last_item"><a title="">Last >></a></li> 
    </ul></li> 
    <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient20"><a>Actions</a></div> 
    <ul class="gradient_menu gradient109"> 
    <li class="gradient_menuitem gradient23"><a class="with_arrow" title="">Export</a> 
    <ul class="gradient_menu gradient57"> 
    <li class="gradient_menuitem gradient23"><a title="">Excel</a></li> 
    <li class="gradient_menuitem gradient23 last_item"><a title="">HTML</a></li> 
    </ul></li> 
    <li class="gradient_menuitem gradient23"><a class="with_arrow" title="">Reports</a> 
    <ul class="gradient_menu gradient57"> 
    <li class="gradient_menuitem gradient23"><a title="">Metrics</a></li> 
    <li class="gradient_menuitem gradient23 last_item"><a title="">Item</a></li> 
    </ul></li> 
    <li class="gradient_menuitem gradient23"><a class="with_arrow" title="">E-mail</a> 
    <ul class="gradient_menu gradient31"> 
    <li class="gradient_menuitem gradient23 last_item"><a class="with_arrow" title="">Send</a> 
     <ul class="gradient_menu gradient57"> 
     <li class="gradient_menuitem gradient23"><a title="">Notification</a></li> 
     <li class="gradient_menuitem gradient23 last_item"><a title="">Reminder</a></li> 
     </ul></li> 
    </ul></li> 
    <li class="gradient_menuitem gradient23 last_item"><a class="with_arrow" title="">Create</a> 
    <ul class="gradient_menu gradient57"> 
    <li class="gradient_menuitem gradient23"><a title="">Coverpage</a></li> 
    <li class="gradient_menuitem gradient23"><a title="">DYMO label</a></li> 
    <li class="gradient_menuitem gradient23 last_item"><a title="">Approval sheet</a></li> 
    </ul></li> 
    </ul></li> 
    <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient20"><a>Help</a></div> 
    <ul class="gradient_menu gradient83"> 
    <li class="gradient_menuitem gradient23"><a title="">About IMTS</a></li> 
    <li class="gradient_menuitem gradient23"><a title="">Contact support</a></li> 
    <li class="gradient_menuitem gradient23 last_item"><a title="">Quick Reference</a></li> 
    </ul></li> 
    <li class="topitem"><div class="buttonbg gradient_button gradient21" style="width: 38px;height: 19px;"><a>Logoff</a></div></li> 
</ul> 

CSS

#mbtopmenuebul_table { 
    margin: 0px; 
    line-height: 0px; 
    font-size: 0px; 
    display: inline-block; 
    width: 100%; 
    padding: 2px; 
    border-left: none; 
    border-right: none; 
    border-top: 1px solid #B0B5BB; 
    border-bottom: 1px solid #B0B5BB; 

    background-color: transparent; 
    border-collapse: separate; 
    background-image: url('wrapper_bg.png'); 
    background-repeat: repeat-x; 
    background: -moz-linear-gradient(top, #EDF4FE 0%, #BFDAFC 100%); 
    background: -webkit-linear-gradient(top, #EDF4FE 0%, #BFDAFC 100%); 
    background: -ms-linear-gradient(top, #EDF4FE 0%, #BFDAFC 100%); 
    background: linear-gradient(top, #EDF4FE 0%, #BFDAFC 100%); 
} 
#mbtopmenuebul_table li a { 
    line-height: 15px; 
    font-size: 12px; 
    font-family: Arial,sans-serif; 
    text-decoration: none; 
    color: #333333; 
    font-style: normal; 
    font-weight: normal; 
    padding: 2px; 
    display: block; 
    cursor: pointer; 
    white-space: nowrap; 
} 

#mbtopmenuebul_table li div.buttonbg { 
    height: 18px; 
    width: 58px; 
    line-height: 0; 
    background-color: transparent; 
    border-style: solid; 
    border-color: transparent; 
    border-width: 1px; 
    border-radius: 0; 
    padding: 0; 
    box-shadow: none; 
    text-align: center; 
} 

#mbtopmenuebul_table li:hover div.buttonbg a, #mbtopmenuebul_table li.expanded a.topitem, #mbtopmenuebul_table li.active a.topitem, 
#mbtopmenuebul_table li.itemhot a.topitem, #mbtopmenuebul_table li a:hover { 
    color: #000; 
    text-decoration: none; 
} 


#mbtopmenuebul_table li.expanded div.buttonbg, #mbtopmenuebul_table li.active div.buttonbg, #mbtopmenuebul_table li.itemhot div.buttonbg, #mbtopmenuebul_table li:hover div.buttonbg { 
    background-color: transparent; 
    border-color: #7DA2CE; 
    color: blue; 
} 

#mbtopmenuebul_table ul li a { 
    color: #333333; 
    font-family: Arial,sans-serif; 
    font-size: 12px; 
    line-height: 15px; 
    font-style: normal; 
    font-weight: normal; 
    text-decoration: none; 
    display: block; 
    vertical-align: middle; 
    white-space: nowrap; 
} 

#mbtopmenuebul_table ul li:hover > a { 
    color: #000000; 
    font-family: Arial,sans-serif; 
    font-size: 12px; 
    font-style: normal; 
    font-weight: normal; 
    text-decoration: none; 
} 

#mbtopmenuebul_table ul li.subexpanded a.subexpanded, #mbtopmenuebul_table ul li.subitemhot a.subitemhot, #mbtopmenuebul_table ul li a:hover { 
    color: #000000; 
    font-family: Arial,sans-serif; 
    font-size: 12px; 
    font-style: normal; 
    font-weight: normal; 
    text-decoration: none; 
} 

#mbtopmenuebul_table ul li:hover, #mbtopmenuebul_table ul li.subexpanded, #mbtopmenuebul_table ul li.subitemhot { 
    border-color: #7DA2CE; 
    background-color: transparent; 
} 

#mbtopmenuebul_table ul { 
    margin: 0; 
    border-style: solid; 
    border-color: #B2B7BD; 
    border-width: 1px; 
    padding: 3px; 
    background: transparent; 
    font-size: 0; 
    border-radius: 0; 
} 

#mbtopmenuebul_table ul li a { 
    padding: 3px 11px 3px 9px; 
    text-align: left; 
} 

#mbtopmenuebul_table ul li.separator { 
    padding: 3px; 
    cursor: default; 
    background: none; 
    box-shadow: none; 
    border-width: 0; 
} 

#mbtopmenuebul_table ul li.separator div { 
    border-top: 1px solid #D6D9DC; 
    font-size: 0px; 
} 

#mbtopmenuebul_table ul li { 
    border-style: solid; 
    border-color: transparent; 
    border-width: 1px; 
    height: auto; 
    width: auto; 
    text-align: left; 
    line-height: 0; 
    font-size: 0; 
    cursor: pointer; 
    float: none; 
    border-radius: 0; 
    padding: 0; 
    box-shadow: none; 
    background-color: transparent; 
    margin: 0 0 3px 0; 
} 

#mbtopmenuebul_table ul li.last_item { 
    margin-bottom: 0; 
} 


#mbtopmenuebul_table .spaced_li { 
    margin: 0px 10px 0px 0px; 
} 

#mbtopmenuebul_table a img { 
    border: none; 
} 

#mbtopmenuebul_table li { 
    list-style: none; 
    float: left; 
} 

#mbtopmenuebul_table.css_menu li { 
    position: relative; 
} 

#mbtopmenuebul_table.css_menu ul li:hover > ul { 
    opacity: 1; 
} 

#mbtopmenuebul_table.css_menu li:hover > ul { 
    top: 100%; 
    left: 0; 
    right: auto; 
    opacity: 1; 
} 

#mbtopmenuebul_table.css_menu ul li:hover > ul { 
    top: -1px; 
    left: 100%; 
    right: auto; 
} 

#mbtopmenuebul_table ul { 
    position: absolute; 
    top:-99999px; 
    z-index: 4000; 
} 

#mbtopmenuebul_table ul ul { 
    position: absolute; 
    z-index: 5000; 
} 

#mbtopmenuebul_table li:hover div.gradient21, #mbtopmenuebul_table li.expanded div.gradient21, #mbtopmenuebul_table li.active div.gradient21, #mbtopmenuebul_table li.itemhot div.gradient21 { 
    background-image: url('buttonhot_bg1.png'); 
    background-repeat: repeat-x; 
    background-color: #BFDAFC; 
} 

#mbtopmenuebul_table li:hover div.gradient20, #mbtopmenuebul_table li.expanded div.gradient20, #mbtopmenuebul_table li.active div.gradient20, #mbtopmenuebul_table li.itemhot div.gradient20 { 
    background-image: url('buttonhot_bg.png'); 
    background-repeat: repeat-x; 
    background-color: #BFDAFC; 
} 

#mbtopmenuebul_table li:hover div.gradient_button, #mbtopmenuebul_table li.expanded div.gradient_button, #mbtopmenuebul_table li.active div.gradient_button, #mbtopmenuebul_table li.itemhot div.gradient_button { 
    background: -moz-linear-gradient(top, #EDF4FE 0%, #BFDAFC 100%); 
    background: -webkit-linear-gradient(top, #EDF4FE 0%, #BFDAFC 100%); 
    background: -ms-linear-gradient(top, #EDF4FE 0%, #BFDAFC 100%); 
    background: linear-gradient(top, #EDF4FE 0%, #BFDAFC 100%); 
} 

#mbtopmenuebul_table ul.gradient83 { 
    background-image: url('menu_bg.png'); 
    background-repeat: repeat-x; 
    background-color: #F0F5FB; 
} 

#mbtopmenuebul_table ul.gradient109 { 
    background-image: url('menu_bg1.png'); 
    background-repeat: repeat-x; 
    background-color: #F0F5FB; 
} 

#mbtopmenuebul_table ul.gradient57 { 
    background-image: url('menu_bg2.png'); 
    background-repeat: repeat-x; 
    background-color: #F0F5FB; 
} 

#mbtopmenuebul_table ul.gradient31 { 
    background-image: url('menu_bg3.png'); 
    background-repeat: repeat-x; 
    background-color: #F0F5FB; 
} 

#mbtopmenuebul_table ul li.gradient23:hover, #mbtopmenuebul_table ul li.gradient23.subexpanded, #mbtopmenuebul_table ul li.gradient23.subitemhot { 
    background-image: url('menuitemhot_bg.png'); 
    background-repeat: repeat-x; 
    background-color: #BFDAFC; 
} 
#mbtopmenuebul_table ul.gradient_menu { 
    background: -moz-linear-gradient(top, #FFFFFF 0%, #F0F5FB 100%); 
    background: -webkit-linear-gradient(top, #FFFFFF 0%, #F0F5FB 100%); 
    background: -ms-linear-gradient(top, #FFFFFF 0%, #F0F5FB 100%); 
    background: linear-gradient(top, #FFFFFF 0%, #F0F5FB 100%); 
} 
#mbtopmenuebul_table ul li.gradient_menuitem:hover, #mbtopmenuebul_table ul li.gradient_menuitem.subexpanded, #mbtopmenuebul_table ul li.gradient_menuitem.subitemhot { 
    background: -moz-linear-gradient(top, #EDF4FE 0%, #BFDAFC 100%); 
    background: -webkit-linear-gradient(top, #EDF4FE 0%, #BFDAFC 100%); 
    background: -ms-linear-gradient(top, #EDF4FE 0%, #BFDAFC 100%); 
    background: linear-gradient(top, #EDF4FE 0%, #BFDAFC 100%); 
} 

Answer 1

在#mbtopmenuebul_table ul改變這個padding: 3px;這個padding: 0px 3px;

演示：http://jsfiddle.net/qynC3/1/

Answer 2

問題是填充在你的#m btopmenuebul_table ul.gradient_menu：

#mbtopmenuebul_table ul.gradient_menu { 
    background: -moz-linear-gradient(top, #FFFFFF 0%, #F0F5FB 100%); 
    background: -webkit-linear-gradient(top, #FFFFFF 0%, #F0F5FB 100%); 
    background: -ms-linear-gradient(top, #FFFFFF 0%, #F0F5FB 100%); 
    background: linear-gradient(top, #FFFFFF 0%, #F0F5FB 100%); 
    padding: 0px; 
}