CSS，创建下拉菜单答案

【问题标题】：CSS, create dropdown menuCSS，创建下拉菜单
【发布时间】：2013-01-12 18:02:41
【问题描述】：

我不知道这是否可以通过纯 css 实现。请检查我的例子。

我希望当菜单的第 2 级悬停时将显示第 3 级，'inline' 类似第 1 级，同时在每个第 3 级下方显示所有第 4 级菜单，'block' 类似第 2 级。

-------------------------------------------
|      MENU                               |
|      Level 1                            |
-------------------------------------------
| Level2|           Level 3  Inline       |
|       |----------------------------------
|       | Level4  | Level4 | Level4|Level4|
--------|         |        |       |      |
        |         |        |       |      |
        |----------------------------------

非常感谢您的建议。

【问题讨论】：

标签： html css menu hover

【解决方案1】：

小提琴：http://jsfiddle.net/4CGwe/1/

标记应该尊重这个方案：

#BLABLA > ul > li > a
#BLABLA > ul > li > ul > li > ul > li > ul > li > a

（每个<LI> 应包含<A> 和可选的<UL>）

这里是 CSS：

    #BLABLA ul
        {list-style:none;margin:0;padding:0;display:none;}
    #BLABLA li
        {position:relative;}
    #BLABLA a
        {border:2px red outset;padding:10px 30px;display:block;}

    /* by default only the first level menu is visible */
    #BLABLA > ul
        {display:block;}

    /* by default hovering a item will try to show its own sub-menu */
    #BLABLA li:hover > ul
        {display:block;}

    /* any submenu (2,3,4 level) is absolute */
    #BLABLA ul ul
        {position:absolute;}

    /* FIRST LEVEL MENU */
    #BLABLA > ul > li
        {float:left;}
    #BLABLA > ul > li > a
        {background:orange;}

    /* SECOND LEVEL MENU */
    #BLABLA > ul > li > ul
        {top:100%;left:0;}
    #BLABLA > ul > li > ul > li > a
        {background:pink;}

    /* THIRD LEVEL MENU */
    #BLABLA > ul > li > ul > li > ul
        {left:100%;top:0;width:900px;} /* sadly here you have to set manually a huge width */
    #BLABLA > ul > li > ul > li > ul > li
        {float:left;}
    #BLABLA > ul > li > ul > li > ul > li > a
        {background:gold;}  

    /* FOURTH LEVEL MENU */
    #BLABLA > ul > li > ul > li > ul > li > ul > li > a
        {background:lightblue;}

PS：告诉我你是否对设置 width:900px 的替代方案感兴趣

【讨论】：