在现有导航栏中创建下拉菜单

Question

我目前正在开发我的网站，并且我有一个现有的导航栏。问题是我有太多信息要在一页上分享。这就是我想在现有导航栏中实现下拉菜单的原因。我已经尝试了很多东西，但这一切似乎都搞砸了我的 CSS 布局，或者它完全删除了导航栏。

我有一个下拉菜单的现有代码，但我根本无法将它与现有的 css 代码混合。我从网上得到这个代码，它不是我的财产。

我的 HTML：

        <div id="menu">
        <ul>
            <li class="current_page_item"><a href="index.php" accesskey="1" title="">Home</a></li>
            <li><a href="service.html" accesskey="2" title="">Onze service</a></li>
            <li><a href="team.html" accesskey="3" title="">Ons team</a></li>
            <li><a href="prijzen.html" accesskey="4" title="">Prijzen</a></li>
            <li><a href="contact.php" accesskey="5" title="">Contact</a></li>
        </ul>
    </div>

我的 CSS：

 #menu
{
    position: absolute;
    right: 0;
    top: 1em;
}

#menu ul
{
    display: inline-block;
}

#menu li
{
    display: block;
    float: left;
    text-align: center;
    line-height: 60px;
}

#menu li a, #menu li span
{
    display: inline-block;
    margin-left: 1px;
    padding: 0em 1.5em;
    letter-spacing: 0.10em;
    text-decoration: none;
    font-size: 1.0em;
    text-transform: uppercase;
    outline: 0;
    color: #212121;
    background: #ECECEC;
}

#menu li:hover a, #menu li.active a, #menu li.active span
{
}

#menu .current_page_item a
{
    background: #E24E2A;
    color: #FFF;
}

#menu .icon
{
}

下拉菜单：

#primary_nav_wrap
{
    margin-top:15px
}

#primary_nav_wrap ul
{
    list-style:none;
    position:relative;
    float:left;
    margin:0;
    padding:0
}

#primary_nav_wrap ul a
{
    display:block;
    color:#333;
    text-decoration:none;
    font-weight:700;
    font-size:12px;
    line-height:32px;
    padding:0 15px;
    font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
{
    position:relative;
    float:left;
    margin:0;
    padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
    background:#ddd
}

#primary_nav_wrap ul li:hover
{
    background:#f6f6f6
}

#primary_nav_wrap ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    padding:0
}

#primary_nav_wrap ul ul li
{
    float:none;
    width:200px
}

#primary_nav_wrap ul ul a
{
    line-height:120%;
    padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
    top:0;
    left:100%
}

#primary_nav_wrap ul li:hover > ul
{
    display:block
}

提前致谢！

Answer 1

您的导航包装器是 menu，而在来自在线的 CSS 中它是 primary_nav_wrap，因此将这些实例交换为菜单。

在 html 本身中嵌套的无序列表元素用于下拉菜单，因此请在需要下拉菜单的列表元素下添加这些元素。

HTML：

<div id="menu">
    <ul>
        <li class="current_page_item"><a href="index.php" accesskey="1" title="">Home</a><ul>
        <li>sub1</li>
        <li>sub2</li>
        <li>sub3</li>
        </ul>
        <li><a href="service.html" accesskey="2" title="">Onze service</a></li>
        <li><a href="team.html" accesskey="3" title="">Ons team</a></li>
        <li><a href="prijzen.html" accesskey="4" title="">Prijzen</a></li>
        <li><a href="contact.php" accesskey="5" title="">Contact</a></li>
    </ul>
</div>

CSS：

    #menu ul {
display:inline-block;
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}

#menu li {
display:block;
float:left;
text-align:center;
line-height:60px
}

#menu li a,#menu li span {
display:inline-block;
margin-left:1px;
padding:0 1.5em;
letter-spacing:.1em;
text-decoration:none;
font-size:1em;
text-transform:uppercase;
outline:0;
color:#212121;
background:#ECECEC
}

#menu .current_page_item a {
background:#E24E2A;
color:#FFF
}

#menu {
margin-top:15px
}

#menu ul a {
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#menu ul li {
position:relative;
float:left;
margin:0;
padding:0
}

#menu ul li.current-menu-item {
background:#ddd
}

#menu ul li:hover {
background:#f6f6f6
}

#menu ul ul {
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}

#menu ul ul li {
float:none;
width:200px
}

#menu ul ul a {
line-height:120%;
padding:10px 15px
}

#menu ul ul ul {
top:0;
left:100%
}

#menu ul li:hover > ul {
display:block
}

这是合并代码的 jsfiddle：

https://jsfiddle.net/o51pp5s6/