0

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

有没有人有任何 CSS 提示或知道像我正在尝试制作的菜单的任何好的示例？

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

4

2 回答 2

0

直到今天，HTML Dog 的文章“Suckerfish Dropdowns 之子”仍然是关于带有悬停的干净 CSS 菜单的经典之作。

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

于 2012-08-07T04:07:58.053 回答
0

嘿现在创建这个菜单很容易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;
}

现场演示

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

于 2012-08-07T04:31:34.030 回答