CODEWITHSUNDEEP
css
robothead
robothead

Reputation: 323

Hover over parent and show child

I have a dynamic mega menu that shows the first tier of submenus but I'm trying to make it so that the second tier show up when an element in the 1st tier is hovered over. currently both tiers and showing up taking up a lot of space.

I found a post on here saying to use this layout:

.child{ display:none; }
.parent:hover .child{ display:block; }

It's kind of tricky with the css I have:

child = .new-menu .dropdown-submenu .dropdown-menu.burt
parent =  .dropdown-menu.burt .new-menu .dropdown-submenu > a

I tried this but it's not working:

.new-menu .dropdown-submenu .dropdown-menu.burt{
    display: none;
}
.dropdown-menu.burt .new-menu .dropdown-submenu > a:hover .new-menu .dropdown-submenu .dropdown-menu.burt  {
    display: block; 
}

Targeting these specific elements seems tricky and the only way I could get them specifically was the mess I have above. Maybe I can target these elements a better way, or another way of making this work?

Update

Here is the html structure, it's kind trick, it's from Americommerce and it uses 'Merge Codes' that supply the dynamic data

This is the main structure:

<ul class="nav navbar-nav">
          <ac:layoutarea id="Item">
            <ac:visibilityarea id="phDDLink">
              <li class="dropdown">
                <a href="#" target="$$TARGET$$">$$TEXT$$</a>
                <ac:visibilityarea id="phSubMenu">

                  <ul class="dropdown-menu mm2">
                    <div class="row"> $$SUBMENU$$</div>
                  </ul>

                </ac:visibilityarea>
              </li>
            </ac:visibilityarea>
            <ac:visibilityarea id="phNoDDLink">
              <li>
                <a href="$$HREF$$" target="$$TARGET$$">$$TEXT$$</a>
              </li>
            </ac:visibilityarea>
          </ac:layoutarea>

        </ul>

This is the structure of the sub-menus:

<ac:layoutarea id="SubItem">

      <ac:visibilityarea id="phDDLink">
        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2"> 
          <li class="dropdown-submenu">
            <a href="$$HREF$$" target="$$TARGET$$">$$TEXT$$</a>
            <ac:visibilityarea id="phSubMenu">
              <ul class="dropdown-menu burt" id="">$$SUBMENU$$</ul>

            </ac:visibilityarea>
          </li>
        </div>
      </ac:visibilityarea>
      <ac:visibilityarea id="phNoDDLink">

        <li class="greg">
          <a href="$$HREF$$" target="$$TARGET$$">$$TEXT$$</a>
        </li>

      </ac:visibilityarea>

    </ac:layoutarea>

Update 2

HTML from inspector

<ul class="dropdown-menu mm2">
    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
        <li class="dropdown-submenu"> <a  class="sub-link" href="/store/c/software.aspx" target="">Software</a>
            <ul class="dropdown-menu burt">
                <div class="new-menu">
                    <li class="dropdown-submenu"> <a href="/office-2019.aspx" target="">Products</a>
                        <ul class="dropdown-menu burt">
                            <li class="greg"> <a href="/product1.aspx" target="">Product 1</a> </li>
                        </ul>
                    </li>
                </div>
            </ul>
        </li>
    </div>
</ul>

Update 3

I added a class to the first <a> and then added this css:

.new-menu .dropdown-submenu .dropdown-menu.burt {
    display: none;
}
.sub-link:hover .new-menu .dropdown-submenu .dropdown-menu.burt {
    display: block;

}

It hides the elements but showing them on hover still doesn't work

.sub-link{
  display: block;
}

.new-menu{
  display: none;
}

.greg
{
  display: none;
}
<li class="dropdown-submenu"> <a  class="sub-link" href="/store/c/software.aspx" target="">Software</a>
            <ul class="dropdown-menu burt">
                <div class="new-menu">
                    <li class="dropdown-submenu"> 
                    <a href="/office-2019.aspx" target="">
                      Products
                    </a>
                        <ul class="dropdown-menu burt">
                            <li class="greg">
                            <a href="/product1.aspx" target="">Product 1
                            </a> 
                            </li>
                        </ul>
                    </li>
                </div>
            </ul>
        </li>

Upvotes: 2

Views: 1379

Answers (2)

Dupinder Singh
Dupinder Singh

Reputation: 7789

Your HTML structure is not clear so I tried to create my own and try to recreate your problem

have a look

.new-menu{
  display: none;
}

.dropdown-submenu{
   display: none;
}

.dropdown-menu{
  display: none;
}

.mainParent:hover .new-menu{
  display: block;
}


.mainParent:hover .dropdown-submenu{
  display: block;
}

.mainParent:hover .dropdown-menu{
  display: block;
}
<a class="mainParent"> 
  Link
  <div class="new-menu">
    <div class="dropdown-submenu">
      <div class="dropdown-menu burt">
        Application Menu
      </div>
    </div>
  </div>
</a>

If each element having a property to hide, then each element class have to make visible on parent element hover.

If you are facing some kind of nested DOM CSS problem, you can see this running code snippet 

.sub-link{
  display: block;
}

.new-menu{
  display: none;
}

.greg
{
  display: none;
}

.dropdown-submenu:hover a{
  color: red !important;
}

.dropdown-submenu:hover .burt{
  display: block;
  color: red !important;
}

.dropdown-submenu:hover .new-menu{
  display: block;
  color: red !important;
}

.new-menu:hover .burt{
  display: block;
}

.new-menu:hover .greg{
  display: block;
}
.new-menu:hover a{
  display: block;
  color: black !important;
}
<li class="dropdown-submenu"> <a  class="sub-link" href="/store/c/software.aspx" target="">Software</a>
            <ul class="dropdown-menu burt">
                <div class="new-menu">
                    <li class="dropdown-submenu"> 
                    <a href="/office-2019.aspx" target="">
                      Products
                    </a>
                        <ul class="dropdown-menu burt">
                            <li class="greg">
                            <a href="/product1.aspx" target="">Product 1
                            </a> 
                            </li>
                        </ul>
                    </li>
                </div>
            </ul>
        </li>

Upvotes: 1

Josh
Josh

Reputation: 223

You can always add another class for your child elements and to your parent element.

<html>
<head>
  <style>
    .f-red {color:red;}
    .childEl{
    display:none;
    }
    #parentEl {padding: 5px; border-style: solid;}
    #parentEl:hover > .childEl {display:block}
  </style>
</head>
<body>

    <div id="parentEl">
    <h1 class="childEl f-red">Child</h1>
    </div>

</body>

</html>

Upvotes: 0

Related Questions