网页菜单不太对 [英] Webpage menus not quite right

问题描述

我有困难弄清楚为什么我的菜单是在彼此的顶部，而不是并排。查看图片：

p>

有人可以解释一下我需要做什么让它们并排显示吗？

我的HTML看起来像这样：

 < nav id =top_menu> 
< img src =media / images / logo_large.jpg> 
< ul class =dropdown> 
< li class =dropdown_trigger> 
< a href =＃>导航项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 =＃>导航项目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）; / *对于IE8及更早版本* / 
} 
 
。dropdown {
 background：black; 
 border：1px solid black; 
 float：right; 
 padding：1px 0 0 1px; 
 margin：0 0 20px; 
} 
 
。dropdown a {
背景：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; 
} 
  

解决方案

那么您需要使用 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使inline-block工作正确* / 
 zoom：1; 
 * display：inline; 
} 
  

I'm having difficulty figuring out why my menus are on top of each other instead of side by side. See image:

Can someone please explain what I need to do to have them appear side by side?

My HTML looks like this:

<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>

My CSS looks like so:

#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;
}

解决方案

If you want them side-by-side, then you'll want to use either float or display:inline-block:

If you don't mind them stacking to the left, and dealing with how floats need to be handled, then this will work:

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

Notice the > direct descendant selector: .dropdown > li - this applies this style only to your top-level li elements. This will save you time and effort when it comes to styling your drop-downs.

If you want to allow them to variable width, or you don't want them stacked left:

.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;
}

这篇关于网页菜单不太对的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！