如何使用CSS制作水平导航栏，支持悬停并尊重容器的边缘

Question

我正在尝试制作一个基于CSS的导航栏，将UL/LI列表（包括悬停时显示的子UL/LI名单）转换为水平导航栏和子水平导航栏。除了子列表使用position:absolute来获取其在悬停元素下方的位置之外，我当前的实现（见图）是有效的。我相信这就是我的问题的根源，因为绝对定位的子菜单不尊重容器的边缘，所以如果浏览器太小，它会从容器的边缘渗出，而顶级菜单会包装。我遇到的另一个问题是，当顶层菜单结束时，它不会垂直扩展页面，所以即使它占用了更多的空间，后面的段落也不会向下移动并重叠。

有没有人有任何CSS技巧，或者知道像我试图制作的菜单这样的菜单的好例子？

链接到图像：http://i47.tinypic.com/288tbn7.png

Answer 1

直到今天，HTML Dog的文章"Suckerfish Dropdown之子"仍然是带有悬停的干净CSS菜单的经典。

http://www.htmldog.com/articles/suckerfish/dropdowns/

Answer 2

Hey现在创建这个菜单，很容易用于ul li，就像这个一样

HTML

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Home2</a></li>
  <li><a href="#">Home3</a>
    <ul class="submenu">
      <li><a href="#">Submenu</a></li>
      <li><a href="#">Submenu</a></li>
      <li><a href="#">Submenu</a></li>
    </ul>
  </li>
  <li><a href="#">Home4</a></li>
  <li><a href="#">Home5</a></li>
</ul>

Css

    .menu{
display:block;
  list-style:none;
  border-bottom:solid 1px red;
  float:left;
}
.menu > li{
  float:left;
  position:relative;
}
.menu > li + li{
  border-left:solid 1px red;
margin-left:10px;
}
.menu > li > a{
display:block;
  margin-left:10px;
}
.submenu{
  display:none;
list-style:none;
  position:absolute;
  top:20px;
  left:-39px;
  white-space:nowrap;
}
.menu > li:hover .submenu{
display:block;
}
.submenu li{
display:inline;
}
.submenu li + li {
border-left:1px solid green;
  margin-left:10px;
}
.submenu a{
display:inline-block;
  vertical-align:top;
  margin-left:10px;
}

实时演示

现在更改cssaccording to your layout这是基本步骤