Question

我已经试图解决这个问题很长一段时间了，但我似乎无法解决这个问题。

我创建了下拉菜单，但是当它下降时，它被MAIN部分覆盖，因此不会显示。此外，我的页脚未显示在页面底部。

我在页面的每个部分都使用了clear:both，但页脚显示在aside部分而不是main部分。

Situation explained

HTML代码

 <!DOCTYPE html>
    <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>News</title>
            <link rel="stylesheet" type="text/css" href="style.css">
            <!--[if lt IE 9]>
            <script>
                document.createElement(“article”);
                document.createElement(“aside”);
                document.createElement(“footer”);
                document.createElement(“header”);
                document.createElement(“main”);
                document.createElement(“nav”);
                document.createElement(“section”);
            </script>
            <![endif]-->
        </head>
        <body>
            <header class="banner">
                <h1>News</h1>
                <p>Local and National News</p>
            </header>

            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li>
                        <a href="archive.html">Archives</a>
                        <ul>
                            <li><a href="January.html">January</a></li>
                            <li><a href="February.html">February</a></li>
                            <li><a href="March.html">March</a></li>
                        </ul>
                    </li>
                    <li><a href="about.html">About</a></li>
                </ul>
            </nav>

            <main class = "content">
                <section>
                    <h2>Local News</h2>
                    <article>
                        <header>
                            <h3>Fire fighters rescue man from building</h3>
                            <p>(author, date)</p><br>
                        </header>
                        <p>This is the story text. This is the story text.</p>
                        <p>This is the story text. This is the story text.</p>
                    </article>

                    <article>
                        <header>
                            <h3>New Library to be built</h3>
                            <p>(author, date)</p> <br>
                        </header>
                        <p>This is the story text. This is the story text.</p>
                        <p>This is the story text. This is the story text.</p>
                    </article>
                </section>

                <section>
                    <h2>National News</h2>
                    <article>
                        <header>
                        <h3>Snow storm is making travel difficult</h3>
                        <p>(author, date)</p><br>
                        </header>
                        <p>This is the story text. This is the story text.</p>
                        <p>This is the story text. This is the story text.</p>
                    </article>

                    <article>
                        <header>
                            <h3>Thousands are without power</h3>
                            <p>(author, date)</p><br>
                        </header>
                        <p>This is the story text. This is the story text.</p>
                        <p>This is the story text. This is the story text.</p>      
                    </article>
                </section>

            </main>


            <aside class = "content">
                <section class="reporter">
                    <h2>Be a news reporter!</h2>
                    <p>If you see news happening - <br>Send us a Text!</p>
                </section>
                <section class="bell">
                    <h2>Bell Canada</h2>
                    <article>
                        <header>
                            <h3>We have new phones coming out!
                        </header>
                        <p> Samsung Galaxy S5!</p>
                        <p> iPhone 6! </p>
                    </article>
                </section>
            </aside>

            <footer class = "content">
                <p>Footer Information</p>
            </footer>

        </body>
    </html>

CSS代码

@charset "UTF-8"

article, aside, footer, header, main, nav, section {
    display: block;
}

html, body, h1, h2, h3, ul, li, a, p,
article, aside, footer, header, main, nav, section {
    padding: 0;
    margin: 0;
}

.banner {
    background-color: #11233b;
    color: white;
    padding: 10px 20px;  
}

nav{
    background-color: #20416c;
    color: white;
    padding: 0px 0px 30px 0px;
}

nav a {
    text-decoration: none;
    color: white;
}

nav li ul li {
    float: left;
    text-align: center;
    padding-left: 15px;
    width: 100px;
    border-top: 1px solid white;
    display: block;
}

nav li{
    width: 100px;
    float: left;
    text-align: center;
    position: relative;
    background-color: #20416c;
    border-right: 1px solid white;
    padding-right: 15px;
    padding-left: 15px;
    height: 30px;
    line-height: 30px;
}

nav li ul {
    position: absolute;
    top: 30px;
    left: 0px;
    background-color: #20416c;
    display: block;
    visibility: hidden;
}

nav ul li:hover ul {
    visibility: visible;
    display: block;
}

nav li:hover {
    background-color:maroon;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

li a{
    color: white;
}

li {
    display: inline;
    font-size: 17px;
    font-variant: small-caps;
    font-weight: bold;
}

body {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    background-color: #f0f0f0;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
}

section {
    background-color: #bbbbbb;
    margin-top: 10px;
    padding: 5px;
}

article {
    background-color: white;
    margin-top: 5px;
    padding: 10px 15px;
}

main {
    position: absolute;
    width: 640px;
    float: left;
    margin-bottom: 10px;
    margin-top: 0px;
}

aside {
    clear: both;
    position: relative;
    background-color: #bbbbbb;
    width: 270px;
    float: right;
    padding: 20px;
    margin-top: 0px;
}

aside section.reporter p {
    padding: 10px;
    background-color: white;
}

aside section.bell p {
    padding-top: 5px;
    background-color: white;
}

aside section {
    background-color: #888888;
    margin-top: 10px;
}

.content{
    clear: both;
}

footer {
    margin-top: 10px;
    position: relative;
    clear: both;
    background-color: #20416c;
    color: white;
    padding: 5px 20px;
}

Answer 1

更改z-index可以起作用，但是，它确实没有解决问题的根源。

＆＃34; main＆＃34;元素绝对是不必要的;或者在我看来。如果您对CSS进行了以下更改，则无需更改z-index。

main {
    /* REMOVED: position: absolute;*/
    width: 640px;
    float: left;
    margin-bottom: 10px;
    margin-top: 0px;
}

aside {
    /* REMOVED: clear: both;
    position: relative;*/
    background-color: #bbbbbb;
    width: 270px;
    float: right;
    padding: 20px;
    margin-top: 0px;
}

.content{
    /* REMOVED: clear: both;*/
}

http://jsfiddle.net/JjwMw/4/

还修复了页脚问题。

CSS下拉菜单和页脚

HTML代码

CSS代码

1 个答案: