Question

我试图让我的下拉列表在悬停时显示，但无论我设置它的位置，它都在工作。我想也许在导航线上可能是'display'none的名称？另外，我无法将导航栏放在我的页面中心。我是html和css的初学者，所以请放轻松我=）。

<!DOCTYPE html>
    <html lang="en">
    <meta charset="UTF-8">
    <head>
        <title>Yanimal Art</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>

    <body>
    <div id="header"><img src="images/yanimal.gif" alt=""></div>

        <nav>
            <ul>
                <li><a href="about.aspx">About</a></li>
                <li><a href="portfolio.aspx">Portfolio</a></li>
                <ul>
                    <li><a href="drawings.aspx">Drawings</a></li>
                    <li><a href="paintings.aspx">Paintings</a></li>
                    <li><a href="digitalmedia.aspx">Digital Media</</li>
                </ul>
                <li><a href="shop.aspx">Shop</a></li>
                <li><a href="contact.aspx">Contact</a></li>
            </ul>

        </nav>

    <div id="middle"><p></p></div>

    <div id="footer">Site is Currently Under Construction</div>

    </body>
</html>

这是我的代码：

    body {
        background-color: #FFFFFF;
}

#header {
        display: block;
        margin-left: auto;
        margin-right: auto;
        height: 124px;
        width: 830px;
        margin-top: 60px;
}
    nav ul ul {
        display: none;
        position: absolute;
        top: 100%;
    }
        nav ul li: hover > ul {
            display: block;
        }
    nav ul {
        display: inline-block;
        text-align: center;
        list-style: none;
        position: relative;
        padding: 0;
        margin: 0 auto;
        background-color: #B8B8B8;
        font-family: Helvetica Neue light;
    }
        nav ul li {
            float: left;
        }
            nav ul li:hover {
                background: #e0e0e0;
            }
                nav ul li:hover a {
                        color: #333;
                }
            nav ul li a {
                    display: block;
                    padding: 12px 50px;
                    color: #000000;
                    text-decoration: none;
            }
nav ul ul {
        background: #B8B8B8;
        float: left;
        margin: 0;
        padding: 0;
        list-style: none;
}
    nav ul ul li {
            display: block;
            text-decoration: none;
            float: none;
            position: relative;
    }
        nav ul ul li a {
                display: block;
                padding: 15px 40 px;
                color: #000000;
        }

#middle {
    opacity: 0.93;
    display: block;
    position: relative;
    height: 100%;
    width: 100%;
    background-color: #121212;
}
#footer {
        opacity: 0.7;
        bottom: -40;
        width: 100%;
        background-color: #484838;
        text-align: center;
}

Answer 1

你有一些问题，但没什么大问题。

这是我更改的HTML：

<li><a href="portfolio.aspx">Portfolio</a>
    <ul class="subNav">
        <li><a href="drawings.aspx">Drawings</a></li>
        <li><a href="paintings.aspx">Paintings</a></li>
        <li><a href="digitalmedia.aspx">Digital Media</a></li>
    </ul>
</li>

我添加/更改的CSS：

nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    z-index: 100;
}

nav ul li:hover .subNav { /* This allows the subNav to display block when the li is hovered on */
    display: block;
}

最后，小提琴：Demo

第二个问题为了能够使用margin: 0 auto;对元素进行居中，您需要为元素定义宽度。

或者你可以在text-align: center;使用nav作为Danko建议的，Danko的小提琴：Demo。

您也忘了关闭其中一个标签

<li><a href="digitalmedia.aspx">Digital Media</a></li>

我也建议清理你的CSS，有点乱。

导航栏中的下拉列表未显示并使导航栏出现问题

1 个答案: