CSS transition works on li element but not div

[Corey Klemow]

I'm building a clickable responsive dropdown navbar menu with CSS and vanilla javascript. It's 99.99% working - probably well enough to use - but something weird is going on under the hood. I want the dropdowns to animate in and out, and it's working fine in expanded mode (classes including max-height: 0/overflow-hidden/transitions and max-height:100% are applied on click via JS code) - but in hamburger mode, the animation doesn't happen; it just pauses for the length of the transition before appearing or disappearing.

The dropdown containers are currently divs. If I change them to li, it fixes the problem... but creates a worse problem by breaking the positioning of the dropdowns in expanded mode - they both align under the leftmost menu item. (There's something seriously goony about the dropdown positioning; for reasons I don't understand, I had to change them to position:fixed instead of absolute to get them to line up with their top menu items, as well as having to position them top:60px because they were appearing flush with the top of the page (the navbar is a fixed height of 60px). All of which might have to do with the fact that I had to change the menu item container to a flexbox in the expanded mode to get the top-level menu items to lay out properly at all and I'm new to flexboxes. Though I also needed it to be a flexbox for aesthetic reasons, so I could juggle the order of the links in expanded mode.)

Here's a demo where the dropdown container is a div and here's a demo where the dropdown container is a li. Code below.

Menu HTML:

<nav>

  <div class="logo">

<a class="ourname" href="#">
<img src="http://www.sacredfools.org/images/2d-logo-white-on-black-500px-128x128.png">
SACRED FOOLS</a></div>

    <input type="checkbox" id="menutoggler" class="toggler">
    <div class="hamburger"><div></div></div>

  <ul class="menu__box">

    <li><a class="menu__item" href="#">TICKETS</a></li>

    <li><a class="menu__item shows__dropbtn" id="shows__button" onclick="shows__dropdown()">SHOWS
             <i class="fa-solid fa-caret-down"></i></a>

        <li class="shows__dropdownhider" id="shows__dropdowncontainer">
           <a class="menu__dropdownitem" href="#">All Shows</a>
           <a class="menu__dropdownitem" href="#">Calendar</a>
           <a class="menu__dropdownitem menu__lastdropdown" href="#">Past Productions</a>
        </li></li>

    <li><a class="menu__item more__dropbtn" id="more__button" onclick="more__dropdown()">MORE
             <i class="fa-solid fa-caret-down"></i></a>

        <li class="more__dropdownhider" id="more__dropdowncontainer">
           <a class="menu__dropdownitem" href="#">Directions</a>
           <a class="menu__dropdownitem" href="#">Members & Staff</a>
           <a class="menu__dropdownitem" href="#">Get Involved</a>
           <a class="menu__dropdownitem" href="#">About</a>
           <a class="menu__dropdownitem" href="#">Mission</a>
           <a class="menu__dropdownitem" href="#">Anti-Racism</a>
           <a class="menu__dropdownitem" href="#">EDI</a>
           <a class="menu__dropdownitem" href="#">Education & Outreach</a>
           <a class="menu__dropdownitem" href="#">Press</a>
           <a class="menu__dropdownitem" href="#">Awards</a>
           <a class="menu__dropdownitem" href="#">Contact Us</a>
           <a class="menu__dropdownitem" href="#">Mailing List</a>
           <a class="menu__dropdownitem menu__lastdropdown" href="#">Search</a>
        </li></li>

    <li><a class="menu__item menu__highlight menu__lastitem" href="#">DONATE</a></li>

        <li><a class="menu__item menu__social" href="#"><i class="fa-brands fa-square-facebook"></i></a></li>
        <li><a class="menu__item menu__social" href="#"><i class="fa-brands fa-square-twitter"></i></a></li>
        <li><a class="menu__item menu__social" href="#"><i class="fa-brands fa-square-instagram"></i></a></li>

        <li class="menu__overflowspacer"></li>

    </ul>
 
</nav>

Menu CSS (sorry to post so much of it, but I honestly don't know where the problem is):

nav {background-color: #282828;
     padding: 0; margin: 0;
     position: fixed; top: 0; left: 0;
     width: 100%; z-index: 2;
}

nav, .menuspacer {height: 60px}

.logo {color: #ffffff; font-size: 12pt; position: fixed; top: 0; left: 0;
   font-family: 'Montserrat', sans-serif; font-weight: bold; z-index: 3;
     text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
   }

.logo img {height: 60px; margin-left: 0px; margin-right: 5px; margin-top: 0px; margin-bottom: 0px;
 vertical-align:middle;}

a.ourname:link, a.ourname:visited, a.ourname:hover, a.ourname:active
 {text-decoration: none; color: #ffffff;}

.toggler{
    z-index:2;
    height: 50px;
    width: 50px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    opacity: 0;
}

.hamburger{
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    width: 40px;
    padding: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hamburger > div{
    position: relative;
    top: 0;
    left: 0;
    background: white;
    height: 2px;
    width: 60%;
    transition: all  0.4s ease;
}

.hamburger > div::before,
.hamburger > div::after{
    content: '';
    position: absolute;
    top: -8px;
    background: white;
    width: 100%;
    height: 2px;
    transition: all  0.4s ease;
}

.hamburger > div::after{
    top: 8px;
}

.toggler:checked + .hamburger > div{
    background: rgba(0,0,0,0);
}

.toggler:checked + .hamburger > div::before{
    top: 0;
    transform: rotate(45deg);
    background: white;
}

.toggler:checked + .hamburger > div::after{
    top: 0;
    transform: rotate(135deg);
    background: white;
}

.toggler:checked ~ .menu__box{
    left: 0px;
}

.menu__box {
  position: fixed;
  top: 60px;
  left: -100%;
  width: 280px;
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
  margin: 0px;
  padding-left: 0;
  list-style: none;
  background-color: #282828;
  transition: all 0.4s ease;
  overflow: auto;
  z-index: 1;
}

.menu__item {
  display: block; float: none;
  padding: 11px;
  color: #ffffff;
  font-family: 'Open Sans', sans-serif;
  font-size: 12pt;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
  border-top: 1px dotted #ffffff;
}

.menu__dropbox {list-style: none;}

.menu__dropdownitem {
  display: block;
  padding-top: 5px;
  padding-left: 30px;
  padding-right: 11px;
  padding-bottom: 5px;
  color: #ffffff;
  font-family: 'Open Sans', sans-serif;
  font-size: 12pt;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
}

.shows__dropdownhider, .more__dropdownhider {max-height: 0; overflow: hidden;
   -webkit-transition-duration: .25s;
   -moz-transition-duration: .25s;
   -o-transition-duraton: .25s;
   transition-duration: .25s;}

.menu__dropdownshow {max-height: 100%;}

.shows__dropbtn, .more__dropbtn {cursor: pointer;}

.menu__lastdropdown {padding-bottom: 11px}

.menu__lastitem {border-bottom: 1px dotted #ffffff;}

.menu__item:hover, .menu__item:active,
.menu__dropdownitem:hover, .menu__dropdownitem:active {color: #FB0901}

.menu__item:hover, .menu__item:active,
.menu__dropdownitem:hover, .menu__dropdownitem:active {background-color: #000000}

.menu__highlight {background-color: #404040}

.menu__social {float: left; border: none; font-size: 20pt}

.menu__social:hover, .menu__social:active {background-color: transparent}

.menu__overflowspacer {height: 120px}

.fa-caret-down {margin: 5px; font-size: 8pt; float: right}

.menu__toggledon {color: #FB0901; background-color: #000000;}


@media (min-width: 768px) {

.hamburger {display: none}

.toggler:checked ~ .menu__box{
    left: auto;
}

.menu__box {
  display: flex;
  align-items: center;
  flex-direction: row;
  position: fixed;
  top: 0px;
  right: 0px;
  left: auto;
  width: auto;
  height: 60px;
  min-height: auto;
  box-sizing: content-box;
  margin: 0;
  padding: 0;
  list-style: none;
  box-shadow: none;
  overflow: hidden;
  background-color: transparent;
  z-index: 3;
  margin: 0;
  transition: all 0s ease;
}

.menu__item {
  padding-left: 15px; padding-right: 15px;
  padding-top: 0px; padding-bottom: 0px;
  margin: 0px;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 12pt;
  font-weight: 700;
  text-decoration: none;
  transition-duration: .25s;
  border-top: none;
  padding-top: 30%; padding-bottom: 30%;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
}

.menu__social {font-size: 15pt; padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px; margin: 0px;}

.final__social {padding-right: 15pt}

.menu__social:hover, .menu__social:active {text-shadow: 1px 1px 1px rgba(255,255,255, .75);}

.menu__dropdownitem {
  display: block;
  padding-top: 5px;
  padding-left: 11px;
  padding-right: 11px;
  padding-bottom: 5px;
  color: #ffffff;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 12pt;
  font-weight: 700;
  text-decoration: none;
  transition-duration: .25s;
  background-color: #000000;
}

.shows__dropbtn, .more__dropbtn {position: relative;}

.shows__dropdownhider, .more__dropdownhider {
  position: fixed; top: 60px; background-color: #282828;
 }

.menu__lastitem {border-bottom: none;}

.menu__overflowspacer {height: 0px}

.fa-caret-down {margin-left: 5px; font-size: 12pt; float: none;
 padding: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px}

.menu__highlight {background-color: transparent;
   font-family: 'Roboto', sans-serif; font-size: 9pt; font-weight: 500;
   border: 1px solid #ffffff;
   padding: 10px; margin-left: 10px; margin-right: 10px;
   border-radius: 5px; box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
   text-shadow: none;}

.menu__highlight:hover, .menu__highlight:active {background-color: #ffffff; color: #000000;}

.menu__box :nth-child(6) {order: 1;}

}

 

[Corey Klemow]

The hacky kludge fix for this (other than just ignoring the problem) is to switch to li and then use right: positioning to properly position the misplaced dropdowns in expanded mode, but I don't wanna have to recalculate that every time there are changes to the menu system.

.shows__dropdownhider {right: 254px}
.more__dropdownhider {right: 128px}

Also, just FYI, I am deliberately not using Bootstrap or anything else that comes with a ton of inbuilt CSS. This is a 25-year-old theater website with literally hundreds of archival pages going back to when it was a frames-based site and every page used tables. I put in a Bootstrap menu a few years ago and it made a lot of the older pages go boom - too many to go and hand-correct them all. Which is why I'm trying to replace the menu with something simpler.

Thanks for any help!

 

[OldMan]

Without the JS can't get it to work. But, two things stick out:
1.) What do you think this does - <i class="fa-solid fa-caret-down"></i>? It's empty.

2.) You have <li> inside of a <li> NO. Here is one way of doing this How To Create a Subnavigation Menu & How To Create a Side Navigation Dropdown

 

[Corey Klemow]

The caret is a FontAwesome icon - just a down-pointing caret to indicate a dropdown menu. It shows up fine on the demo link; I just didn't bother including the FontAwesome JS embed code 'cause it's not germane to my problem.

Thank you for the nested li no-no guidance! I've closed the li button instead of wrapping it around the dropdown (though it's made no difference in the page's functionality or the animation problem).

And thank you for the link! I'd looked at some other W3Schools tutorials but hadn't seen that one yet, which is laid out in exactly the way I need. I've looked at a ton of tutorials and tried copying code for dropdowns but they seem to break once I start applying my own styles and I don't know why. In the last day I've started over from scratch using another sample and I'm halfway through styling it and it hasn't broken yet... but I haven't added the dropdown JS yet. (I meant to include the JS in my initial post but brainfarted; I've included it below, or you can look at my live demo links if it's easier.) If I fail with this one, I'll try again with the one you provided. If it works, I'll let folks know I've solved the problem.

Meanwhile, other issues aside, I'm still mystified by why the animation works on the dropdown container when it's a li but not when it's a div - and why that malfunction only occurs in the hamburger layout. That's my primary concern here. Fingers crossed, my new build will work properly.

Note: I am not using a display: none / display: block toggle for the dropdowns, because with that technique, the animation only animates in and not out. To hide the dropdowns I am using "max-height: 0; overflow: hidden" and then using the javascript to toggle a class with "max-height: 100%."

/* SHOWS Dropdown and restyle the SHOWS button to highlight it */

function shows__dropdown() {
  document.getElementById("shows__dropdowncontainer").classList.toggle("menu__dropdownshow");
  document.getElementById("shows__button").classList.toggle("menu__toggledon");
}

/* MORE Dropdown and restyle the MORE button to highlight it */

function more__dropdown() {
  document.getElementById("more__dropdowncontainer").classList.toggle("menu__dropdownshow");
  document.getElementById("more__button").classList.toggle("menu__toggledon");
}

/* Close dropdowns and remove button styling when clicking outside */

window.onclick = function(e) {

  if (!e.target.matches('.shows__dropbtn')) {
  var shows__dropdowncontainer = document.getElementById("shows__dropdowncontainer");
    if (shows__dropdowncontainer.classList.contains('menu__dropdownshow')) {
      shows__dropdowncontainer.classList.remove('menu__dropdownshow');
    }
  }

  if (!e.target.matches('.shows__dropbtn')) {
  var shows__button = document.getElementById("shows__button");
    if (shows__button.classList.contains('menu__toggledon')) {
      shows__button.classList.remove('menu__toggledon');
    }
  }

  if (!e.target.matches('.more__dropbtn')) {
  var more__dropdowncontainer = document.getElementById("more__dropdowncontainer");
    if (more__dropdowncontainer.classList.contains('menu__dropdownshow')) {
      more__dropdowncontainer.classList.remove('menu__dropdownshow');
    }
  }


  if (!e.target.matches('.more__dropbtn')) {
  var more__button = document.getElementById("more__button");
    if (more__button.classList.contains('menu__toggledon')) {
      more__button.classList.remove('menu__toggledon');
    }
  }

}

</script>

 

[Corey Klemow]

Waitaminnut - closing the li DID fix the animation problem! (I just typoed on my first attempt.) YAY! You solved my problem! Now I just have to un-bork the dropdown positioning. THANK YOU!!!!!!!!! I knew it had to be something really stupid. 🙂

 

[OldMan]

Glad things worked out for you.

 

[Corey Klemow]

I fixed my positioning issues in my original build by wrapping a position: relative container around each button/dropdown instead of making the dropdown button itself the position: relative element - but in the process broke the transition animations in hamburger mode again. I don't understand! Now it won't work whether the dropdown container is a li or a div.

On top of that, the dropdowns started inheriting the width of the buttons and I had to include min-width: 150px (width: auto and width: fit-content didn't work). And I had been toggling max-height: 0 and max-height: 100% to make the dropdowns appear and disappear, because if you use display: none and display: block, the animations don't work at all... but once I'd fixed the position: relative/absolute issue, max-height: 100% only showed two items per dropdown and I had to increase it to max-height: 800%! (There are a LOT of items in one of the dropdowns.) These seem like hacky fixes; is there something wrong here?

LIVE DEMO

Revised code (javascript is same as in above post):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open

+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open Sans Condensed:700' rel='stylesheet'>
 <script src="https://kit.fontawesome.com/49428d5dec.js" crossorigin="anonymous"></script>


<nav>

  <div class="logo">

<a class="ourname" href="#">
<img src="http://www.sacredfools.org/images/2d-logo-white-on-black-500px-128x128.png">
SACRED FOOLS</a></div>

    <input type="checkbox" id="menutoggler" class="toggler">
    <div class="hamburger"><div></div></div>


  <ul class="menu__box">

    <li><a class="menu__item" href="#">TICKETS</a></li>

<div class="dropdownholder">
    <li class="shows__dropbtn"><a class="menu__item shows__dropbtn" id="shows__button" onclick="shows__dropdown()">SHOWS
             <i class="fa-solid fa-caret-down"></i></a></li>

        <li class="shows__dropdownhider" id="shows__dropdowncontainer">
           <a class="menu__dropdownitem" href="#">All Shows</a>
           <a class="menu__dropdownitem" href="#">Calendar</a>
           <a class="menu__dropdownitem menu__lastdropdown" href="#">Past Productions</a>
        </li>
</div>

<div class="dropdownholder">
    <li class="more__dropbtn"><a class="menu__item more__dropbtn" id="more__button" onclick="more__dropdown()">MORE
             <i class="fa-solid fa-caret-down"></i></a></li>

        <li class="more__dropdownhider" id="more__dropdowncontainer">
           <a class="menu__dropdownitem" href="#">Directions</a>
           <a class="menu__dropdownitem" href="#">Members & Staff</a>
           <a class="menu__dropdownitem" href="#">Get Involved</a>
           <a class="menu__dropdownitem" href="#">About</a>
           <a class="menu__dropdownitem" href="#">Mission</a>
           <a class="menu__dropdownitem" href="#">Anti-Racism</a>
           <a class="menu__dropdownitem" href="#">EDI</a>
           <a class="menu__dropdownitem" href="#">Education & Outreach</a>
           <a class="menu__dropdownitem" href="#">Press</a>
           <a class="menu__dropdownitem" href="#">Awards</a>
           <a class="menu__dropdownitem" href="#">Contact Us</a>
           <a class="menu__dropdownitem" href="#">Mailing List</a>
           <a class="menu__dropdownitem menu__lastdropdown" href="#">Search</a>
        </li>
</div>

    <li><a class="menu__item menu__highlight menu__lastitem" href="#">DONATE</a></li>

        <li><a class="menu__item menu__social" href="#"><i class="fa-brands fa-square-facebook"></i></a></li>
        <li><a class="menu__item menu__social" href="#"><i class="fa-brands fa-square-twitter"></i></a></li>
        <li><a class="menu__item menu__social" href="#"><i class="fa-brands fa-square-instagram"></i></a></li>

    </ul>
 
</nav>

<div class="menuspacer"></div>

<style>
body {margin: 0; padding: 0;
}

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
}

nav {background-color: #282828;
     background-image: url("litfog.jpg");
     padding: 0; margin: 0;
     position: fixed; top: 0; left: 0;
     width: 100%; z-index: 2;
}

nav, .menuspacer {height: 60px}

.logo {color: #ffffff; font-size: 12pt; position: fixed; top: 0; left: 0;
   font-family: 'Montserrat', sans-serif; font-weight: bold; z-index: 3;
     text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
   }

.logo img {height: 60px; margin-left: 0px; margin-right: 5px; margin-top: 0px; margin-bottom: 0px;
 vertical-align:middle;}

a.ourname:link, a.ourname:visited, a.ourname:hover, a.ourname:active
 {text-decoration: none; color: #ffffff;}

.toggler{
  /* ALWAYS KEEPING THE TOGGLER OR THE CHECKBOX ON TOP OF EVERYTHING :  */
    z-index:2;
    height: 50px;
    width: 50px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    opacity: 0;
}

.hamburger{
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    width: 40px;
    padding: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hamburger > div{
    position: relative;
    top: 0;
    left: 0;
    background: white;
    height: 2px;
    width: 60%;
    transition: all  0.4s ease;
}

.hamburger > div::before,
.hamburger > div::after{
    content: '';
    position: absolute;
    top: -8px;
    background: white;
    width: 100%;
    height: 2px;
    transition: all  0.4s ease;
}

.hamburger > div::after{
    top: 8px;
}

.toggler:checked + .hamburger > div{
    background: rgba(0,0,0,0);
}

.toggler:checked + .hamburger > div::before{
    top: 0;
    transform: rotate(45deg);
    background: white;
}

.toggler:checked + .hamburger > div::after{
    top: 0;
    transform: rotate(135deg);
    background: white;
}

.toggler:checked ~ .menu__box{
    left: 0px;
}

.menu__box {
  position: fixed;
  top: 60px;
  left: -100%;
  width: 280px;
  height: -moz-calc(100% - 60px);
  height: -webkit-calc(100% - 60px);
  height: -o-calc(100% - 60px);
  height: calc(100% - 60px);
  box-sizing: border-box;
  margin: 0px;
  padding-left: 0;
  list-style: none;
  background-color: #282828;
  transition: all 0.4s ease;
  overflow: auto;
  z-index: 1;
}

.menu__item {
  display: block; float: none;
  padding: 11px;
  color: #ffffff;
  font-family: 'Open Sans', sans-serif;
  font-size: 12pt;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
  border-top: 1px dotted #ffffff;
}

.dropdownholder {position: relative}

.menu__dropdownitem {
  display: block;
  padding-top: 5px;
  padding-left: 30px;
  padding-right: 11px;
  padding-bottom: 5px;
  color: #ffffff;
  font-family: 'Open Sans', sans-serif;
  font-size: 12pt;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
}

.shows__dropdownhider, .more__dropdownhider {max-height: 0; overflow: hidden; min-width: 150px;
   -webkit-transition-duration: .25s;
   -moz-transition-duration: .25s;
   -o-transition-duraton: .25s;
   transition-duration: .25s;}

.menu__dropdownshow {max-height: 800%;}

.shows__dropbtn, .more__dropbtn {cursor: pointer;}

.menu__lastdropdown {padding-bottom: 11px}

.menu__lastitem {border-bottom: 1px dotted #ffffff;}

.menu__item:hover, .menu__item:active,
.menu__dropdownitem:hover, .menu__dropdownitem:active {color: #FB0901}

.menu__item:hover, .menu__item:active,
.menu__dropdownitem:hover, .menu__dropdownitem:active {background-color: #000000}

.menu__highlight {background-color: #404040}

.menu__social {float: left; border: none; font-size: 20pt}

.menu__social:hover, .menu__social:active {background-color: transparent}

.fa-caret-down {margin: 5px; font-size: 8pt; float: right}

.menu__toggledon {color: #FB0901; background-color: #000000;}


@media (min-width: 768px) {

.toggler, .hamburger {display: none}

.toggler:checked ~ .menu__box{
    left: auto;
}

.menu__box {
  display: flex;
  align-items: center;
  flex-direction: row;
  position: static;
  float: right;
  top: 0px;
  right: 0px;
  left: auto;
  width: auto;
  height: 60px;
  min-height: auto;
  box-sizing: content-box;
  margin: 0;
  padding: 0;
  list-style: none;
  box-shadow: none;
  overflow: visible;
  background-color: transparent;
  z-index: 3;
  margin: 0;
  transition: all 0s ease;
}

.menu__item {
  padding-left: 15px; padding-right: 15px;
  padding-top: 0px; padding-bottom: 0px;
  margin: 0px;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 12pt;
  font-weight: 700;
  text-decoration: none;
  transition-duration: .25s;
  border-top: none;
  padding-top: 19px; padding-bottom: 19px;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
}

.menu__social {font-size: 15pt; padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px; margin: 0px;}

.final__social {padding-right: 15pt}

.menu__social:hover, .menu__social:active {text-shadow: 1px 1px 1px rgba(255,255,255, .75);}

.menu__dropdownitem {
  display: block;
  padding-top: 5px;
  padding-left: 11px;
  padding-right: 11px;
  padding-bottom: 5px;
  color: #ffffff;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 12pt;
  font-weight: 700;
  text-decoration: none;
  transition-duration: .25s;
  background-color: #000000;
}

.shows__dropdownhider, .more__dropdownhider {
  position: absolute; background-color: #282828;
 }

.menu__lastitem {border-bottom: none;}

.fa-caret-down {margin-left: 5px; font-size: 12pt; float: none;
 padding: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px}

.menu__highlight {background-color: transparent;
   font-family: 'Roboto', sans-serif; font-size: 9pt; font-weight: 500;
   border: 1px solid #ffffff;
   padding: 10px; margin-left: 10px; margin-right: 10px;
   border-radius: 5px; box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
   text-shadow: none;}

.menu__highlight:hover, .menu__highlight:active {background-color: #ffffff; color: #000000;}

.menu__box :nth-child(4) {order: 1;}

}

</style>

 

[Corey Klemow]

I also tried specifically targeting max-height in the transition CSS. No dice; same result. Works in expanded mode, broken in hamburger mode.

(Re: the max-height bug mentioned in my last post - I checked with a screenshot in photoshop and the 100% max-height is 60px... somehow inherited from either the nav bar or the menu box. Dunno why that is when it wasn't the case before.)

.shows__dropdownhider, .more__dropdownhider {max-height: 0; overflow: hidden; min-width: 165px;
   -webkit-transition: max-height .25s ease;
   -moz-transition: max-height .25s ease;
   -o-transition: max-height .25s ease;
   transition: max-height 0.25s ease;}

 

[OldMan]

When I was teaching I always warned against using positioning. It almost always leads to more and more positioning. You have 10 position statements.
FYI You have 4 link statements in your HTML body. They belong in the head. and "+Sans:ital,wght@0, ..." S/B "weight".
Your still using "
<i class="fa-solid fa-caret-down"></i>" without saying why.
Without the JS I can't get the submenus to show themselves. I looked up the classes of the said submenu "shows__dropdownhider" and found this:

.shows__dropdownhider, .more__dropdownhider {
  position: absolute; txop: 60px; background-color: #282828;
 }

txop S/B top.
There are a lot of wasted words in your code, you should go back over it and clean things up.

Glad you are happy with what you did. It fine. Love ya

 

[Corey Klemow]

See my previous posts - in my first reply to you, I mentioned that the <i> caret is a down-pointing caret in fontawesome that indicates a dropdown menu. The exact same caret is used in one of the WW3Schools demos you originally posted about! I also included the javascript in that post, and in the demo, it's directly underneath the menu html.

Yeah, there's a lot of crap in the code that I've started to erase - if I'm experimenting with turning something on and off, I'll temporarily add letters to the CSS to "break" it (hence the "txop" instead of "top") so I don't accidentally erase it completely. The CSS I posted two posts ago is a bit cleaner and I just updated the latest live demo I linked to in that post to reflect it. A lot of the position statements are part of the hamburger toggle button, which is code I copied from elsewhere and don't really understand how it works, so I don't wanna mess with it. So far as position statements I wrote, I've got it down to five - one position:fixed to set the navbar in place and the rest to properly position the menu box and dropdowns in the two layouts. (If you're looking at the demo, the CSS is at the bottom and yes I know that's not where it's supposed to go. 🙂 I'll eventually hive it off into a proper .css file when it's all done. You can ignore all the stuff in the body where I'm playing with a parallax plugin and a back-to-top scroller.)

I'm not gonna be 100% happy until the animation in hamburger mode is fixed. I built the hamburger menu first and the dropdown animation worked. Then I started building the expanded browser mode and the animation stopped working in hamburger mode. Then started again. And now has stopped again. Sigh.

Thanks for your help! You've at least moved me along to the point I'm at now. I just wanna get over this final hump! 🙂

 

[Corey Klemow]

Just made a Codepen to make it easier for folks to poke about:

https://codepen.io/cklemow/pen/JjmBrjq

 

[OldMan]

See my previous posts - in my first reply to you, I mentioned that the <i> caret is a down-pointing caret in fontawesome that indicates a dropdown menu. The exact same caret is used in one of the WW3Schools demos you originally posted about! I also included the javascript in that post, and in the demo, it's directly underneath the menu html.

Dah, sorry for being so dense. Was wondering why the fa- was in the tab. Been a while since I used those.

I use the // to comment out things I want to be able to reinstate cause they are easier to find than a strange word in the code.

Well, that's all I've got - Good Luck to you. You look like you got a strong handle on things.

The Oldman of coding fame.

 

[Corey Klemow]

Thank you again! Meanwhile, some more info in case anybody else happens along:

Just accidentally discovered that if I give a fixed height (not max-height, but height) to the dropdownholder div that wraps around the button and its associated dropdowns, the transition on the dropdowns work - but of course that doesn't work for this use case in the mobile view, where I need the height to be variable.

Also, if I remove the dropdownholder wrapper entirely, the dropdown transition works in mobile view... but I need that wrapper there to keep the dropdowns in their proper place for the expanded view.

Does this give any clue as to what might be happening?