Выпадающее меню HTML / CSS, скрывающее другое выпадающее меню

Это мой веб-сайт, который я разрабатываю, и я пытаюсь разработать калькулятор, который в зависимости от предмета и уравнения, которое вы пытаетесь использовать, даст вам ответ.

Я сделал два выпадающих меню, однако при наведении курсора на меню «Физика» почему-то закрывается меню «Математика». Кроме того, список «Физика» слишком длинный, и я хотел сделать полосу прокрутки, но не знаю, как это сделать.

Я попытался посмотреть 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

05.04.2021 13:48

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Большое спасибо!! это тоже выглядит лучше!

— 05.04.2021 14:51

05.04.2021 14:21