为什么我的导航栏不会下降？

Question

My nav bar will not drop down. 我的导航栏不会下拉。 Can anyone help?. 谁能帮忙？ I created a nav bar, but now I am trying to make part of it a drop down but it is not dropping down. 我创建了一个导航栏，但是现在我试图将其一部分下拉，但没有下拉。 I have included both my html and CSS code. 我已经包括了我的HTML和CSS代码。

Thanks in advance 提前致谢

My code: 我的代码：

Css: CSS：

@charset "utf-8";
    /* CSS Document */

body {
    margin - top: 0px;
    margin - bottom: 0px;
    margin - left: 0px;
    margin - right: 0px;
}

html {
    background: url(devbackground.jpg) no - repeat center center fixed;
    - webkit - background - size: cover;
    - moz - background - size: cover;
    - o - background - size: cover;
    background - size: cover;
    filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src = 'devbackground.jpg', sizingMethod = 'scale');
    - ms - filer: "progid:DXImageTransform.Microsoft.AlphaImageLoader     (src='devbackground.jpg', sizingMethod='scale')";
}

img.bg {
        /*set rules to fill background */
    min - height: 100 %;
    min - width: 1024px;
        /*set up proportiante scaling */
    width: 100 %;
    height: auto;
        /*set up positioning */
    position: fixed;
    top: 0;
    left: 10;
}

    /*nav bar code */

ul# list - nav {
    list - style: none;
    width: 1200px;
    margin - bottom: 20px;
 /*height of the nav bar */
    margin - left: 450px;
    /
        margin-right: 450px;
    margin-top: 20px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0px;
    padding-top: 0;
}

ul#list-nav li {
    display: inline;
}

ul#list-nav li a {
    / * nav bar boxes * /
    text-decoration: none;
    width: 200px;
    height: auto;
    background: #485e49;
    color: #eee;
    float: left;
    text-align: center;
    border-left: 1px solid #fff;
    padding-bottom: 5px;
    padding-left: 0;
    padding-right: auto;
    padding-top: 5px;
}

ul#list-nav li a:hover {
    background: #a2b3a1;
    color: #000;
}

#list-nav, #list-nav ul {
    margin: 0 auto;
    padding: 0;
}

#list-nav li {
    float: left;
    position: relative;
    list-style: none;
}

#list-nav > li:hover > ul {
    display: block;
}

#list-nav > li > ul {
    display: none;
    position: absolute;
}

#list-nav li a {
    white-space: nowrap;
}

Html: HTML：

<!doctype html>
<html>

<head>

    <link rel="stylesheet" type="text/css" href="css.css">
    <meta charset="utf-8">
    <title>Welcome to dcoltgaming.co.uk</title>
</head>

<body>

    <ul id="list-nav">

        <li><a href="/">Home</a>
        </li>
        <li><a href="#">Stuff</a>

            <ul>
                <li><a href="navbartest.html">NavBar Test</a>
                </li>
            </ul>

        </li>

        <li><a href="#">More Stuff</a>
        </li>
        <li><a href="#">Guess what? thats right more stuff!!!!!</a>
        </li>
        <li><a href="troll.html">Troll Faces</a>
        </li>
    </ul>
</body>

</html>K

<!doctype html>
<html>

<head>

    <link rel="stylesheet" type="text/css" href="css.css">
    <meta charset="utf-8">
    <title>Welcome to dcoltgaming.co.uk</title>
</head>

<body>

    <ul id="list-nav">

        <li><a href="/">Home</a>
        </li>
        <li><a href="#">Stuff</a>

            <ul>
                <li><a href="navbartest.html">NavBar Test</a>
                </li>
            </ul>

        </li>

        <li><a href="#">More Stuff</a>
        </li>
        <li><a href="#">Guess what? thats right more stuff!!!!!</a>
        </li>
        <li><a href="troll.html">Troll Faces</a>
        </li>
    </ul>
</body> 
</html>

Answer 1

It's because your child UL has absolute positioning, technically it is "dropping down" but since the secondary UL is absolutely positioned, it's just covering up the initial nav bar. 这是因为您的孩子UL具有绝对定位，从技术上讲它是“下降”的，但是由于辅助UL具有绝对定位，因此它只是覆盖了初始导航栏。 Add margin-top:29px; 添加margin-top:29px; to your secondary UL and it will work. 到您的二级UL，它将起作用。

为什么我的导航栏不会下降？

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-09-02 16:44:01

JSFiddle 的jsfiddle

为什么我的导航栏不会下降？

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-09-02 16:44:01

JSFiddle 的jsfiddle

解决方案1
1 已采纳 2014-09-02 16:44:01