Check for nested menu

Question

I need to add an icon to the menu item that contains the nested list. I implemented it through the class active. But I do not know how to implement a check for nesting.

nav { background-color: #49265c; } nav ul { margin: 0; padding: 0 4%; text-align: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } nav ul li { list-style-type: none; display: inline-block; padding: 22px 10px; } nav ul li a { text-transform: uppercase; color: white; font-family: Tahoma; font-size: 18px; font-weight: 400; line-height: 15px; position: relative; } nav ul li ul, nav ul li ul li { display: block; } nav ul li ul { position: absolute; background-color: transparent; opacity: 0.95; background-color: #49265c; padding: 8px 0 20px 0; margin: 22px 0 0 -30px; max-width: 265px; display: none; } nav ul li ul li { padding: 5px 30px; text-align: left; line-height: 1px; } nav ul li:hover ul { display: block; } nav ul li ul li a { font-size: 14px; font-weight: 400; text-transform: uppercase; border-top: none !important; } nav ul li a.active:after { display: block; position: absolute; content: ""; width: 8px; height: 8px; left: 0; right: 0; margin: auto; border: 2px solid #fff; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } nav ul li:hover a { border-top: 1px solid #fff; text-decoration: none; } nav ul li ul li:hover a, nav ul li:hover a { color: #fff; } nav ul li ul li:hover a { border-top: none; text-decoration: underline; }

 <nav> <div class="container"> <ul> <li><a href="">О компании</a> </li> <li><a href="" class="active">Продукция</a> <ul> <li><a href="">Компрессоры ALBERT</a> </li> <li><a href="">Стационарные компрессоры SEC</a> </li> <li><a href="">Стационарные компрессоры SMARTRONIC</a> </li> <li><a href="">Передвижные компрессоры</a> </li> <li><a href="">Локомотивыне компрессоры</a> </li> </ul> </li> <li><a href="">Сервис</a> </li> <li><a href="">Дилеры</a> </li> <li><a href="">Доставка</a> </li> <li><a href="">Контакт</a> <ul> <li><a href="">1</a> </li> <li><a href="">2</a> </li> <li><a href="">3</a> </li> <li><a href="">4</a> </li> <li><a href="">5</a> </li> </ul> </li> </ul> </div> </nav>

Accepted Answer · 2016-09-15T13:25:44

It is possible, for example:

 $( "li" ).has( "ul" ).children('a').addClass('active');

Code:

 $( "li" ).has( "ul" ).children('a').addClass('active');

 nav { background-color: #49265c; } nav ul { margin: 0; padding: 0 4%; text-align: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } nav ul li { list-style-type: none; display: inline-block; padding: 22px 10px; } nav ul li a { text-transform: uppercase; color: white; font-family: Tahoma; font-size: 18px; font-weight: 400; line-height: 15px; position: relative; } nav ul li ul, nav ul li ul li { display: block; } nav ul li ul { position: absolute; background-color: transparent; opacity: 0.95; background-color: #49265c; padding: 8px 0 20px 0; margin: 22px 0 0 -30px; max-width: 265px; display: none; } nav ul li ul li { padding: 5px 30px; text-align: left; line-height: 1px; } nav ul li:hover ul { display: block; } nav ul li ul li a { font-size: 14px; font-weight: 400; text-transform: uppercase; border-top: none !important; } nav ul li a.active:after { display: block; position: absolute; content: ""; width: 8px; height: 8px; left: 0; right: 0; margin: auto; border: 2px solid #fff; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } nav ul li:hover a { border-top: 1px solid #fff; text-decoration: none; } nav ul li ul li:hover a, nav ul li:hover a { color: #fff; } nav ul li ul li:hover a { border-top: none; text-decoration: underline; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> </head> <body> <nav> <div class="container"> <ul> <li><a href="">О компании</a> </li> <li><a href="">Продукция</a> <ul> <li><a href="">Компрессоры ALBERT</a> </li> <li><a href="">Стационарные компрессоры SEC</a> </li> <li><a href="">Стационарные компрессоры SMARTRONIC</a> </li> <li><a href="">Передвижные компрессоры</a> </li> <li><a href="">Локомотивыне компрессоры</a> </li> </ul> </li> <li><a href="">Сервис</a> </li> <li><a href="">Дилеры</a> </li> <li><a href="">Доставка</a> </li> <li><a href="">Контакт</a> <ul> <li><a href="">1</a> </li> <li><a href="">2</a> </li> <li><a href="">3</a> </li> <li><a href="">4</a> </li> <li><a href="">5</a> </li> </ul> </li> </ul> </div> </nav> </body> </html>

$( "li" ).has( "ul" ).children('a').addClass('active'); - probably better off - Igor

Check for nested menu

1 answer 1

More articles: