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, 당신을 떠난다. 일을하기 때문에 그렇게 말씀 또한

당신의 li 태그를 닫 기억

의 길이가 다른 목록 요소의 ugly and varying widths을 만들기 때문에 Demo

그러나, 나는 드롭 다운에서 함께 세트를 제거하지 않는 것이 좋습니다, 당신이 놓친 하나는 <li><%= link_to('recipes', :controller => 'recipes') %>