html - 导航菜单的移位元素

Question

我尝试创建一个水平导航，但是有一些问题:

1. 第一个元素被置换
2. 有没有更好的方法将文本置于图标下方居中。现在我只用了一个
   。我应该如何使用可选的向下箭头图标 - 在这里我使用了 span-tag。我认为 html 标记不是最好的。
3. 并且二级 ul (=subelements) 没有正确显示并且没有包含子元素。

JSFiddle: http://jsfiddle.net/pqubgt2d/

			nav {
				background-color: #f2f2f2;
				padding: .3em 0;
				border-radius: 7px;
			}
			nav ul {
				list-style: none;
				height: 2.5em;
				padding: .25em;
				color: #555;
				margin: 0;
			}
			nav ul li {
				font-family: "Source Sans Pro";
				font-size: .5em;
				margin: .5em 0;
				display: inline-block;
				width: 4em;
				text-align: center;
			}
			nav ul li i {
			    font-size: 3em !important;
			}
			nav ul li ul {
				font-size: 3em;
				background-color: #f2f2f2;
			}

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

<link href="http://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>

Answer 1

    nav {
        background-color: #f2f2f2;
        padding: .3em 0;
        border-radius: 7px;
        height: 2.5em;
    }
    nav > ul {
        list-style: none;
        padding: .25em;
        color: #555;
        margin: 0;
    }
    nav > ul > li {
        font-family:"Source Sans Pro";
        font-size: .5em;
        margin: .8em;
        text-align: center;
        float:left;
        width:4em;
    }
    nav > ul > li i {
        font-size: 2.8em !important;
    }
    nav > ul > li>ul {
        font-size: 3em;
        background-color: #f2f2f2;
    }
    .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;
    }
    .drop {
        float:left;
        display:none;
    }
    li:hover > .drop {
        display:block;
    }
    .drop {
        list-style-type:none;
        font-family:"Source Sans Pro";
        font-size: 20px;
    }

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

            <ul class="drop">
                <li>Subelement 1</li>
                <li>Subelement 2</li>
                <li>Subelement 3</li>
            </ul>
        </li>
    </ul>
</nav>

试试这个。这看起来更像是你想要的。如果有帮助+1。编辑。由于您的评论，我已经更新了答案。