网页菜单不太正确

Question

我很难弄清楚为什么我的菜单在彼此之上而不是并排。见图：

有人可以解释我需要做些什么让它们并排出现吗？

我的HTML看起来像这样：

<nav id="top_menu">
  <img src="media/images/logo_large.jpg">
  <ul class="dropdown">
    <li class="dropdown_trigger">
      <a href="#">Nav Item 1</a>
      <ul>
        <li><a href="#">Subitem1</a></li>         
        <li><a href="#">Subitem2</a></li>         
        <li><a href="#">Subitem3</a></li>         
        <li><a href="#">Subitem4</a></li>
      </ul>
    <li>
    <li class="dropdown_trigger">       
      <a href="#">Nav Item 2</a>
      <ul>
        <li><a href="#">Subitem1</a></li>         
        <li><a href="#">Subitem2</a></li>         
        <li><a href="#">Subitem3</a></li>         
        <li><a href="#">Subitem4</a></li>
      </ul>
    </li>
  </ul> 
</nav>

我的CSS看起来像这样：

#top_menu{
 position: relative;
 top:35px;
 left: 90px;
 width:660px;
 height:55px;
 background-color: black;
 border:1px solid white;
 opacity:0.6;
 filter:alpha(opacity=60); /* For IE8 and earlier */
}

.dropdown {
background: black;
border: 1px solid black;
float: right;
padding: 1px 0 0 1px;
margin: 0 0 20px;
}

.dropdown a {
background: black repeat-x;
border: 1px solid black;
border-top-width: 0;
color: white;
display: block;
line-height: 25px;
overflow: hidden;
text-decoration: none;
height: 25px;
}

.dropdown a:hover {
color: #30B3FF;
background: #666;
}

.dropdown ul a {
background: black;
}

.dropdown li {
list-style: none;
position: relative;
text-align: center;
font: bold 12px Tahoma; 
width: 120px;
}

.dropdown li.dropdown_trigger {
display: inline;
float: left;
margin: 0 0 0 -1px;
}

.dropdown ul {
background: black;
border: 1px solid black;
border-top-width: 0;
position: absolute;
top: 26px;
left: -1px;
z-index: 9999;
}

.dropdown ul {
display: none;
}

.dropdown li.dropdown_trigger:hover ul {
display: block;
}

Answer 1

如果您需要并排使用，那么您需要使用 <{strong> float或display:inline-block：

如果你不介意他们向左堆叠，并处理需要处理浮动的方式，那么这将有效：

.dropdown > li {
    list-style: none;
    position: relative;
    text-align: center;
    font: bold 12px Tahoma; 
    width: 120px;
    float: left;
}

请注意>直接后代选择器：.dropdown > li - 这仅将此样式应用于您的顶级li元素。这样可以节省您在下拉菜单样式上的时间和精力。

如果您想允许它们变宽，或者您不希望它们向左堆叠：

.dropdown > li {
    list-style: none;
    position: relative;
    text-align: center;
    font: bold 12px Tahoma; 
    display: inline-block;
    /* IE7 hack to make inline-block work right */
    zoom: 1;
    *display: inline;
}