Question

在我的网站上，我有一个带有一些标签的导航栏。每次将鼠标悬停在选项卡上时，都会显示一个下拉列表。当下拉列表出现时，导航栏下方的元素会被按下。

我的HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Awesome Games Online</title>
        <link rel="stylesheet" type="text/css" href="games.css">
        <link rel='icon' type="image/PNG" href="favicon.png">
        <meta name="keywords" content="Games,free,fun,awesome,html5">
        <meta name="description" content="Awesome Games Online For You! Play Some Free Online Games!">
    </head>
    <body>
        <header>
            <h1>Awesome Games Online</h1>
            <nav>
                <div class="games">
                    <a href="#">Games</a>
                    <a href="pixeljump" class="hidden alpha">PixelJump <span>(beta)</span></a>
                    <a class="hidden dev" href='candycraft'>Candy Craft <span>(in development)</span></a>
                    <a class="hidden dev" href="crashed_stranded">Crashed&Stranded <span>(in development)</span></a>
                    <a class="hidden coming" href='pixelgravity'><span>Coming Soon!</span> Pixel Gravity</a>
                    <a class="hidden planned" href='nyanclicker'><span>Planned!</span> Nyan Clicker</a>
                    <a class="hidden planned" href='pixelcraft'><span>Planned!</span> Pixel Craft</a>
                    <a class="hidden planned" href='pixeldestroy'><span>Planned!</span> Pixel Destroy</a>
                    <a class="hidden planned" href='pixeldash'><span>Planned!</span> Pixel Dash</a>
                    <a class="hidden planned" href='pixelbounce'><span>Planned!</span> Pixel Bounce</a>
                    <a class="hidden planned" href='pixelchop'><span>Planned!</span> Pixel Chop</a>
                    <a class="hidden planned" href='pixelchase'><span>Planned!</span> Pixel Chase</a>
                </div>
                <div class="social">
                    <a href="#">Social / News</a>
                    <a href="https://plus.google.com/+Awesomegamesonlinepage/" class="hidden google">Google+</a>
                    <a href="http://awesomegamesonline.github.io" class="hidden github">Github</a>
                </div>
                <div class="misc">
                    <a href="misc">Miscellaneous</a>
                    <a href="misc/cool_shapes.html" class="hidden geom">Play with cool shapes</a>
                </div>
            </nav>
        </header>
        <p>
        Hello. I like to make games.<br>
        Here you can play games I and others (in collaboration) made.
        Have fun playing games!
        Start by hovering over the Games tab.
        </p>
        <!--
        <p>
            View the <a href="/store">store</a> (not ready)
        </p>
        <p>
            The <a href="/forum">forums</a> are not open yet. Sorry for your inconvienence.
        </p>
        -->
        <p style="color: brown">
            &copy;theawesomenerd, &copy;swacky, &copy;kaya123 Copyright 2015-2016. Awesome Games Online.
        </p>
    </body>
</html>

我的CSS：

body {background-color:#DEDEDE; text-align: center}
p {color:#339933}
a, h1 {font-weight:bold;color:#44CC00; text-decoration: none; font-family: sans-serif}
h1 {font-size: 400%}
nav a {display: block}
nav > h1 {vertical-align: top; display: inline-block}
nav > div {display: inline-block; vertical-align: top; margin: 0; border: 0; height: 5%}
nav > div.games {width: 20%}
nav > div.social {width: 20%}
nav > div.misc {width: 20%}
nav > div > a {padding: 5px; background-color: #EEFFEE}
nav > div > a.hidden {display: none; text-align: left}
nav > div > a.hidden:hover {background-color: #DDEEDD}
nav > div:hover > a.hidden {display: block; opacity: 0.9}
a:hover {text-decoration:none;}
a:active {color:red}
a.bottomlink {color:#3399CC}
a.bottomlink:hover {color:#44AADD}
a.bottomlink:active {font-weight:bold;color:#2688B9}
.alpha > span {color: green}
.dev > span {color: #CCCC00}
.coming > span {color: #00CCCC}
.planned > span {color: #660066}
.alpha:active {color: yellow}
.dev:active {color: orange}
.coming:active {color: blue}
.planned:active {color: pink}

如何将其设置为当我将鼠标悬停在每个标签上（例如<div class="games">）时，下拉列表不会按下下面的元素？

Answer 1

您需要在nav上设置一个高度。这是一个fiddle。

nav{
   height: 20px;
}

当我的下拉元素出现时，一切都被推下来了

1 个答案: