设置子菜单的位置和100％宽度

Question

我需要一些帮助来获得子菜单的正确位置和子元素的100％宽度。

位置应位于箭头图标的正下方。并且子菜单应该获得宽度，以便所有元素只显示一行而不会换行。

			nav {
				background-color: #f2f2f2;
				padding: .3em 0;
				border-radius: 7px;
				font-family: "Source Sans Pro";
			}
			section {
				background-color: #fafafa;
				border-radius: 5px;
				display: inline-block;
  				margin-left: .5em;
			}
			section > h1 {
				margin: .5em .5em 0 .5em;
				display: block;
				font-weight: bold;
				font-size: .7em;
				color: #555;
				padding: 0 .5em;
				background-color: #F2F2F2;
				border-radius: 4px;
			}
			section > ul {
				list-style: none;
				padding: .25em .25em 0 .25em;
				color: #555;
				margin: 0 0 0 .5em;
				display: inline-block;
				
			}
			section > ul > li {
				font-size: .5em;
				margin: .5em 0 0 0;
				display: inline-block;
				width: 4em;
				text-align: center;
				float: left;
				position: relative;
				cursor: pointer;
			}
			section ul li i {
			    font-size: 3em !important;
			}
			section > ul > li > ul {
				list-style: none;
				font-size: 2em;
				background-color: #f2f2f2;
				position: absolute;
				top: 2.5em;
				left: 0px;
				margin: 0;
				padding: .5em 1em;

			}

			.fa-sort-desc {
				font-size: 2em !important;
				color: #B4B4B4;
				margin-top: -1em;
			}
			.fa-sort-desc:hover {
				color: #555;
			}

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

Answer 1

添加了CSS规则和属性：

section > ul > li > ul {
  top: 3em; /* Change */
}
section > ul > li > ul > li {
  white-space: nowrap; /* Add this to avoid wrapping of text to next line */
}

nav {
  background-color: #f2f2f2;
  padding: .3em 0;
  border-radius: 7px;
  font-family: "Source Sans Pro";
}
section {
  background-color: #fafafa;
  border-radius: 5px;
  display: inline-block;
  margin-left: .5em;
}
section > h1 {
  margin: .5em .5em 0 .5em;
  display: block;
  font-weight: bold;
  font-size: .7em;
  color: #555;
  padding: 0 .5em;
  background-color: #F2F2F2;
  border-radius: 4px;
}
section > ul {
  list-style: none;
  padding: .25em .25em 0 .25em;
  color: #555;
  margin: 0 0 0 .5em;
  display: inline-block;
}
section > ul > li {
  font-size: .5em;
  margin: .5em 0 0 0;
  display: inline-block;
  width: 4em;
  text-align: center;
  float: left;
  position: relative;
  cursor: pointer;
}
section ul li i {
  font-size: 3em !important;
}
section > ul > li > ul {
  list-style: none;
  font-size: 2em;
  background-color: #f2f2f2;
  position: absolute;
  top: 3em;
  left: 0px;
  margin: 0;
  padding: .5em 1em;
}
section > ul > li > ul > li {
  white-space: nowrap;
}
.fa-sort-desc {
  font-size: 2em !important;
  color: #B4B4B4;
  margin-top: -1em;
}
.fa-sort-desc:hover {
  color: #555;
}

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