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

查看:138
本文介绍了网页菜单不太对的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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



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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