Question

为了我的生活，我无法理解为什么'选项二'的下拉列表显示不正确，列表元素似乎都坐在彼此的顶部，只显示悬停时的最后一个选项，任何想法？

        body {
        margin: 0;
    }
    header {
        position: relative;
        width: 80%;
        height: 80px;
        padding: 0;
        margin: 0 auto;
        background: #ff6;
        max-width: 1200px;
    }
    /* nav and submenu */
    nav {
        position: absolute;
        top: 0;
        right: 0;
        width: auto;
        height: 80px;
        padding: 0;
        margin: 0;
    }
    nav ul {
        padding: 0;
        margin: 0;  
    }
    nav li {
        display: inline-block;
        zoom: 1;
        *display: inline;
        _height: 80px;
        list-style-type: none;
    }
    nav li a {
        display: block;
        height: 80px;
    }
    nav li a:hover {
        background: #448f69;
    }
        /* submenu navigation
        ---------------------------------------- */
        ul#menu, ul#menu ul.sub-menu {
            padding:0;
            margin: 0;
        }
        ul#menu li, ul#menu ul.sub-menu li {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        ul#menu li {
            width: auto;
        }
        ul#menu li a, ul#menu li ul.sub-menu li a {
            width: auto;
            text-decoration: none;
            color: #000;
            padding: 0 15px;
            display: block;
            font-size: 16px;
        }
        ul#menu li {
            position: relative;
        }
        ul#menu li ul.sub-menu {
            display:none;
            postion: absolute;
            top: 80px;
            left: 0;
            width: auto;
        }
        ul#menu li:hover ul.sub-menu {
            display:block;
        }
        ul#menu li:hover ul.sub-menu li {
            position: absolute;
            display:block;
            width: 100%;
            background-color: #red;
        }
        ul#menu li:hover ul.sub-menu li a:hover {
            display:block;
            width: auto;
            color: #000;
            background-color: green;
        }
<body>
<header>
<nav>
  <ul id="menu">
    <li><a href="">Option One</a></li>
    <li><a href="">Option Two</a>
        <ul class="sub-menu">
            <li><a href="">Section A</a></li>
        <li><a href="">Section B</a></li>
        <li><a href="">Section C</a></li>
      </ul><!-- /.sub-menu -->
    </li>
    <li><a href="">Option Three</a></li>
    <li><a href="">Option Four</a></li>
  </ul><!-- /#menu -->
</nav>

Answer 1

在基本层面上，这是因为你已经完全定位了所有sbnmenu的li，所以他们彼此坐在一起。

这里使用的定位很奇怪，所以我稍微更新了一下。

JSfiddle

<强> CSS

body {
    margin: 0;
}
header {
    position: relative;
    width: 80%;
    height: 80px;
    padding: 0;
    margin: 0 auto;
    background: #ff6;
    max-width: 1200px;
}


}
nav ul {
    padding: 0;
    margin: 0;
}
nav li {
    display: inline-block;
    zoom: 1;
    *display: inline;
    _height: 80px;
    list-style-type: none;
    position: relative;
    vertical-align: top;
}
nav li a {
    display: block;
    height: 80px;
}
nav li a:hover {
    background: #448f69;
}
/* submenu navigation
    ---------------------------------------- */
ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, 
ul#menu ul.sub-menu li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul#menu li {
    width: auto;
}
ul#menu li a, ul#menu li ul.sub-menu li a {
    width: auto;
    text-decoration: none;
    color: #000;
    padding: 0 15px;
    display: block;
    font-size: 16px;
}
ul#menu li {
    position: relative;
}
ul#menu li ul.sub-menu {
    display:none;
    postion: absolute;
    top:100%;
    left: 0;
    width: auto;
}
ul#menu li:hover ul.sub-menu {
    display:block;
}
ul#menu li:hover ul.sub-menu li {
    //position: absolute;
    display:block;
    width: 100%;
    background-color: #red;
}
ul#menu li:hover ul.sub-menu li a:hover {
    display:block;
    width: auto;
    color: #000;
    background-color: green;
}

Answer 2

进行以下更改：

        ul#menu li:hover ul.sub-menu li {
            position: relative;/*Change position from absolute to relative*/
            display:block;
            width: 100%;
            background-color: #red;
        }

        ul#menu li:hover ul.sub-menu li {
            position: relative;
            display:block;
            width: 100%;
            /*top: 80px;Remove this*/
            background-color: #red;
        }

fiddle

下拉菜单问题

2 个答案: