css - 骨架子菜单文本

我一直在研究使用Skeleton框架创建布局的教程。

我的问题是我已经按照创建导航的步骤进行了操作，但是当我在子菜单中添加项目时，它们似乎会转到新行。

解决此问题的唯一方法是使子菜单的父级成为我不想做的更长的值，我希望子菜单自动扩展到文本的宽度。

See image

我希望“短视频”显示在一行上。

以下是本教程中使用的代码。

/*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-->

谢谢

最佳答案

您可以给子菜单项一个固定的宽度

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

关于css - 骨架子菜单文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27041613/