为ul导航添加一个标题

Question

我想为一组导航元素添加一个标题。结果应该看起来像这样：https://jsfiddle.net/cd8tb9z3/1/

由于我使用无序列表，我不知道在哪里以及如何添加标题元素。

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

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

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

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

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> \t <i class="fa fa-floppy-o"></i> 
 
      <br>Save 
 
      <br> \t <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

我rejigged从@wazaaaap因为只有li被允许作为ul

直接孩子把标题span作为中的第一个元素的答案nav。

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> 
 
    <span class="nav-button-group-title">Image-Editor</span> 
 
    <ul> 
 
       
 
     <li><i class="fa fa-file-o"></i> 
 
      <br>New</li> 
 
     <li> \t <i class="fa fa-floppy-o"></i> 
 
      <br>Save 
 
      <br> \t <span class="button-arrow-down"></span> 
 

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