【问题标题】:HTML/CSS dropdown menu hiding other dropdown menuHTML/CSS 下拉菜单隐藏其他下拉菜单
【发布时间】:2021-07-01 05:50:34
【问题描述】:

这是我正在开发的网站,我正在尝试开发一个计算器,根据您尝试使用的主题和方程式,计算器会给您答案。

我制作了两个下拉菜单,但是,当我将鼠标悬停在“物理”菜单上时,由于某种原因,“数学”菜单被覆盖了。另外,“物理”的列表有点太长了,我想做一个滚动条,但不知道怎么做。

我尝试查看 w3schools 和其他资源,但找不到解决我问题的解决方案。

.redirect:hover{background-color:#aac8ff;}
div{background-color:#ccd9fb;}
h1{font-size: 20px; padding-left:10px;}
.dropdown-content a{background-color:#aac8ff}
.container:hover .dropdown-content{display:block}
.dropdown-content a:hover {background-color: #99b7ff;}
li.container{display:inline}
li{display:inline;}

body {
    background-color: #eefbfb;
    font-family: 'Inconsolata', monospace;
}

.top h1, .top ul{
    display: inline-block;
    vertical-align:top;
}

.redirect{
    text-decoration:none;
    font-size:20px;
    display:block;
    float: right;
    color: #fff;
    width:125px;
    text-align:center;
    border-left:1px solid #eefbfb;
    padding: 14px;
}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    float:right;
}

.dropdown-content{
    display:none;
    z-index:1;
    min-width:auto;
    max-width:155px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    background-color:#99b7ff;
}

.dropdown-content a{
    color:#fff;
    display:block;
    padding: 10px 13px;
    text-decoration:none;
    text-align: center;
}
<body>
            <div class="top">
                <h1>123Calculator</h1></span>
                <ul>
                    <li><a class="redirect" href="equations.html">Equations</a></li>
                    <li class="container">
                        <a class="redirect" href="physics.html">Physics</a>
                        <div class="dropdown-content">
                            <a href="Physics/1.PhotNEnLvl.html">Phontons and Energy levels</a>
                            <a href="Physics/2.Waves.html">Waves</a>
                            <a href="Physics/3.Mech.html">Mechanics</a>
                            <a href="Physics/4.Mat.html">Materials</a>
                            <a href="Physics/5.Elect.html">Electricity</a>
                            <a href="Physics/6.CircMot.html">Circular Motion</a>
                            <a href="Physics/7.SimpHarMot.html">Simple Harmonic Motion</a>
                            <a href="Physics/8.TherPhy.html">Thermal Physics</a>
                            <a href="Physics/9.GravFie.html">Gravitational Fields</a>
                            <a href="Physics/10.ElecFieNCap.html">Electric Fields and Capacitors</a>
                            <a href="Physics/11.MagFie.html">Magnetic Fields</a>
                            <a href="Physics/12.NukePhy.html">Nuclear Physics</a>
                            <a href="Physics/13.Astro.html">Astrophysics</a>
                            <a href="Physics/14.MedPhy.html">Medical Physics</a>
                            <a href="Physics/15.EngPhy.html">Engineering Physics</a>
                            <a href="Physics/16.TurnPInPhys.html">Turning Points in Physics</a>
                            <a href="Physics/17.Electronics.html">Electronics</a>
                        </div>
                    </li>
                    <li class="container">
                        <a class="redirect" href="maths.html">Maths</a>
                        <div class="dropdown-content">
                            <a href="Maths/1.AlgExpr.html">Algebraic Expressions</a>
                            <a href="Maths/2.EqNIn.html">Equations and Inequalities</a>
                            <a href="Maths/3.SkeCur.html">Sketching Curves</a>
                            <a href="Maths/4.ymaxc.html">Equations of Straight Lines</a>
                            <a href="Maths/5.circles.html">Circles</a>
                            <a href="Maths/6.trig.html">Trigonometry</a>
                            <a href="Maths/7.ExpNLog.html">Exponentials and Logarithms</a>
                            <a href="Maths/8.Diff.html">Differentiation</a>
                            <a href="Maths/9.Integ.html">Integration</a>
                            <a href="Maths/10.vect.html">Vectors</a>
                            <a href="Maths/11.proof.html">Proof</a>
                            <a href="Maths/12.kinem.html">Kinematics</a>
                            <a href="Maths/13.forces.html">Forces</a>
                        </div>
                    </li>
                </ul>
            </div>
</body>

【问题讨论】:

    标签: javascript html css hyperlink


    【解决方案1】:

    您的代码中有很多错误。就像在li 中一样,您将css 设置为display: inline;;以及您没有给出任何位置的子菜单,例如position: absolute;

    我已在下面应用我的更改。

    稍后谢谢我。

    .redirect:hover{background-color:#aac8ff;}
    div{background-color:#ccd9fb;}
    h1{font-size: 20px; padding-left:10px;}
    .dropdown-content a{background-color:#aac8ff}
    .container:hover .dropdown-content{transform: scaleY(1);}
    .dropdown-content a:hover {background-color: #99b7ff;}
    li.container{display:inline-block;position:relative;}
    li{display:inline-block;}
    
    body {
        background-color: #eefbfb;
        font-family: 'Inconsolata', monospace;
    }
    
    .top h1, .top ul{
        display: inline-block;
        vertical-align:top;
    }
    
    .redirect{
        text-decoration:none;
        font-size:20px;
        display:block;
        float: right;
        color: #fff;
        width:125px;
        text-align:center;
        border-left:1px solid #eefbfb;
        padding: 14px;
    }
    
    ul{
        list-style-type: none;
        margin: 0;
        padding: 0;
        float:right;
    }
    
    .dropdown-content{
        z-index:1;
        min-width:auto;
        max-width:155px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        background-color:#99b7ff;
      position: absolute;
      top: 100%;
      left:0;
      transition: .3s linear;
      transform-origin: top;
      transform: scaleY(0);
      max-height: 400px;
      overflow: auto;
    }
    
    .dropdown-content a{
        color:#fff;
        display:block;
        padding: 10px 13px;
        text-decoration:none;
        text-align: center;
    }
    <body>
                <div class="top">
                    <h1>123Calculator</h1></span>
                    <ul>
                        <li class="container">
                            <a class="redirect" href="physics.html">Physics</a>
                            <div class="dropdown-content">
                                <a href="Physics/1.PhotNEnLvl.html">Phontons and Energy levels</a>
                                <a href="Physics/2.Waves.html">Waves</a>
                                <a href="Physics/3.Mech.html">Mechanics</a>
                                <a href="Physics/4.Mat.html">Materials</a>
                                <a href="Physics/5.Elect.html">Electricity</a>
                                <a href="Physics/6.CircMot.html">Circular Motion</a>
                                <a href="Physics/7.SimpHarMot.html">Simple Harmonic Motion</a>
                                <a href="Physics/8.TherPhy.html">Thermal Physics</a>
                                <a href="Physics/9.GravFie.html">Gravitational Fields</a>
                                <a href="Physics/10.ElecFieNCap.html">Electric Fields and Capacitors</a>
                                <a href="Physics/11.MagFie.html">Magnetic Fields</a>
                                <a href="Physics/12.NukePhy.html">Nuclear Physics</a>
                                <a href="Physics/13.Astro.html">Astrophysics</a>
                                <a href="Physics/14.MedPhy.html">Medical Physics</a>
                                <a href="Physics/15.EngPhy.html">Engineering Physics</a>
                                <a href="Physics/16.TurnPInPhys.html">Turning Points in Physics</a>
                                <a href="Physics/17.Electronics.html">Electronics</a>
                            </div>
                        </li>
                        <li class="container">
                            <a class="redirect" href="maths.html">Maths</a>
                            <div class="dropdown-content">
                                <a href="Maths/1.AlgExpr.html">Algebraic Expressions</a>
                                <a href="Maths/2.EqNIn.html">Equations and Inequalities</a>
                                <a href="Maths/3.SkeCur.html">Sketching Curves</a>
                                <a href="Maths/4.ymaxc.html">Equations of Straight Lines</a>
                                <a href="Maths/5.circles.html">Circles</a>
                                <a href="Maths/6.trig.html">Trigonometry</a>
                                <a href="Maths/7.ExpNLog.html">Exponentials and Logarithms</a>
                                <a href="Maths/8.Diff.html">Differentiation</a>
                                <a href="Maths/9.Integ.html">Integration</a>
                                <a href="Maths/10.vect.html">Vectors</a>
                                <a href="Maths/11.proof.html">Proof</a>
                                <a href="Maths/12.kinem.html">Kinematics</a>
                                <a href="Maths/13.forces.html">Forces</a>
                            </div>
                        </li>
                    </ul>
                </div>
    </body>

    【讨论】:

    • 非常感谢!!这看起来也更好!
    猜你喜欢
    • 2018-10-13
    • 1970-01-01
    • 1970-01-01
    • 2012-04-20
    • 2016-08-15
    • 1970-01-01
    • 1970-01-01
    • 2018-08-18
    • 2014-03-31
    相关资源
    最近更新 更多