我不知道纯css是否可以实现这一点。请检查我的例子。
http://jsfiddle.net/fantill/72xjU/
我希望当菜单的悬停级别2显示级别3时,'inline'
级别为1级,同时显示每个级别3下方的所有级别4菜单,其中'block'
级别为2级。
-------------------------------------------
| MENU |
| Level 1 |
-------------------------------------------
| Level2| Level 3 Inline |
| |----------------------------------
| | Level4 | Level4 | Level4|Level4|
--------| | | | |
| | | | |
|----------------------------------
非常感谢你的建议。
答案 0 :(得分:2)
FIDDLE: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:告诉我你是否对设置宽度的替代品感兴趣:900px