Displaced elements of navigation menu - html

Question

I try to create a horizontal navigation, but there are some problems:
The first element is displaced
Is there a better way to place the Text centered below the icon. Now I did that just with a . And how should I use the optional arrow-down-icon - here I used the span-tag. I think the html-markup for that is not the best.
And the second-level ul (=subelements) isn't shown correctly and doesn't enclose the 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>
Try this. This looks more like you want it. If it helps +1.
Edit. I have updated the answer due to your comment.