仅下拉菜单css - 子菜单的宽度(无文字换行)(dropdown menu css only - width of submenu (no text wrap))
如何使它们相等( 宽度与父级相同 )并且没有文本换行 ?
如何简化这个菜单(父母,孩子,ul> li等)所以我不需要为每个新的子菜单创建新的样式
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
我有下拉菜单(仅限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>问:
先谢谢你。
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:
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.
更多推荐
发布评论