I am facing some challenges while trying to create a horizontal navigation:
- The first element appears to be displaced
- Is there a better way to position the text centered below the icon? Currently, I have used a
tag for this purpose. Also, how can I use the optional arrow-down-icon more effectively? Currently, I have used the span tag, but I feel that the html markup could be improved. - The second-level ul (subelements) is not displaying correctly and fails to 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>