dropdown menu css only - width of submenu (no text wrap) - css

Question

I have dropdown menu (css only)
JSFIDDLE:
>>> jsfiddle <<<
HTML:
<div class="menu">
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design
<ul>
<li>HTML
<ul>
<li>HTML 4 and less
<ul>
<li>TEST 1</li>
<li>TEST 2</li>
<li>TEST 3</li>
</ul>
</li>
<li>HTML 5</li>
</ul>
</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li>Articles
<ul>
<li>Web Design</li>
<li>User Experience</li>
</ul>
</li>
<li>Inspiration</li>
</ul>
</div>
CSS:
.menu {
margin: 100px auto;
text-align: center;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
white-space:nowrap;
}
.menu ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
}
.menu ul li:hover {
background: blue;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding: 10px;
color: #757575;
text-decoration: none;
}
.menu ul ul {
background: green;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid yellow;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color: #fff;
display: block;
}
.menu ul ul li a:hover {
background: red;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
display: block;
}
.menu ul ul ul li a:hover {
background: red;
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
top:0;
}
As you see at last submenu, they are not as upper menus. They wrap text and shrink (minimal width).
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.

Answer 1

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.