CSS導航下拉菜單 - 不想寬度設置

Question

我有這樣的HTML：

<div id="wrap"> 
<ul class="navbar"> 
    <li><%= link_to('home', '/') %></li> 
    <li><%= link_to('about', :controller => 'about') %> 
    <ul class="sub-menu"> 
     <li><%= link_to('meet & greet', :controller => 'about') %></li> 
     <li><%= link_to('work with me!', :controller => 'contact') %></li> 
     <li><%= link_to('contact', :controller => 'contact') %></li> 
    </ul> 
    </li> 
    <li><%= link_to('recipes', :controller => 'recipes') %> 
    <ul class="sub-menu"> 
    <li><%= link_to('Breads', :controller => 'about') %></li> 
    <li><%= link_to('Breakfast', :controller => 'contact') %></li> 
    <li><%= link_to('Brownies', :controller => 'contact') %></li> 
    <li><%= link_to('Cakes', :controller => 'contact') %></li> 
    <li><%= link_to('Cookies', :controller => 'contact') %></li> 
    <li><%= link_to('Cupcakes', :controller => 'contact') %></li> 
    <li><%= link_to('Donuts', :controller => 'contact') %></li> 
    <li><%= link_to('Gluten Free', :controller => 'contact') %></li> 
    <li><%= link_to('Healthy', :controller => 'contact') %></li> 
    <li><%= link_to('Lunch', :controller => 'contact') %></li> 
    <li><%= link_to('Muffins', :controller => 'contact') %></li> 
    <li><%= link_to('Misc.', :controller => 'contact') %></li> 
    <li><%= link_to('No-Bake', :controller => 'contact') %></li> 
    <li><%= link_to('Pasta', :controller => 'contact') %></li> 
    <li><%= link_to('Pizza', :controller => 'contact') %></li> 
    <li><%= link_to('Savory', :controller => 'contact') %></li> 
    </ul> 
    <li><%= link_to('everyday', :controller => 'blog', :action => 'everyday') %></li> 
    <li><%= link_to('development', :controller => 'blog', :action => 'development') %></li> 
</ul> 

#wrap { 
    height: 50px; 
    margin: 0; /* Ensures there is no space between sides of the screen and the menu */ 
    z-index: 99; /* Makes sure that your menu remains on top of other page elements */ 
    position: relative; 
} 

.navbar { 
    height: 50px; 
    margin-top: 7px; 
    position: absolute; /* Ensures that the menu doesn’t affect other elements */ 
    margin-left: 142px; 
} 

.navbar li { 
    height: auto; 
    width: 110px; /* Each menu item is 150px wide */ 
    float: left; /* This lines up the menu items horizontally */ 
    text-align: center; /* All text is placed in the center of the box */ 
    list-style: none; /* Removes the default styling (bullets) for the list */ 
    font-family: 'Muli', sans-serif; 
    text-transform: uppercase; 
    font-size: 13px; 
    padding: 0; 
    margin: 0; 
    background-color: white; 
} 

.navbar a { 
    padding: 10px 0; /* Adds a padding on the top and bottom so the text appears centered vertically */ 
    text-decoration: none; /* Removes the default hyperlink styling. */ 
    color: #686868; 
    display: block; 
} 

.navbar li:hover, .navbar li a:hover, .navbar ul li a:hover { 
    background-color: #7BCDC8; 
    color: white; 
} 

.navbar li ul { 
    display: none; /* Hides the drop-down menu */ 
    height: auto; 
    margin: 0; /* Aligns drop-down box underneath the menu item */ 
    padding: 0; /* Aligns drop-down box underneath the menu item */ 
} 

.navbar li:hover ul  { 
    display: block; /* Displays the drop-down box when the menu item is hovered over */ 
    color: white; 
} 

.navbar li ul li { 
    background-color: #7BCDC8; 
} 

.navbar li ul li a { 
    border-left: 1px solid #7BCDC8; 
    border-right: 1px solid #7BCDC8; 
    border-top: 1px solid #7BCDC8; 
    border-bottom: 1px solid #7BCDC8; 
} 

.navbar li ul li a:hover { 
    background-color: #7BCDC8; 
    color: white; 
} 

我想刪除列表項的寬度和剛剛成立padding-左/右15px，這樣它們甚至可以分開。當我這樣做時，下拉不再起作用。任何有用的提示？

Answer 1

可以通過先去除.navbar li的float，而不是把它放在

.navbar > li { 
    float: left; 
} 

因此，它只會影響頂層取下寬度。

但是，通過將

.navbar ul li { padding:0; } 

防止填充從列表中的應用的列表（加倍量）給你留下一些ugly change on hover，它可以修復。 Demo

不過，我不建議從下拉菜單刪除一組，因爲這樣做會創建因爲話

還記得關閉您的li標籤的不同長度的列表中的元素ugly and varying widths，你錯過了一個用於<li><%= link_to('recipes', :controller => 'recipes') %>