Всегда показывать подменю

Question

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

p, 
 
ul, 
 
li, 
 
div, 
 
nav { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
body { 
 
    font-family: Calibri; 
 
} 
 
#menu { 
 
    overflow: auto; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 
.parent-menu { 
 
    background-color: #0c8fff; 
 
    min-width: 200px; 
 
    float: left; 
 
} 
 
#menu ul { 
 
    list-style-type: none; 
 
} 
 
#menu ul li a { 
 
    padding: 10px 15px; 
 
    display: block; 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
#menu ul li a:hover { 
 
    background-color: #007ee9; 
 
} 
 
#menu ul li:hover > ul { 
 
    left: 200px; 
 
} 
 
#menu ul li > ul { 
 
    position: absolute; 
 
    background-color: #333; 
 
    top: 0; 
 
    left: -200px; 
 
    min-width: 200px; 
 
    z-index: -1; 
 
    height: 100%; 
 
} 
 
#menu ul li > ul li a:hover { 
 
    background-color: #2e2e2e; 
 
}

<nav id="menu"> 
 

 
    <ul class="parent-menu"> 
 

 
    <li><a href="#">Home & Kitchen</a> 
 

 
     <ul> 
 

 
     <li><a href="#">item</a> 
 
     </li> 
 

 
     <li><a href="#">item</a> 
 
     </li> 
 

 
     <li><a href="#">item</a> 
 
     </li> 
 

 
     <li><a href="#">item</a> 
 
     </li> 
 

 
     <li><a href="#">item</a> 
 
     </li> 
 

 
     <li><a href="#">item</a> 
 
     </li> 
 

 
     </ul> 
 

 
    </li> 
 

 
    <li><a href="#">Electronics</a> 
 

 
     <ul> 
 

 
     <li><a href="#">item</a> 
 
     </li> 
 

 
     <li><a href="#">item</a> 
 
     </li> 
 

 
     <li><a href="#">item</a> 
 
     </li> 
 

 
     <li><a href="#">item</a> 
 
     </li> 
 

 
     <li><a href="#">item</a> 
 
     </li> 
 

 
     </ul> 
 
    </li> 
 

 
    <li><a href="#">Clothing</a> 
 

 
     <ul> 
 

 
     <li><a href="#">item</a> 
 
     </li> 
 

 
     <li><a href="#">item</a> 
 
     </li> 
 

 
     <li><a href="#">item</a> 
 
     </li> 
 

 
     <li><a href="#">item</a> 
 
     </li> 
 

 
     </ul> 
 
    </li> 
 

 
    <li><a href="#">Cars & Motorbikes</a> 
 

 
     <ul> 
 

 
     <li><a href="#">item</a> 
 
     </li> 
 

 
     <li><a href="#">item</a> 
 
     </li> 
 

 
     <li><a href="#">item</a> 
 
     </li> 
 

 
     <li><a href="#">item</a> 
 
     </li> 
 

 
     </ul> 
 

 
    </li> 
 

 
    <li><a href="#">Books</a> 
 

 
     <ul> 
 

 
     <li><a href="#">item</a> 
 
     </li> 
 

 
     <li><a href="#">item</a> 
 
     </li> 
 

 
     <li><a href="#">item</a> 
 
     </li> 
 

 
     <li><a href="#">item</a> 
 
     </li> 
 

 
     </ul> 
 

 
    </li> 
 

 
    <li><a href="#">Support</a> 
 

 
     <ul> 
 

 
     <li><a href="#">Contact Us</a> 
 
     </li> 
 

 
     <li><a href="#">Forum</a> 
 
     </li> 
 

 
     <li><a href="#">Deliveries</a> 
 
     </li> 
 

 
     <li><a href="#">T&C</a> 
 
     </li> 
 

 
     </ul> 
 

 
    </li> 
 

 
    </ul> 
 

 
</nav>

Answer 1

Выполните следующие действия:

1. Добавить .active класс, который так же, как :hover.
2. Добавить class="active" в зависимости от того, что будет <li>, вы хотите оставить его отображаемым.

Книги Всегда активно

p, 
 
ul, 
 
li, 
 
div, 
 
nav { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
body { 
 
    font-family: Calibri; 
 
} 
 
#menu { 
 
    overflow: auto; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 
.parent-menu { 
 
    background-color: #0c8fff; 
 
    min-width: 200px; 
 
    float: left; 
 
} 
 
#menu ul { 
 
    list-style-type: none; 
 
} 
 
#menu ul li a { 
 
    padding: 10px 15px; 
 
    display: block; 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
#menu ul li.active a, 
 
#menu ul li a:hover { 
 
    background-color: #007ee9; 
 
} 
 
#menu ul li.active > ul, 
 
#menu ul li:hover > ul { 
 
    left: 200px; 
 
} 
 
#menu ul li > ul { 
 
    position: absolute; 
 
    background-color: #333; 
 
    top: 0; 
 
    left: -200px; 
 
    min-width: 200px; 
 
    z-index: -1; 
 
    height: 100%; 
 
} 
 
#menu ul li > ul li a:hover { 
 
    background-color: #2e2e2e; 
 
}

<nav id="menu"> 
 
    <ul class="parent-menu"> 
 
    <li><a href="#">Home & Kitchen</a> 
 
     <ul> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Electronics</a> 
 
     <ul> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Clothing</a> 
 
     <ul> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Cars & Motorbikes</a> 
 
     <ul> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="active"><a href="#">Books</a> 
 
     <ul> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Support</a> 
 
     <ul> 
 
     <li><a href="#">Contact Us</a></li> 
 
     <li><a href="#">Forum</a></li> 
 
     <li><a href="#">Deliveries</a></li> 
 
     <li><a href="#">T&C</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

Здесь автомобили всегда активны

p, 
 
ul, 
 
li, 
 
div, 
 
nav { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
body { 
 
    font-family: Calibri; 
 
} 
 
#menu { 
 
    overflow: auto; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 
.parent-menu { 
 
    background-color: #0c8fff; 
 
    min-width: 200px; 
 
    float: left; 
 
} 
 
#menu ul { 
 
    list-style-type: none; 
 
} 
 
#menu ul li a { 
 
    padding: 10px 15px; 
 
    display: block; 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
#menu ul li.active a, 
 
#menu ul li a:hover { 
 
    background-color: #007ee9; 
 
} 
 
#menu ul li.active > ul, 
 
#menu ul li:hover > ul { 
 
    left: 200px; 
 
} 
 
#menu ul li > ul { 
 
    position: absolute; 
 
    background-color: #333; 
 
    top: 0; 
 
    left: -200px; 
 
    min-width: 200px; 
 
    z-index: -1; 
 
    height: 100%; 
 
} 
 
#menu ul li > ul li a:hover { 
 
    background-color: #2e2e2e; 
 
}

<nav id="menu"> 
 
    <ul class="parent-menu"> 
 
    <li><a href="#">Home & Kitchen</a> 
 
     <ul> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Electronics</a> 
 
     <ul> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Clothing</a> 
 
     <ul> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="active"><a href="#">Cars & Motorbikes</a> 
 
     <ul> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Books</a> 
 
     <ul> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     <li><a href="#">item</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Support</a> 
 
     <ul> 
 
     <li><a href="#">Contact Us</a></li> 
 
     <li><a href="#">Forum</a></li> 
 
     <li><a href="#">Deliveries</a></li> 
 
     <li><a href="#">T&C</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>