Skeleton Sub Menu Text

Question

I've been working on a tutorial to create a layout using the Skeleton framework.

My issue is I have followed the steps to create the navigation but when I add items to the sub menu they seem to go on to a new line.

The only way around this is to make the parent of the sub menu a longer value which I don't want to do, I would like the sub menu to automatically stretch to the width of the text.

See image

I would like 'Short Videos' to display on one line.

Below is the code I'm using from the tutorial.

/*navigation*/
nav.primary ul,
nav.primary ul li {
 margin:0px;
}

nav.primary select {
 display: none;
 width: 100%;
 height: 28px;
 margin: 21px 0;
 
}

nav.primary ul li {
 diplay: inline;
 float: left;
 position: relative;
}

nav.primary ul li a {
 display: inline-block;
 line-height: 49px;
 padding: 0 14px;
 color: #ebebeb;
 text-transform: uppercase;
 text-decoration: none;
 font-weight: bold;
 letter-spacing: 0.08em;
}

nav.primary ul li a:hover {
 background-color: #424242;
 cursor: pointer;
}

/*sub menu*/

nav.primary li ul li a {
 width: auto;
 min-width: 100px;
 padding: 0 20px;
}

nav.primary ul ul {
    opacity: 0;
    filter: alpha(opacity=0);
    
 position: absolute;
 z-index: 999;
 background-color: #2d2c2c;
 
 display: inline-block;
 height: 0px;
 overflow: hidden;
 
 min-width: 100%;
 
 -webkit-transition: opacity 0.4s ease-out;
 -moz-transition: opacity 0.4s ease-out;
 -o-transition: opacity 0.4s ease-out;
 -ms-transition: opacity 0.4s ease-out;
 transition: opacity 0.4s ease-out;
 
 -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
 -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
 box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
 
}

nav.primary ul li span {
 display: none;
}

nav.primary ul li:hover ul {
    opacity: 10;
    filter: alpha(opacity=100);
    
 height: auto;
 overflow: auto;
}

nav.primary ul ul li {
 float: none;
 display: list-item;
 border-bottom: 1px solid #383737;
}

nav.primary ul ul li a {
 display: block;
 line-height: 35px;
 text-transform: none;
}

nav.primary ul li:hover > a {
 background-color: #424242;
}

<div class="band navigation">
    
 <nav class="container primary">
 
  <div class="sixteen columns">
   
   <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Projects</a>
   
   <ul>
   <li><a href="#"><span>-</span>Short Videos</a>
   <li><a href="#"><span>-</span>Corporate</a>
   <li><a href="#"><span>-</span>Music</a>
   
   </ul>
   
   </li>
   <li><a href="#">Contact</a></li>
   
   
   </ul>
   
   
   </div>
   
         </nav><!--end container-->
   </div><!--end band-->

Thank you

Answer 1

You can just give a fixed width to the submenu items

nav.primary li ul li a {
width: 200px;   
padding: 0 20px;
}

Answer 2

Since you want the width of the submenus to adjust automatically, apply the white-space: nowrap statement to the submenu list items.

nav.primary ul ul li {
    white-space: nowrap;
}

This will prevent list items from breaking between words and allow the width to adjust automatically to accommodate the widest item without requiring other submenus with shorter list items to be wider than necessary.

The white-space: nowrap statement is explained clearly at W3schools.com:

Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br>tag is encountered

Despite this definition, no <br> tag is needed as long as the rule is applied to the individual list items and not the <ul> tag.