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

水平显示菜单（关于业务增长的家应该在同一水平线上）

在css中添加此内容

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

主菜单项的箭头形状

我假设你想要hover

   ul li > a:hover{
    display:block;
    background:#fff url(images/arrow.png) no-repeat center bottom;
   }

主菜单项与子项目之间的差距

在css中添加此内容

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

css样式的下拉菜单

1 个答案: