个人中心
gpt4 book ai didi

html - 为什么我的 CSS 下拉菜单在底部被截断？

转载 作者：太空宇宙 更新时间：2023-11-04 14:18:51 26 4
gpt4 key购买 nike

JSFiddle 在这里:http://jsfiddle.net/8frfH/2/

如标题所说，为什么下拉菜单被截断了？是因为不同位置的混合，还是因为菜单下的content/div？当您尝试在 Chrome/FF/IE 中使用下拉菜单中的列表项时，会发生这种情况。

HTML

    <body>
        <h1 id="site_title">Frontrunners</h1>
        <div id="main">

            <div id="wrapper"> <!-- DENNE GÅR RUNDT HELE HEADER. UNØDVENDIG IFT. <HEADER>? -->
                <img src="http://i.imgur.com/vilDvFB.jpg" alt="Bakgrundsbilde">
                <header>
                </header>                   

                <nav id="meny" role="navigation">

                    <ul>
                        <li id="hjem"><a href="index.php?&amp;title=Frontrunners%20-%20Training%20program%20for%20everyone">Hjem</a></li>

                        <li id="maraton">Maraton

                            <ul>
                                <li><a href="index.php?page=2&amp;title=Introduksjon%20til%20programmet">Introduksjon</a></li>
                                <li><a href="index.php?page=3&amp;title=Reglene%20for%20FIRST-programmet">Reglene</a></li>
                                <li><a href="index.php?page=4&amp;title=Treningsprogrammet%20for%20%20ditt%20første%20maraton">Treningsprogram</a></li>
                            </ul>

                        </li>

                        <li id="filosofier">Filosofier
                            <ul>
                                <li><a href="index.php?page=5&amp;title=Tempotrening%20kontra%20Pulstrening">Tempo vs Puls</a></li>
                                <li><a href="index.php?page=6&amp;title=Generelt%20om%20kosthold%20fra%20Olympiatoppen">Råd fra Olympiatoppen</a></li>
                            </ul>                  
                        </li>

                        <li id="utstyr">Utstyr

                            <ul>
                                <li><a href="index.php?page=7&amp;title=Minimalisme%20-%20Bare%20foot%20running">Minimalisme</a></li>
                                <li>Utstyr 2</li>
                                <li>Utstyr 3</li>
                            </ul>

                        </li>
                        <li id="om">Om
                            <ul>
                                <li><a href="index.php?page=8&amp;title=Frontrunners%20-%20Kontakt%20oss">Kontakt oss</a></li>
                            </ul>
                        </li>
                    </ul>

                </nav>

            </div>

            <div id="wrapperinnhold">

            <div id="innhold"> <!-- MULIG WRAPPER FOR ALT INNHOLD UTENOM HEADER OG FOOTER -->

<div id="kolonne1">
</div>
<div id="kolonne2">

<article>

    <h2>Idéen</h2>
    <p>
        Alle som driver med sport ønsker å gjøre det best mulig. Kanskje man ikke føler seg drevet av denne tanken, men kan man gjøre noen endringer i teknikk, utstyr, treningsrutiner eller på andre måter endre det man har gjort, uten at det koster for mye, så velger mange å prøve det.

        Denne websiden har tatt som mål av seg å presentere en del aspekter ved trening, kosthold og tilhørende emner som kan være interessante for dem som ønsker å få noen nye ideer og inputs i forhold til sin egen trening.</p>

    <p>
        Vi har tatt utgangspunkt i FIRST maratonprogrammet, samt funnet frem en del kalkulatorer og verktøy for å sitt anbefalte treningstempo, treningssoner og konvertering av miles til kilometer blant annet.</p>
    <h2>Hvordan bruke siden</h2>
    <p>
        Vi har i tillegg til å presentere tekst og informasjon vedrørende trening og omliggende temaer valgt å gi deg som besøkende en rekke verktøy for å hjelpe å beregne paramterene for nettopp deg, slik at du også kan følge disse planene og programmene for en       mer effektiv og god trening frem mot maraton.
    </p>

    </article>

    </div>         
    <div id="kolonne3">

    </div>  

    <div id="aside_right_wrapper">

    <div id="aside_sitat_wrapper">
        <?php
        include './php/quoteGenerator.php';
        getRandomQuote();
        ?>
    </div>


    <div id="aside_forslag">
        <?php
        include "./php/newsGenerator.php";
        getRandomArticlePreviews();
        ?>
    </div>

    </div>





    <footer role="contentinfo">
    <!--<img src="./img/footer.png" alt="Footer-bilde av en løpende dame">-->
    </footer>
    </div> <!-- WRAPPER INNHOLD -->
    </div>  
    </div>  <!--MULIGENS DIV KOLONNER -->

