css styling of drop down menu

Question

I am trying to style my drop down menu so it would look like on my picture: 

So far I got this:

`<nav>
            <ul id="home">
                <li><a href="#">HOME</a></li>
            </ul>
            <ul id="about">
            <li><a href="#">ABOUT</a></li>  
            </ul>
            <ul id="business">
                <li><a href="#">BUSINESS GROWTH</a>
                <ul class="sub-menu">
                    <li><a href="#">BUSINESS GROWTH </a></li>
                    <li><a href="#">FAQs</a></li>
                    <li><a href="#">FEES & SCHEDULING</a></li>
                    <li><a href="#">QUESTIONNAIRE</a></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*/
}