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

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

我的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">）下拉列表将不会推下面的元素？

来源

2016-05-02 The Awesome Nerd

你应该真的用嵌套的ul> ul元素构建它，使用position：absolute;在孩子们身上。 –

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

nav{ 
    height: 20px; 
}

来源

2016-05-02 23:59:23

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

回答

相关问题