CODEWITHSUNDEEP
htmlcss
HarshVardhan Bandta
HarshVardhan Bandta

Reputation: 139

Select an element from multilevel ul li structure

I have a ul li structure that looks like as in the code below. I want to display just the first level of drop-down on hover. Now, since the <ul> has "drop-down menu" in various places withing the same <ul> tag, it displays all the items that are under this class. One way is to add a parent class either adding in HTML or dynamically by writing some script.

Is there a way we could access this directly using CSS alone ?

.nav-item:hover .dropdown-menu ul  { should exclude all the dropdown-menu class where there is also a submenu class - something like this
}
<ul class="dropdown-menu">
    <li>
        <a class="dropdown-item" href="#">
            Item 1
        </a>
    </li>
    <li>
        <a class="dropdown-item" href="#">
            Item 2
        </a>
    </li>
    <li>
        <a class="dropdown-item" href="#">
            Item 3
        </a>
        <ul class="submenu dropdown-menu">
            <li>
                <a class="dropdown-item" href="#">
                    Second Level item1
                </a>
            </li>
            <li>
                <a class="dropdown-item" href="#">
                    Second Level item2
                </a>
            </li>
            <li>
                <a class="dropdown-item" href="#">
                    Second Level item3
                </a>
                <ul class="submenu dropdown-menu">
                    <li>
                        <a class="dropdown-item" href="#">
                            Third Level item1
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">
                            Third Level item2
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">
                            Third Level item3
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a class="dropdown-item" href="#">
            Item 4
        </a>
    </li>
    <li>
        <a class="dropdown-item" href="#">
            Item 5
        </a>
        <ul class="submenu dropdown-menu">
            <li>
                <a class="dropdown-item" href="#">
                    Second Level item1
                </a>
            </li>
            <li>
                <a class="dropdown-item" href="#">
                    Second Level item2
                </a>
            </li>
        </ul>
    </li>
</ul>

The code runs perfectly in the real application by adding a specific class.

Upvotes: 0

Views: 500

Answers (2)

user13907403
user13907403

Reputation:

Add > to select direct child .navbar .nav-item:hover > .dropdown-menu

.navbar .nav-item:hover > .dropdown-menu{
    display: block;
    border-radius: 0;
    background-color:  #233d00;
    position: absolute;
}

To active submenu when hover dropdown-menu

 .dropdown-menu  li:hover>.submenu{
    display: block;
    background-color: #233d00;
 }

Try this codepen Demo

nav {
  vertical-align: middle;
  text-align: center;
  font-size: 12px;
  background: #233d00 0% 0% no-repeat padding-box;
}
li:hover{background: #647e8f;}

@media all and (min-width: 992px) {
  .navbar .nav-item:hover .nav-link {color: #fff;}
  .navbar .nav-item:hover>.dropdown-menu{
    display: block;
    border-radius: 0;
    background-color:  #233d00;
    position: absolute;
  } 
  .dropdown-item{color: #fff !important;}
  .dropdown-menu li{position: relative;}
  .nav-item .submenu{ 
    display: none;
    position: absolute;
    left:100%;
    top:-1px;
  }
  .dropdown-menu  li:hover{ background-color: #f1f1f1 }
  .dropdown-menu  li:hover>.submenu{
    display: block;
    background-color: #233d00;
  }
  .dropdown-submenu li:hover > .dropdown-submenu{
    display: block;
    background-color:  #233d00;
  }

  ul.dropdown-submenu {
    list-style-type: '';
    padding: 0;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />

<body>
  <nav class="navbar py-0 navbar-expand-lg navbar-dark" id="second-navbar">
    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#main_nav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="main_nav">
      <ul class="navbar-nav nav-fill w-100 nav-pills">
        <li class="nav-item active"><a class="nav-link" href="#">First Level Item 1</a></li>
        <li class="nav-item dropdown">
          <a class="nav-link" href="#" data-toggle="dropdown">First Level Item 2</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">First Level Sub Item 1</a></li>
            <li><a class="dropdown-item" href="#">First Level Sub Item 2</a></li>
            <li><a class="dropdown-item" href="#">First Level Sub Item 3</a>
              <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="#">Second Level item1</a></li>
                <li><a class="dropdown-item" href="#">Second Level item1</a></li>
                <li><a class="dropdown-item" href="#">Second Level item1</a>
                  <ul class="submenu dropdown-menu">
                    <li><a class="dropdown-item" href="#">Third Level item1</a></li>
                    <li><a class="dropdown-item" href="#">Third Level item2</a></li>
                    <li><a class="dropdown-item" href="#">Third Level item3</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link" href="#" data-toggle="dropdown">First Level Item 3</a>
          <ul class="submenu dropdown-menu">
            <li><a class="dropdown-item" href="#">Submenu item 1</a></li>
            <li><a class="dropdown-item" href="#">Submenu item 2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
  Take screen width greater than 992px to view navbar 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>

Upvotes: 1

MaxiGui
MaxiGui

Reputation: 6348

As you are having different level, you must make different css setting:

  .navbar li:hover ul{
        display: block;
        border-radius: 0;
        background-color:  #233d00;
        position: absolute;
        
    }
  
  .navbar li:hover ul li ul{
        display: none;
        border-radius: 0;
        background-color:  #233d00;
        position: absolute;
        
    }
  .navbar li ul li:hover ul{
        display: block;
        border-radius: 0;
        background-color:  #233d00;
        position: absolute;     
    }
    .navbar li ul li:hover ul li ul{
        display: none;
        border-radius: 0;
        background-color:  #233d00;
        position: absolute;     
    }
  .navbar li ul li ul li:hover ul{
        display: block;
        border-radius: 0;
        background-color:  #233d00;
        position: absolute;     
    }

Upvotes: 1

Related Questions