Положение и открытие моего подменю неверно - PullRequest
1 голос
/ 24 сентября 2019

Я пытаюсь создать сайт, и мне нужно многоуровневое подменю.Сейчас я сталкиваюсь с двумя проблемами:

  1. Я не знаю, как правильно разместить подменю.Оно должно появиться рядом с подменю на той же высоте, что и предыдущий пункт меню, и отобразить список вниз.

  2. Я не знаю, как установить, что подменю расширяется, только если янаведите курсор на соответствующий пункт подменю.Код, который я использую, прилагается ниже.

Буду признателен, если будет изменен только CSS, потому что сайт работает с программой, которая создает HTML Код здесь: https://jsfiddle.net/TheBB23/Luxrakzq/

        body {
            margin: 0;
            padding: 0;
            background: #ccc;
            color: #00782E;
            font-family: Arial, Helvetica, sans-serif;
        }
        
        /* Header Leiste */
        .nav{
            width: 100%;
            height: 70px;
            background: #00782E;
            position: fixed;
            z-index: 2;
        }

    /* Hintergrund für Obermenüpunkte */
    .nav ul {
        width: 60%;
        height: 70px;
        list-style: none;
        background: none;
        text-align: center;
        padding: 0;
        margin-top: 0px;
        margin-left: 25%;
        margin-right: 15%;
        position: fixed;
    }
    
    /* Position Menüoberpunkte */
    .nav li {
        line-height: 20px;
        display: inline-block;
    }
    
    /* Style Menüoberpunkte */
    .nav a{
        text-decoration: none;
        color: white;
        width: auto;
        display: block;
        padding-top: 25px;
        padding-right: 10px;
        padding-left: 10px;
        padding-bottom: 5px;
        font-size: 20px;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
    }
    
    .menulist {
        display: none;
    }
    
    dropdown-content ul {
        display: none;
    }
    
    
    /*  Untermenü bei Hovern anzeigen*/
    .dropdown:hover .menulist.menulist{
        display: block;
        margin-left: 0;
        text-align: left;
        width: 200px;
        height: auto;
        padding-top: 6px;
        padding-bottom: 6px;
        list-style: none;
        margin-right: 0;
        position: fixed;
        background: white;
    }
    
    .menulist .menulist {
        background-color: red !important;
        width: 280px !important;
    }
    
    .dropdown:hover .dropdown-content ul ul {
        display: none;
    }
    
    .menulist ul:hover .dropdown-content ul ul {
        display: block !important;
    }
    
    /* Untermenüpunkte erster Ordnung Style*/
    .menulist a {
        color: #00782E;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        line-height: 12px;
        font-weight: 500;
        width: 150px;
        padding-left: 16px;
        padding-top: 10px;
        padding-bottom: 10px;
        text-decoration: none;
        display: block;
        text-align: left;
    }
    
    .menulist .menulist a {
        font-size: 15px;
        padding-top: 6px,
        padding-bottom: 6px;
        margin-right: 0px;
        padding-right: 0px;
        padding-left: 6px;
    }
    
    /* Abstand Untermenütext 1 zum Kasten */
    .menulevel1 {
        margin-left: 6px;
    }
    
    /* Untermenüpunkte 2. Ordnung Style */
    .dropdown-menu a {
        color: #00782E;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        line-height: 12px;
        font-weight: 500;
        width: 150px;
        padding-left: 16px;
        padding-top: 1px;
        padding-bottom: 1px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    li a:hover, .dropdown:hover .dropbtn {
        color: lightgrey !important;
    }
<!DOCTYPE html>
<html>
    <head>
    </head>
    
    <body>
        <div class ="nav">
            <ul>
                <li class="dropdown">
                    <a href="animals" class="dropbtn">Animals</a>
                    <div class = "dropdown-content">
                        <ul class="menulist">
                            <li class="menulevel1">
                                <a class=" " href="lion">Lion</a>
                            </li>
                            <li class="menulevel1">
                                <a class=" " href="cat">cat</a>
                            </li>
                            <li class="menulevel1">
                                <a class=" " href="monkey">monkey</a>
                            </li>
                            <li class="menulevel1">
                                <a class=" " href="cow">cow</a>
                            </li>
                            <li class="menulevel1">
                                <a class=" " href="sheep">sheep</a>
                            </li>
                            <li class="menulevel1">
                                <a class=" " href="rat">rat</a>
                            </li>
                        </ul>
                    </div>
                </li>
                
                <li class="dropdown">
                    <a href="names" class="dropbtn">names</a>
                    <div class = "dropdown-content">
                        <ul class="menulist">
                            <li class="menulevel1">
                                <a class=" " href="Pete">Pete</a>
                            </li>
                            <li class="menulevel1">
                                <a class=" " href="Finley">Finley</a>
                            </li>
                            <li class="menulevel1">
                                <a class=" " href="#">Jordan <span class="Jordan"></span></a>
                                <ul class="menulist">
                                    <li class="menulevel2">
                                        <a class=" " href="calvin">Calvin</a>
                                        <li class="menulevel2">
                                            <a class=" " href="harry">harry</a>
                                        </li>
                                        
                                        </ul>
                            </li>
                            <li class="menulevel1">
                                <a class=" " href="george">george</a>
                            </li>
                            
                        </ul>
                    </div>
                </li>
            </ul>
        </body>
    
</html>

Спасибо за помощь

...