2011-10-22 365 views
0

我在设计Wordpress主题,我唯一的问题就是下拉菜单。 使用“显示”和...属性设置那些“ul”和“li”选择器的样式。 即使阅读教程并查看其他网站的CSS(Firebug),我仍然无法创建一个! 有什么特别的程序或者我可以学习的好源? 假设我想要设计一个级别的下拉菜单。 谢谢CSS - 单层下拉菜单

回答

2

马赫迪,

创建一个跨浏览器兼容的下拉菜单很简单,只要你不要过分复杂化,并有一个体面的理解元素类型和CSS的定位模型。有一些标准的例子可以让你很容易。我会尽量为你提供一个尽可能简单的答案让你理解(因为我的大脑过于复杂,直到我做了一些小小的研究)。

顶层菜单

这是很好的做法,所有菜单包括子菜单是ul元素。这有几个原因。

  1. 它自然有你需要的大部分风格。
  2. 无论如何,菜单是一个选项列表,所以它不会让它成为一个列表。
  3. 它可以帮助残疾人士
  4. 它允许嵌套。

ul元素的问题是他们有那些讨厌的子弹。此外,儿童不会自然流动在一起。它们全部出现在单独的行中。所以,我们有两个选项来修复li。我们可以float他们,但这可能会相当尴尬。我不推荐它。或者我们可以改变它的类型。好吧,我们在其中包含另一个块,所以inline-block对此非常完美。

<!-- the HTML for the menu --> 
<ul class="menu"> 
    <li class="submenu"><a href="url">link</a></li> 
    <li class="submenu"><a href="url">link</a></li> 
    <li class="submenu"><a href="url">link</a></li> 
</ul> 

/* The CSS for the menu */ 
ul.menu { 
    list-style-type:none; /* Gets rid of the bullets. */ 
} 
li.submenu { 
    display:inline-block; /* Makes the listitems appear on the same row. */ 
} 

**你的子菜单**

现在,嵌套ul元素必须是一个列表项。如果您将自己的下拉框ul置于li本身,浏览器将始终正确解释它。现在,我们不必宣布任何有趣的事情。仅举新ul同原来的菜单,就像这样:

<!-- Your new HTML --> 
<ul class="menu"> 
    <li class="submenu"><a href="url">link</a> 
     <ul class="menu"> 
      <li><a href="url">link</a> 
      <li><a href="url">link</a> 
      <li><a href="url">link</a> 
     </ul> 
    </li> 
    <li class="submenu"><a href="url">link</a> 
     <ul class="menu"> 
      <li><a href="url">link</a> 
      <li><a href="url">link</a> 
      <li><a href="url">link</a> 
     </ul> 
    </li> 
    <li class="submenu"><a href="url">link</a> 
     <ul class="menu"> 
      <li><a href="url">link</a> 
      <li><a href="url">link</a> 
      <li><a href="url">link</a> 
     </ul> 
    </li> 
</ul> 

/* Your new CSS. Notice nothing has changed. */ 
ul.menu { 
    list-style-type:none; /* Gets rid of the bullets. */ 
} 
ul.menu li { 
    display:inline-block; /* Makes the listitems appear on the same row. */ 
} 

下一步。让下拉菜单出现。

现在,我们有了我们的跨浏览器结构,我们只需要调整几件事情。我们需要先让菜单出现并消失。因为我们只希望这发生在一个子菜单中,我们得到了更具体的:

/* Add this to your CSS. */ 
li.submenu ul.menu { 
    display:none; /* Makes the submenu disappear. */ 
} 
li.submenu:hover ul.menu { 
    display:block; /* Makes the submenu appear. */ 
} 

现在,如果你看看,你的菜单出现,适当地消失。没有造型,只是为你列出。在所有浏览器中以相同的方式工作...哦,等等! IE越来越大。那么,这是一个简单的问题。你看,IE解释填充不同于其他填充。让它成为一个非问题:

/* Add this to your CSS. */ 
menu * { 
    padding:0; /* Width problem solved. */ 
} 

现在,另一个问题......你的子菜单是水平的。原因是因为我们告诉它应该是我们原来的。

ul.menu li { 
    display:inline-block; /* Makes the listitems appear on the same row. */ 
} 

我们可以解决这个问题,我更具体。

/* Add this to your CSS. */ 
li.submenu ul.menu li { 
    display:block; 
} 

现在是垂直的!在任何主流浏览器中进行测试,您将看到这些是跨浏览器下拉菜单所必需的唯一组件。

菜单

<ul class="menu"> 
    <li class="submenu"><a href="url">link</a> 
     <ul class="menu"> 
      <li><a href="url">link</a> 
      <li><a href="url">link</a> 
      <li><a href="url">link</a> 
     </ul> 
    </li> 
    <li class="submenu"><a href="url">link</a> 
     <ul class="menu"> 
      <li><a href="url">link</a> 
      <li><a href="url">link</a> 
      <li><a href="url">link</a> 
     </ul> 
    </li> 
    <li class="submenu"><a href="url">link</a> 
     <ul class="menu"> 
      <li><a href="url">link</a> 
      <li><a href="url">link</a> 
      <li><a href="url">link</a> 
     </ul> 
    </li> 
</ul> 

最后的CSS最终的HTML菜单

menu * { 
    padding:0; /* Width problem solved. */ 
} 

ul.menu { 
    list-style-type:none; /* Gets rid of the bullets. */ 
} 
li.submenu { 
    display:inline-block; /* Makes the listitems appear on the same row. */ 
} 

li.submenu ul.menu { 
    display:none; /* Makes the submenu disappear. */ 
} 
li.submenu:hover ul.menu { 
    display:block; /* Makes the submenu appear. */ 
} 

li.submenu ul.menu li { 
    display:block; 
} 

此解决方案不要求滑稽定位或宽度声明。

希望这会有所帮助!

FuzzicalLogic

+0

+10可以得到很好的答案,+另外10个可以让它成为__的一个很好的答案。 – Bojangles

0

如果您只想创建一个简单的单级菜单。这是上面通过Fuzzical Logic解释的,但您可以使用伪类:hover来显示和隐藏下拉菜单。这是简单的explained in this article

希望它有帮助