水平布局的第一层的三级CSS菜单

我所追求的是顶级ul li s水平布局，然后随后的级别垂直布局，最好稍微缩小级别下降，在其父母li下。水平布局的第一层的三级CSS菜单

不经过任何悬停功能，只是一个很好的布局，像这样：

Top Item 1  Top Item 2  Top Item 3 
sub item 1  sub item 1  sub item 1 
sub item 2  sub item 2  sub item 2 
    sub sub item 1 sub item 3  sub item 3 
    sub sub item 2 sub item 4  sub item 4 
sub item 5  sub item 5  sub item 5

来源

2011-01-20 Andy

页脚菜单？就像页面底部的页脚一样？而这些子项目，它们是一直显示还是刚刚悬停和弹出？ – crowicked 2011-01-20 12:52:12

是的，对不起，页脚底部。是的，子菜单显示所有的时间。我知道这听起来像是一件奇怪的事情，但我的疯狂中有方法..... – Andy 2011-01-20 12:56:20

这里是一个复制粘贴的东西一起玩：

<html> 
<head> 
<style> 
    li.level1 { float: left; display: inline; margin-right: 20px } 
    ul.level2 { display: inline } 
    li.level2 { display: block; padding-left: 20px } 
    ul.level3 { display: inline } 
    li.level3 { display: block; padding-left: 20px } 
</style> 
</head> 
<body> 
<ul class="level1"> 
    <li class="level1">apple</li> 
    <li class="level1">banana 
     <ul class="level2"> 
      <li class="level2">banana 1 
       <ul class="level3"> 
        <li class="level3">banana 1 A</li> 
        <li class="level3">banana 1 B</li> 
       </ul> 
      </li> 
      <li class="level2">banana 2</li> 
     </ul> 
    </li> 
    <li class="level1">cherry 
     <ul class="level2"> 
      <li class="level2">cherry 1</li> 
      <li class="level2">cherry 2</li> 
     </ul> 
    </li> 
    <li class="level1">dddd</li> 
</ul> 
</body> 
</html>

来源

2011-01-20 13:20:24

或者，如果你想要的东西，纯CSS然后怎么是这样的： http://jsfiddle.net/pLFqd/2/

编辑：错过了关于不想悬停的功能，尝试附上简单的例子

来源

2011-01-20 12:47:13 Hawxby

我不认为问题提出者想要一个JS菜单：“子菜单显示所有的时间”。 – thirtydot 2011-01-20 12:58:08

这个怎么样：

Live Demo

CSS：

#footer { 
    overflow: auto; 
    background: #ddd 
} 
.outer { 
    list-style: none; 
    width: 33%; 
    float: left; 
    margin: 0; 
    padding: 0 
} 
.first { 
    font-weight: bold 
} 
.outer ul { 
    list-style: none; 
    margin: 0; 
    padding: 0 0 0 18px 
}

HTML：

<div id="footer"> 
    <ul class="outer"> 
     <li class="first"><a href="#">Top Item 1</a></li> 
     <li> 
      <ul> 
       <li><a href="#">sub item 1</a></li> 
       <li><a href="#">sub item 2</a></li> 
       <li> 
        <ul> 
         <li><a href="#">sub item 1</a></li> 
         <li><a href="#">sub item 2</a></li> 
        </ul> 
       </li> 
       <li><a href="#">sub item 5</a></li> 
      </ul> 
     </li> 
    </ul> 

    <ul class="outer"> 
     <li class="first"><a href="#">Top Item 2</a></li> 
     <li> 
      <ul> 
       <li><a href="#">sub item 1</a></li> 
       <li><a href="#">sub item 2</a></li> 
       <li><a href="#">sub item 3</a></li> 
       <li><a href="#">sub item 4</a></li> 
       <li><a href="#">sub item 5</a></li> 
      </ul> 
     </li> 
    </ul> 

    <ul class="outer"> 
     <li class="first"><a href="#">Top Item 3</a></li> 
     <li> 
      <ul> 
       <li><a href="#">sub item 1</a></li> 
       <li><a href="#">sub item 2</a></li> 
       <li><a href="#">sub item 3</a></li> 
       <li><a href="#">sub item 4</a></li> 
       <li><a href="#">sub item 5</a></li> 
      </ul> 
     </li> 
    </ul> 

</div>

来源

2011-01-20 13:09:40 thirtydot

水平布局的第一层的三级CSS菜单

回答

相关问题