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;
}