菜單項之間的差距很大。怎麼修？

Question

我遇到了我正在製作的網站的佈局問題。 我對CSS不太好。

所以我遇到的麻煩是我想有一個水平的菜單欄，我想在我的網站中心。這個菜單可以有下拉菜單。

實現在jQuery中。 所以這是我的菜單欄的HTML代碼：

<ul class='dropdown'> 
    <li><a href='index.php'>Home</a></li> 
    <li><a href='#'>Incident</a> 
     <ul class='sub_menu'> 
      <li><a href='index.php?action=new'>New</a></li> 
      <li><a href='index.php?action=edit'>Edit</a></li> 
      <li><a href='index.php?action=manage'>Manage</a></li> 
     </ul> 
    </li> 
    <li><a href='action_logout.php'>Log out</a></li> 
</ul> 

，這是正在實施的CSS：

*         { margin: 0; padding: 0; } 
body        { font: 14px Helvetica, Sans-Serif; margin: 15px; } 
a         { text-decoration: none; } 
ul         { width: 800px; list-style: none; text-align: center; margin: auto; padding: 2px 2px;} 
p         { margin: 15px 0; } 
/* 
    LEVEL ONE 
*/ 
ul.dropdown       { position: relative; } 
ul.dropdown li      { display: inline; font-weight: bold; background: #ccc; padding: 2px 2px; border-bottom: 1px solid #777; } 
ul.dropdown a:hover    { color: #000; } 
ul.dropdown a:active    { color: #ffa500; } 
ul.dropdown li a     { display: inline; padding: 2px 8px; border-right: 1px solid #777; border-bottom: 1px solid #777; 
            color: #222; } 
ul.dropdown li:last-child a   { border-right: none; } /* Doesn't work in IE */ 
ul.dropdown li.hover, 
ul.dropdown li:hover    { background: #F3D673; color: black; position: relative; } 
ul.dropdown li.hover a    { color: black; } 
/* 
    LEVEL TWO 
*/ 
ul.dropdown ul      { width: 175px; visibility: hidden; position: absolute; top: 100%; left: 0; text-align: left; } 
ul.dropdown ul li     { font-weight: normal; background: #f6f6f6; color: #000; 
            border-bottom: 1px solid #ccc; float: none; } 
           /* IE 6 & 7 Needs Inline Block */ 
ul.dropdown ul li a     { border-right: none; width: 100%; display: inline-block; } 

An Example can be seen here.

我沒有管理中心我的菜單酒吧畢竟。然而，Home和Incident菜單之間似乎有一點差距，我不知道如何擺脫它。

任何想法？ 預先感謝您。

Answer 1

如何：http://dabblet.com/gist/2520870

你的代碼是一個爛攤子。

<style> 
    * { 
     padding: 0; 
     margin: 0; 
    } 

    body { 
     font-family: helvetica, serif; 
     font-size: 14px; 
    } 

    ul { 
     list-style-type: none; 
    } 

    .dropdown { 
     text-align: center; 
     font-size: 0; 
     margin:  15px; 
    } 

    ul.dropdown ul { 
     width:  220px; 
     visibility: hidden; 
     position: absolute; 
     top: 1.8em; 
     left: 0; 
    } 

    ul.dropdown ul li a { 
     font-weight: normal; 
     background: #f6f6f6; 
     color:   #000; 
     border-bottom: 1px solid #ccc; 
     float:   none; 
    } 

    .dropdown > li { 
     display: inline-block; 
     height: 1.2em; 
     font-size: 14px; 
     position: relative; 
    } 

    .dropdown li a { 
     display:   block; 
     background:  rgb(204, 204, 204); 
     border-bottom: rgb(119, 119, 119) 1px solid; 
     border-right: rgb(119, 119, 119) 1px solid; 
     padding: 0.3em; 
     color:   rgb(0, 0, 0); 
     text-decoration: none; 
     font-weight:  bold; 
    } 

    .dropdown li a:hover { 
     background: rgb(243, 214, 115); 
    } 
</style> 

<ul class='dropdown'> 
    <li><a href='index.php'>Home</a></li> 
    <li><a href='#'>Incident</a> 
     <ul class='sub_menu'> 
      <li><a href='index.php?action=new'>New</a></li> 
      <li><a href='index.php?action=edit'>Edit</a></li> 
      <li><a href='index.php?action=manage'>Manage</a></li> 
     </ul> 
    </li> 
    <li><a href='action_logout.php'>Log out</a></li> 
</ul> 

試試這個新的代碼。儘管我敦促你不要先嚐試和實現別人的代碼！

Answer 2

不知怎的，你設法把空格之外<li>元素，這裏絕對是相同的代碼與空白刪除： http://jsfiddle.net/fPAFs/1/