css styling of drop down menu - html

Question

I am trying to style my drop down menu so it would look like on my picture:
![drop down menu]()
So far I got this:
`<nav>
<ul id="home">
<li>HOME</li>
</ul>
<ul id="about">
<li>ABOUT</li>
</ul>
<ul id="business">
<li>BUSINESS GROWTH
<ul class="sub-menu">
<li>BUSINESS GROWTH </li>
<li>FAQs</li>
<li>FEES & SCHEDULING</li>
<li>QUESTIONNAIRE</li>
</ul>
</li>
</ul>
`
#business,
#home,
#about
{
list-style-type: none;
}
#business li{
position:relative;
background-color: #004473;
display:inline-block;
width: 180px;
}
#business li a {
color: #fff;
text-decoration: none;
display:inline-block;
}
#business li ul {
position: absolute;
left: -9999px;
background-color: grey;
margin:0;
padding:0;
list-style-type: none;
width: auto;
}
#business li:hover ul {
left: 0px;
display:inline-block;
}
#business li ul li {
background-color: #004473;
width: 180px;
display:inline-block;
margin:0;
padding:0;
}
#business li ul li a {
color:#fff;
text-decoration: none;
font-style: italic;
}
#business li ul li a:hover {
text-decoration:underline;
}
main issues:
display menu horizontally (home about business growth should be on the same horizontal line)
arrow shape of main menu item
a gap between main menu items and the sub-items
http://codepen.io/anon/pen/oDzbH
Could you please help? Very appreciated.

Answer 1

display menu horizontally (home about business growth should be on the same horizontal line)
add this in css
nav,nav ul{
display:inline-block;
}
arrow shape of main menu item
i assume you want it on hover
ul li > a:hover{
display:block;
background:#fff url(images/arrow.png) no-repeat center bottom;
}
a gap between main menu items and the sub-items
add this in css
ul.sub-menu{
margin-top:10px; /* or whatever suits your layout*/
}