仅下拉菜单css

仅下拉菜单css - 子菜单的宽度（无文字换行）(dropdown menu css only - width of submenu (no text wrap))

我有下拉菜单（仅限CSS）

的jsfiddle：

>>> jsfiddle <<<

HTML：

<div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Web Design</a> <ul> <li><a href="#">HTML</a> <ul> <li><a href="#">HTML 4 and less</a> <ul> <li><a href="#">TEST 1</a></li> <li><a href="#">TEST 2</a></li> <li><a href="#">TEST 3</a></li> </ul> </li> <li><a href="#">HTML 5</a></li> </ul> </li> <li><a href="#">CSS</a></li> </ul> </li> </ul> </li> <li><a href="#">Articles</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">User Experience</a></li> </ul> </li> <li><a href="#">Inspiration</a></li> </ul> </div>

问：

如何使它们相等（ 宽度与父级相同 ）并且没有文本换行 ？ 如何简化这个菜单（父母，孩子，ul> li等）所以我不需要为每个新的子菜单创建新的样式

先谢谢你。

I have dropdown menu (css only)

JSFIDDLE:

>>> jsfiddle <<<

HTML:

<div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Web Design</a> <ul> <li><a href="#">HTML</a> <ul> <li><a href="#">HTML 4 and less</a> <ul> <li><a href="#">TEST 1</a></li> <li><a href="#">TEST 2</a></li> <li><a href="#">TEST 3</a></li> </ul> </li> <li><a href="#">HTML 5</a></li> </ul> </li> <li><a href="#">CSS</a></li> </ul> </li> </ul> </li> <li><a href="#">Articles</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">User Experience</a></li> </ul> </li> <li><a href="#">Inspiration</a></li> </ul> </div>

Q:

How to make them equal (same width as parent) and no text wrap ? How to simplify this menu (parent, children, ul > li etc.) so I don't need to make new style for each new sub-menu

Thank you in advance.

最满意答案

试试这个 - 这适用于Chrome：

* { white-space: nowrap; box-sizing: border-box; } .menu { margin: 100px auto; text-align: center; } /* ULs */ .menu ul { padding: 0; position: absolute; display: none; background: green; top: 0; position: absolute; list-style: none; } .menu > ul { background: #efefef; position: relative; display: inline-table; } .menu > ul > li > ul { top: 100%; } .menu li:hover > ul { display: block; } .menu ul ul ul { left: 100%; border-left: 1px solid white; top: -1px; } /*LIs*/ .menu li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid yellow; position: relative; } .menu > ul > li { float: left !important; border: none; } .menu ul li:hover { background: blue; } /* As */ .menu a { display: block; padding: 10px; color: #757575; text-decoration: none; } .menu li:hover a { color: #fff; } .menu ul ul a:hover { background: red; }

此外，考虑到拥有这么多子菜单不是一个好习惯（用户体验方面）。 您应尝试重新设计用户界面，以便以不会让用户感到沮丧的方式匹配您网站的使用情况。

Try this - this works great on Chrome:

* { white-space: nowrap; box-sizing: border-box; } .menu { margin: 100px auto; text-align: center; } /* ULs */ .menu ul { padding: 0; position: absolute; display: none; background: green; top: 0; position: absolute; list-style: none; } .menu > ul { background: #efefef; position: relative; display: inline-table; } .menu > ul > li > ul { top: 100%; } .menu li:hover > ul { display: block; } .menu ul ul ul { left: 100%; border-left: 1px solid white; top: -1px; } /*LIs*/ .menu li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid yellow; position: relative; } .menu > ul > li { float: left !important; border: none; } .menu ul li:hover { background: blue; } /* As */ .menu a { display: block; padding: 10px; color: #757575; text-decoration: none; } .menu li:hover a { color: #fff; } .menu ul ul a:hover { background: red; }

Also, consider this isn't a good practice (User-experience-wise) to have so many sub menus. You should attempt to re-design your UI to match the usage of your website in a way that won't make the user frustrated.