为ul-navigation添加标题

Question

我想为一组导航元素添加标题。结果应如下所示：https://jsfiddle.net/cd8tb9z3/1/

当我使用无序列表时，我不知道在何处以及如何添加title-element。

＆＃13;

＆＃13;

			nav {
				background-color: #f2f2f2;
				padding: .3em 0;
				border-radius: 7px;
			}
			nav > ul {
				list-style: none;
				padding: .25em;
				color: #555;
				margin: 0 0 0 .5em;
				display: inline-block;
				background-color: #fafafa;
				border-radius: 5px;
			}
			nav > ul > li {
				font-family: "Source Sans Pro";
				font-size: .5em;
				margin: .5em 0;
				display: inline-block;
				width: 4em;
				text-align: center;
				float: left;
				position: relative;

			}
			nav ul li i {
			    font-size: 3em !important;
			}
			nav > ul > li > ul {
				list-style: none;
				font-size: 2em;
				background-color: #f2f2f2;
				position: absolute;
				top: 2.5em;
				left: 0px;
				margin: 0;
				padding: .5em 1em;
				display: none;
			}

			.button-arrow-down {
				width: 0; 
				height: 0; 
				border-left: 5px solid transparent;
				border-right: 5px solid transparent;
				border-top: 5px solid #B4B4B4;
			    margin: 0 auto;
			    position: relative;
			    bottom: -7px;
			}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
		<nav>
			<ul>
				<li><i class="fa fa-file-o"></i><br>New</li>
				<li>
					<i class="fa fa-floppy-o"></i><br>
					Save<br>
					<span class="button-arrow-down"></span>
					<ul>
						<li>Subelement 1</li>
						<li>Subelement 2</li>
						<li>Subelement 3</li>
					</ul>
				</li>
			</ul>
		</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需将<span class="nav-button-group-title">Image-Editor</span>放入ul列表（作为第一个元素）。

工作代码：

nav {
    background-color: #f2f2f2;
    padding: .3em 0;
    border-radius: 7px;
}
nav > ul {
    list-style: none;
    padding: .25em;
    color: #555;
    margin: 0 0 0 .5em;
    display: inline-block;
    background-color: #fafafa;
    border-radius: 5px;
}
nav > ul > li {
    font-family:"Source Sans Pro";
    font-size: .5em;
    margin: .5em 0;
    display: inline-block;
    width: 4em;
    text-align: center;
    float: left;
    position: relative;
}
nav ul li i {
    font-size: 3em !important;
}
nav > ul > li > ul {
    list-style: none;
    font-size: 2em;
    background-color: #f2f2f2;
    position: absolute;
    top: 2.5em;
    left: 0px;
    margin: 0;
    padding: .5em 1em;
    display: none;
}
.button-arrow-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #B4B4B4;
    margin: 0 auto;
    position: relative;
    bottom: -7px;
}
.nav-button-group-title {
    display: block;
    font-weight: bold;
    font-family:"Source Sans Pro";
    font-size: .7em;
    color: #555;
    padding: 0 .5em;
    background-color: #F2F2F2;
    border-radius: 4px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav>
    <ul>
        <span class="nav-button-group-title">Image-Editor</span>       
        <li><i class="fa fa-file-o"></i>
            <br>New</li>
        <li>	<i class="fa fa-floppy-o"></i>
            <br>Save
            <br>	<span class="button-arrow-down"></span>

            <ul>
                <li>Subelement 1</li>
                <li>Subelement 2</li>
                <li>Subelement 3</li>
            </ul>
        </li>
    </ul>
</nav>

Answer 2

我已经重新审核了@wazaaaap的答案，因为只允许li作为ul的直接子女

将标题span作为nav内的第一个元素。

＆＃13;

＆＃13;

nav {
    background-color: #f2f2f2;
    padding: .3em 0;
    border-radius: 7px;
}
nav > ul {
    list-style: none;
    padding: .25em;
    color: #555;
    margin: 0 0 0 .5em;
    display: inline-block;
    background-color: #fafafa;
    border-radius: 5px;
}
nav > ul > li {
    font-family:"Source Sans Pro";
    font-size: .5em;
    margin: .5em 0;
    display: inline-block;
    width: 4em;
    text-align: center;
    float: left;
    position: relative;
}
nav ul li i {
    font-size: 3em !important;
}
nav > ul > li > ul {
    list-style: none;
    font-size: 2em;
    background-color: #f2f2f2;
    position: absolute;
    top: 2.5em;
    left: 0px;
    margin: 0;
    padding: .5em 1em;
    display: none;
}
.button-arrow-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #B4B4B4;
    margin: 0 auto;
    position: relative;
    bottom: -7px;
}
.nav-button-group-title {
    display: block;
    font-weight: bold;
    font-family:"Source Sans Pro";
    font-size: .7em;
    color: #555;
    padding: 0 .5em;
    background-color: #F2F2F2;
    border-radius: 4px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav>
  <span class="nav-button-group-title">Image-Editor</span>  
    <ul>
             
        <li><i class="fa fa-file-o"></i>
            <br>New</li>
        <li>	<i class="fa fa-floppy-o"></i>
            <br>Save
            <br>	<span class="button-arrow-down"></span>

            <ul>
                <li>Subelement 1</li>
                <li>Subelement 2</li>
                <li>Subelement 3</li>
            </ul>
        </li>
    </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;