JSFiddle

Question

我的导航栏不会下拉。任何人都可以帮忙吗？我创建了一个导航栏，但现在我试图让它的一部分下拉，但它没有下降。我已经包含了我的html和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：

<!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

这是因为您的孩子UL具有绝对的定位，从技术上来说，它是＆＃34;下降＆＃34;但由于次级UL绝对定位，它只是掩盖了初始导航栏。将margin-top:29px;添加到您的辅助UL，它将有效。

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

1 个答案:

JSFiddle