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-left / right设置为15px，使它们相距甚远。当我这样做时，下拉不再有效。任何有用的提示？

Answer 1

您可以先从float移除.navbar li，然后将其放入

，从而删除宽度

.navbar > li {
    float: left;
}

因此它只会影响最高级别。

但是，这会留下一些ugly change on hover，您可以通过添加

来解决这个问题

.navbar ul li { padding:0; }

这可以防止填充应用于列表中的列表（数量加倍）。 Demo

但是，我不建议从下拉列表中删除一个集合，因为这样做会创建ugly and varying widths列表元素，因为单词的长度不同

另请记得关闭li代码，错过了<li><%= link_to('recipes', :controller => 'recipes') %>

的代码

CSS导航下拉菜单 - 不要设置宽度

1 个答案: