Jump to content
Sign in to follow this  

html/css settings to keep dropdown menu open. How?

Recommended Posts



I have the following issue with this dropdown menu.
The menu is a side panel. Clicking on the option shows the desired page but,
the problem is that the options in the submenus (level 2 and 3) jump away / dissappear
one way or another. 
What I want to see as a result is: if is clicked on a submenu then the submenu is still visible.

Is there someone who can give a solution about how to solve this.



           if (!isset($_GET['menuquery'])){

                  <meta charset="utf-8" />
                  <link rel="prefetch" href="http://">

              <link rel="stylesheet" type="text/css" href="http://localhost/Begin/CSS/sidepanel/sidepanel-frm.css" media="screen" />

                  <title>Control Panel </title>


          <body style="color: white;">

          <div class="sidepanel_wrap">
          <div class="pan_left">
           <div style="height: 50px;">

           <?php echo $_SERVER['HTTP_HOST']; ?>

           <div class="sidenav">

            <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=home">Home</a>

             <button class="dropdown-btn">Level-1a
              <i class="fa fa-caret-down"></i>
            <div class="dropdown-container">
              <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=level2a">Level-2a</a>
              <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=level2b">Level-2b</a>
              <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=level2c">Level-2c</a>
              <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=level2d">Level-2d</a>

             <button class="dropdown-btn">Level-1b
              <i class="fa fa-caret-down"></i>
            <div class="dropdown-container">
               <button class="dropdown-btn">Level-2b
              <i class="fa fa-caret-down"></i>
            <div class="dropdown-containerl3">
              <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=level3a">level-3a</a>
              <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=level3b">Level-3b</a>




          <div style="color: black;">

          if (!isset($_GET['menuquery'])){

                  echo 'welcome';


              if (isset($_GET['menuquery'])){

                  if (($_GET['menuquery']) == 'home' ){ 

                      echo '<br>you clicked home !';

                  if (($_GET['menuquery']) == 'level2a' ){ 

                      echo '<br>you clicked level2a !';
                  if (($_GET['menuquery']) == 'level2b' ){ 

                      echo '<br>you clicked level2b !';

                  if (($_GET['menuquery']) == 'level2c' ){ 

                      echo '<br>you clicked level2c !';

                  if (($_GET['menuquery']) == 'level2d' ){ 

                      echo '<br>you clicked level2d !';



          /* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
          var dropdown = document.getElementsByClassName("dropdown-btn");
          var i;

          for (i = 0; i < dropdown.length; i++) {
            dropdown[i].addEventListener("click", function() {
              var dropdownContent = this.nextElementSibling;
              if (dropdownContent.style.display === "block") {
                dropdownContent.style.display = "none";
              } else {
                dropdownContent.style.display = "block";








          .sidepanel_wrap {

              width: 1880px;
              height: 860px;
              /*border: solid blue 2px;*/
              display: flex;
              flex-direction: row;


          .pan_left {
              display: inline-block;
              width: 235px;
              height: 860px;
              background-color: #67591F;
               color: #F3E5AB;


          .main_panel_wrap {

              width: 1640px;
              height: 860px;


          /* Fixed sidenav, full height */
          .sidenav {
              width: 235px;
              height: 700px;
              position: relative;
              z-index: 1;
              top: 10;
              left:  0;
             background-color: #67591F;
              overflow-x: hidden;
              padding-top: 20px;

          /* Style the sidenav links and the dropdown button */
          .sidenav a, .dropdown-btn {
              padding: 6px 8px 6px 16px;
              text-decoration: none;
              font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans,serif;

              font-size: 14px;

              color: #93FFE8;
              display: block;
              border: none;
              background: none;
              width: 100%;
              text-align: left;
              cursor: pointer;
              outline: none;

          /* On mouse-over */
          .sidenav a:hover, .dropdown-btn:hover {
              color: #f1f1f1;


          /* Add an active class to the active dropdown button */
          .active {
              background-color: #4863A0;
              color: white;

          /* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
          .dropdown-container {

              display: none;

              background-color: #2B547E;
              padding-left: 0px;
              color: yellow;


           .dropdown-containerl3 {
              display: none;
              background-color: #566D7E;
              padding-left: 0px;


          /* Optional: Style the caret down icon */
          .fa-caret-down {
              float: right;
              padding-right: 20px;
              color: #93FFE8;


          /* Some media queries for responsiveness */
          @media screen and (max-height: 450px) {
              .sidenav {padding-top: 15px;}
              .sidenav a {font-size: 18px;}


Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this