Исправление подменю для ребенка для одного выпадающего меню - PullRequest
Новая
       53

Исправление подменю для ребенка для одного выпадающего меню

0 голосов
/ 27 сентября 2019

Здравствуйте, пожалуйста, мне нужна помощь в создании дочернего подменю, которое будет видно при наведении курсора мыши на «Accesorii Gaming», его дочернее подменю:

Ochelari VR GamingГеймпад / КонтроллерВолянCasti ConsoleПотоковое

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

Спасибо за вашу поддержку

HTML + CSS3 здесь: https://codepen.io/tosasilviu/pen/vYBMWyM

или ниже ... 

* {
    margin: 0;
    padding: 0; 
}

li {
    list-style: none;
}


.font-produse-h {
    font-family: "Bungee";
    font-size: 45px;
    text-shadow: 3px 3px 0px #08b870;
    color: #000;
    margin: 50px 0 20px 50px;
}

/* Menu Container */
.navigation {
    display: inline-block;
    position: relative;
    z-index: 10;
    margin-left: 50px;
}

/* Menu List */
.navigation > li {
    display: block;
    float: left;
}

/* Menu Links */
.navigation > li > a {
    position: relative;
    display: block;
    z-index: 20;
    width: 130px;
    height: 54px;
    padding: 0 20px;
    line-height: 54px;
    font-family: "Quicksand";
    font-weight: bold;
    font-size: 15px;
    color: #fcfcfc;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.35);
    background: #08b870;
    border-left: 1px solid #06e187;
    text-align: center;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;  
}

.navigation > li:hover > a {
    background: #0b8452;
}

.navigation > li:first-child > a {
    border-radius: 6px 0px 0px 6px;  
    border-left: 0px;
}

.navigation > li:last-child > a {
    border-radius: 0px 6px 6px 0px;   
}

/* Menu Dropdown */
.navigation > li > div {
    position: absolute;
    display: block;
    color: #fff;
    width: 170px;
    top: 50px;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    background: #0b8452;
    border-radius: 0 0 3px 3px;
    -webkit-transition: all 0.3s ease 0.15s;
    -moz-transition: all 0.3s ease 0.15s;
    -o-transition: all 0.3s ease 0.15s;
    -ms-transition: all 0.3s ease 0.15s;
    transition: all 0.3s ease 0.15s;    
}

/* Menu Dropdown Child */
.navigation-child {
    position: absolute;
    width: 170px;
    left: 170px;
    top: 74px;
    display: none;
}

.navigation-column-child {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    font-family: "Quicksand";
    display: block;
    padding: 17px 0 17px 0;
    text-align: center;
    border-bottom: 1px solid #085b39;  
}

.navigation-column-link {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    font-family: "Quicksand";
    display: block;
    padding: 17px 0 17px 0;
    text-align: center;
    border-bottom: 1px solid #085b39;
}

li:hover > a {
    background: #045030;
}

.navigation-column {
    margin-top: 20px;
    
}

.navigation > li:hover > div {
    opacity: 1;
    visibility: visible;
    overflow: visible;
}

















    
<!DOCTYPE html>
<html lang="ro">
<head>
    <title>Meniu CSS Dropdown</title>
    <link rel="stylesheet" href="css/style.css" />
    <link href="https://fonts.googleapis.com/css?family=Bungee&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
</head>
<body>
    <h1 class="font-produse-h">Produse</h1>
        <ul class="navigation">
            <li>
                <a href="#">Gaming</a>
                <div>
                    <div class="navigation-column">
                        <ul>
                            <li><a class="navigation-column-link" href="#">Console Gaming</a></li>
                            <li><a class="navigation-column-child" href="#">Accesorii Gaming</a>
                                <ul class="navigation-child">
                                    <li><a class="navigation-column-link" href="#">Ochelari VR Gaming</a></li>
                                    <li><a class="navigation-column-link" href="#">Gamepad / Controler</a></li>
                                    <li><a class="navigation-column-link" href="#">Volane</a></li>
                                    <li><a class="navigation-column-link" href="#">Casti Console</a></li>
                                    <li><a class="navigation-column-link" href="#">Streaming</a></li>
                                </ul>
                            </li>
                            <li><a class="navigation-column-link" href="#">Scaune Gaming</a></li>
                            <li><a class="navigation-column-link" href="#">Licente Electronice</a></li>
                            <li><a class="navigation-column-link" href="#">Jocuri Console &amp; PC</a></li>
                            <li><a class="navigation-column-link" href="#">PC Gaming</a></li>
                            <li><a class="navigation-column-link" href="#">Accesorii PC</a></li>
                            <li><a class="navigation-column-link" href="#">Resigilate</a></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li><a href="#">Gaming 2</a></li>
            <li><a href="#">Gaming 3</a></li>
            <li><a href="#">Gaming 4</a></li>
            <li><a href="#">Gaming 5</a></li>
        </ul>


</body>
</html>

1 Ответ

0 голосов
/ 27 сентября 2019

Вы на правильном пути.Вы можете пойти глубже в селекторе css, чтобы сделать оператор hover для каждого элемента навигации и изменить любой код, который вы хотите оттуда, чтобы отобразить дочерний элемент ul.Простой пример ниже: 

.navigation li ul li:hover ul {
  display: block;
}
...