html - 下拉菜单的CSS样式

Question

我正在尝试设置下拉菜单的样式，使其在我的图片上看起来像:

到目前为止我得到了这个:

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

主要问题:

• 水平显示菜单(关于业务增长的主页应在同一水平线上)
• 主菜单项的箭头形状
• 主菜单项和子项之间的间隔

http://codepen.io/anon/pen/oDzbH能否请你帮忙？非常感谢。

Answer 1

• display menu horizontally (home about business growth should be on the same horizontal line)

在CSS中添加这个

nav,nav ul{
    display:inline-block;
}

• arrow shape of main menu item

我假设你想要它在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

在CSS中添加这个

ul.sub-menu{
    margin-top:10px; /* or whatever suits your layout*/
}