个人中心
gpt4 book ai didi

html - 当我的下拉元素出现时，所有内容都被向下推

转载 作者：太空宇宙 更新时间：2023-11-03 22:59:49 24 4
gpt4 key购买 nike

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

我的 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"> )上时，我该如何做到这一点，下拉列表不会下推下面的元素？

最佳答案

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

nav{
   height: 20px;
}

关于html - 当我的下拉元素出现时，所有内容都被向下推，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36993432/

24 4 0
文章推荐： c++ - 如何使用 OpenCv 中的背景减法测量移动车速
文章推荐： java - Opencv Imgproc.HoughLines() 调整长度参数
文章推荐： html - Div 不覆盖页面的整个宽度
文章推荐： c# - 如何使用 StreamReader 分块加载大文件？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com