Prevent nested nav items from breaking on to the next line? - html

Question

I have a basic horizontal nav menu, where a drop down list shows on hover. When the drop down links are single words everything works fine, but if the links are more than one word, ie "Lori Ipsum", the line breaks. I'm looking for the lines to keep their full width, so "Lori Ipsum" would be shown on the same line.
How can I prevent the line break?
Recreated in a code pen: http://codepen.io/agconti/pen/zvjkm
html:
<nav role='navigation'>
<ul>
<li>Home</li>
<li>
About
<ul>
<li>Lorem ipsum</li>
<li>Aliquam tincidunt</li>
<li>Vestibulum auctor</li>
</ul>
</li>
<li>Clients</li>
<li>Contact Us</li>
</ul>
</nav>
css:
html {
font-size: 1.5em;
}
a {
color: white;
text-decoration: none;
width: 100%;
}
li {
transition: color 0.15s ease-out, background-color 0.1s ease-in;
}
ul {
list-style: none;
background: blue;
margin: 0;
}
ul li {
padding: 1em;
margin: 0;
display: inline-block;
position: relative;
}
ul li:hover {
background: pink;
}
ul li:hover > ul {
display: block;
}
ul ul {
background-color: pink;
position: absolute;
display: none;
padding: 0;
left: 0;
top: 100%;
}
ul ul li {
box-sizing: border-box;
display: block;
minwidth: 100%;
}
ul ul li:hover {
background: #ffa6b6;
color: white;
}

Answer 1

set li default width;
or use
li a {
white-space: nowrap;
}

Answer 2

Maybe I am missing something, but you have a pretty good solution as is, and you could
fix the text wrap problem by specifying a width to the nest ul as follows:
ul ul {
background-color: tan;
position: absolute;
display: none;
padding: 0;
left: 0;
top: 100%;
width: 300px;
}
I used 300px but you can pick a suitable value.
html {
font-size: 1.5em;
}
a {
color: white;
text-decoration: none;
}
li {
transition: color 0.15s ease-out, background-color 0.1s ease-in;
}
ul {
list-style: none;
background: blue;
margin: 0;
}
ul li {
padding: 1em;
margin: 0;
display: inline-block;
position: relative;
}
ul li:hover {
background: pink;
}
ul li:hover > ul {
display: block;
}
ul ul {
background-color: tan;
position: absolute;
display: none;
padding: 0;
left: 0;
top: 100%;
width: 300px;
}
ul ul li {
/* white-space: nowrap;*/
box-sizing: border-box;
display: block;
min-width: 100%;
}
ul ul li:hover {
background: #ffa6b6;
color: white;
}
ul ul li a {
width: 200%;
}
<nav role='navigation'>
<ul>
<li>Home</li>
<li>
About
<ul>
<li>Lorem ipsum</li>
<li>Aliquam tincidunt</li>
<li>Vestibulum auctor</li>
</ul>
</li>
<li>Clients</li>
<li>Contact Us</li>
</ul>
</nav>
<section class="hero">
<div class="mask"></div>
</section>

Answer 3

li a {
white-space: nowrap;
}