CSS:

@media screen and (min-width: 481px){

body {
        margin: 0;
        padding: 0;
        font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; 
    }

    #site_title{
        /*Denne er for å sette en skjult h1 for WCAG validering*/
        display: none;
    }

    #main {
        background-image:url('../img/footer.png');
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: bottom;
        position: absolute;
    }

    #main_kalk {
        width: 100%;
        background-image:url('../img/footer_kalk.png');
        background-repeat: no-repeat;
        background-size: 100%, 40%;
        background-position: bottom, left;
        position: absolute;
    }

    #wrapperinnhold {
        background-image:url('../img/graphics.jpg');
        background-repeat: no-repeat;
        background-size: 40%;
        /*Kommenterer følgende på grunn av valideringsfeil (Lukas)*/
        background-position: top left;
    }

    #innhold {
        padding-top: 2%;
        margin-left: 7%;
    }

    #mobile{
        display: none;
        visibility: hidden;
    }


    p{
        padding-bottom: 20px;
    }


    h2{
        font-weight: lighter;
        color: #186000;
        background-image: url('../img/h1tag.png');
        background-repeat: no-repeat;
        padding-left: 40px;
        padding-top: 20px;
        height: 80px;
    }


    #aside_forslag h2{
        display: none;
        visibility: hidden;
    }


    #kolonner {

    }

    #kolonne1 {
        width: 160px;
        float: left;
        margin-top: 10px;
        /*margin-bottom: 10px;*/
        /*background-color: #B2E6FF;*/
        position: relative;

    }
    #kolonne2 {

        width: 470px;
        margin-left: 10px;
        margin-top: 10px;
        /*margin-bottom: 10px;*/
        float: left;
        /*background-color: #B2E6FF;*/
        position: relative;
    }

    #kolonne3 {   
        width: 290px;
        margin-left: 10px;
        margin-top: 10px;
        /*margin-bottom: 10px;*/
        float: right;
        /*background-color: white;*/
        position: relative;
    }

    /* VERKTØYMENY START */

    #toolsslide{
        /*    min-height: 200px;
            width: 180px;
            position: fixed;
            top: 330px;
            left: -178px;
            float: left;
            background-color: #7D5D46;
            color: white;
            background-color: white;
            opacity: 0.8;
            border-right-style: solid;
            border-top-style: solid;
            border-bottom-style: solid;
            border-width: 1px;
            padding-left: 5px;*/

    }
    #gjennomsiktigmeny{
        min-height: 200px;
        width: 200px;
        position: fixed;
        top: 330px;
        left: -178px;
        float: left;
        background-color: #7D5D46;
        color: white;
        /*background-color: white;*/
        opacity: 0.8;
        border-right-style: solid;
        border-top-style: solid;
        border-bottom-style: solid;
        border-width: 1px;
        padding-left: 5px;
        box-shadow: 3px 3px 10px #888888;
    }

    #table_tools_div{
        margin-top: 20px;
    }

    #table_tools{
        border-collapse: collapse;
    }

    #table_tools tr{
        height: 23px;
    }

    #table_tools_header{
        font-weight: bold;
    }

    #table_tools a{
        color: white;
        text-align: center;
    }

    #table_tools_V{
        /*Definerer den første bokstaven i side tool menyen*/
        font-size: 15px;
        font-weight: bold;
        font-style: italic;
    }

    .table_tools_standard{
        /*Definerer alle andre bokstaver på side menyen*/
        font-size: 15px;
        font-weight: bold;
        font-style: italic;
    }

    .menutools:hover {
        background: #654C39;
    }

    .menutools {
        width: 180px;
    }

    /* VERKTØYMENY SLUTT */

    footer {
        z-index: -1;
        /*background-image:url('../img/footer.png');*/
        height: 482px;
        clear: both;
    }
    #wrapper {
        /*        background-image: url('../img/blogrunningprog2.jpg');
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-size: 100% 100%;*/
        position: relative;
        /*        width: 100%;
                height: 400px;*/
        /*top: 0; KOMMENTERT UT
        left: 0; KOMMENTERT UT*/ 
        margin: 0% 0% 0% 0%;
        width: 100%;
        /*min-width: 99%; KOMMENTERT UT */

    }

    #wrapper img{
        /*position: relative; KOMMENTERT UT*/
        width: 100%;
    }

    header {
        position: relative; /* ENDRET TIL RELATIVE FRA ABSOLUTE */
        top: 0;
    }

    nav {
        position: absolute;
        bottom: 0;
        text-align: center;
    } 

    #gjennomsiktigmeny a{
        text-decoration: none;
    }

    #meny {
        width: 100%;
        padding-bottom: 10px;
        font-weight: lighter;
    }   

    #meny a{
        font-weight: lighter;
    }

    #meny ul {
        /*display: inline-block;*/
        margin: 0% 0% 0% 0%;
        list-style: none;
        padding-left: 0px;

    }

    #meny li {
        display: inline-block;
        /*background: #FFF;*/
        /*width: 20%; */
        padding: 3px 70px 0px 30px;
        color: #FFF;
        font-size: 20px;
        position: relative;
        /*text-align: center;*/

        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
    }

    #meny ul li a:link {
        color: #FFF;
        text-decoration: none;
        display: block;
    }

    #meny ul li a:visited {
        color: #FFF;
        text-decoration: none;
    }

    #meny ul li:hover {
        /*color: #fff;*/

    }

    #meny ul li ul {
        padding: 0;
        position: absolute;
        display: none;
        opacity: 0;
        visibility: hidden;

        width: 150px;
        left: 0;
        top: 33px;

        -webkit-transiton: opacity 0.2s;
        -moz-transition: opacity 0.2s;
        -ms-transition: opacity 0.2s;
        -o-transition: opacity 0.2s;
        -transition: opacity 0.2s;
    }

    #meny ul li ul li { 
        margin-left: 0px;
        background: #7D5D46; 
        /*display: block; */
        color: #fff;
        width: 150px;
        /*text-shadow: 0 -1px 0 #000;*/
        font-weight: normal;
        clear: both;
    }

    #meny ul li ul li:hover { 
        background: #654C39; 
    }

    #meny ul li:hover ul {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    #headerbottom {

    }

    .vertlinjeh {
        border-color: #D7D7D7;
        border-right-style: solid;
        border-width: 1px;
    }

    .vertlinjev {
        border-color: #D7D7D7;
        border-left-style: solid;
        border-width: 1px;
    }

    .horilinje {
        border-color: #D7D7D7;
        border-bottom-style: solid;
        border-width: 1px;
    }
    /*#bakgrunn_hoyre{

    }*/


    /*Konfigurasjon av aside elementer til høyre*/
    #aside_right_wrapper{
        /*Wraper for alle elementer som er plasert til høyre.*/
        float: left;
        margin-left: 40px;
        width: 260px;
        margin-top: 0px;
    }

    #aside_sitat_wrapper{
        /*Wrapper for all som har med sitat å gjøre*/
        width: 260px;
        height: 100px;
        /*border: 1px solid black;*/
        background-image: url('../img/quote_sign2.gif');
        background-repeat: no-repeat;
        background-position: left top;
        padding-top: 25px;
        padding-left: 10px;
        margin-bottom: 0px;
    }

    #div_quote{
        font-size: 14px;
        font-style: italic;
        color: #666666;
    }

    #div_quote_author{
        margin-top: 5px;
        font-size: 11px;
        font-style: italic;
        text-align: right;
        color: #186000;
        opacity: 0.8;
    }

    #aside_forslag{
        /*Her ligger alle artikkelforslag*/
    }
    .aside_art_prev_header h3{
        font-size: 17px;
        color: #009933;
        padding: 0;
        margin: 0;
        margin-bottom: 10px;
        margin-top: 20px;
    }

    .aside_art_prev_prgf{
        font-size: 12px;
        margin-top: 0px;
        text-align: justify;
        color: #333333;
    }
    .aside_art_prev_link{
        font-size: 12px;
        float: right;
    }

    /*Slutt på konfigurasjon av aside elementer*/
}

感谢您对此的任何帮助!

最佳答案

请参阅解决方案 fiddle :http://jsfiddle.net/8frfH/15/

通过“切断”，如果您的意思是当您尝试将其悬停时子菜单会隐藏，那是因为主 UL 和子 UL 之间有一个空格，例如Maraton -> Introduksjon。由于内部 UL 是绝对定位的，父级 (LI) 框不会延伸到它上面，因此当您移动鼠标时，它实际上失去了 :hover。

试试这个，调整内部 UL 的顶部使其接触 LI

#meny ul li ul {
   ...
   ...
   top: 25px;
}

如果您不想移动 UL，您可以向 UL 添加填充以使其框“变大”几个像素:

#meny li {
    ...
    ...
    padding-bottom: 8px;
}

另外不要忘记向内部 UL 添加一个 z-index，以便它覆盖您的主要内容。

关于html - 为什么我的 CSS 下拉菜单在底部被截断？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20101249/

26 4 0
文章推荐： CSS 表格/表格单元格和填充？
文章推荐： javascript - jquery 简单的计算脚本需要很少的帮助
文章推荐： html - 两个显示表格单元格之间的边距
文章推荐： html - 并非我所有的 CSS 都适用于 IE
太空宇宙
个人简介

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

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