Home/ Questions/Q 8882199
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T20:31:02+00:00

The menus are overlapping onto other menus. When you click the first menu About

  • 0

The menus are overlapping onto other menus. When you click the first menu “About Us” it opens. But when you click “Products”, the “About Us” don’t close so the “Products” menu overlaps to “About Us” menu.

jsfiddle

HTML

<body>
<nav>
   <ul class="nav">
        <li><a href="#"></a></li>
        <li class="menuabout"><a>About</a>
             <ul class="subnav01 clearfix">
                  <li><a href="#">About One</a></li>
                  <li><a href="#">About Two</a></li>
                  <li><a href="#">About Three</a></li>
                  <li><a href="#">About Four</a></li>
                  <li><a href="#">About Five</a></li>
                  <li><a href="#">About Six</a></li>
             </ul>
        </li>
        <li class="menuproducts"><a>Products</a>
             <ul class="subnav02 clearfix">
                  <li><a href="#">Product One</a></li>
                  <li><a href="#">Product Two</a></li>
                  <li><a href="#">Product Three</a></li>
                  <li><a href="#">Product Four</a></li>
                  <li><a href="#">Product Five</a></li>
                  <li><a href="#">Product Six</a></li>
             </ul>
        </li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
   </ul>             
</nav>

​

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100%;
    background: darkgray;
}

.nav {
    width: 100px;
    position: absolute;
    top: 30px;
    right: 20px;
    list-style: none;
}

.nav li {
    margin: 0 0 10px 0;
    font-family: Helvetica;
    font-size: 11px;
    text-align: right;
    text-transform: uppercase;
    line-height: 1;
}

.nav li:nth-child(5) {
    margin: 0;
}

.nav li a {
    height: 10px;
    padding: 10px 10px 10px 0;
    color: white;
    text-decoration: none;
    display: block;
    cursor: pointer;
    position: relative;
}

.subnav01, .subnav02 {
    width: 300px;
    position: absolute;
    top: 29px;
    left: -300px;
    display: none;
}
.subnav01 li, .subnav02 li {
    width: 150px;
    margin: 0;
    text-align: center;
    float: left;
}

.subnav01 li a, .subnav02 li a {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background: dodgerblue;
    height: 10px;
    display:block;
}

.subnav01 li a:hover, .subnav02 li a:hover {
    background: dimgray;
}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.active > a {
    background: dodgerblue !important;
}​

JS/jQuery/jQuery UI/

jQuery(document).ready(function($){
    $(".menuabout").on("click", function(){
        $(".subnav01").toggle ("slide", {direction: "right"}, "slow");
        $(this).toggleClass("active");
    });
    $(".menuproducts").on("click", function(){
        $(".subnav02").toggle ("slide", {direction: "right"}, "slow");
        $(this).toggleClass("active");
    });
});​
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    well you can try something like this. I’ve changed you class to menu for all menu elements, so you can use one function for all of them

    JSFIDDLE

    jQuery(document).ready(function($){
    $(".menu").on("click", function(){
        deactivateAll(this);
        toggle(this);
    });

    function deactivateAll(current) {
        $( "li" ).each(function( index, elem ){
            if (elem != current && $(elem).hasClass("active")) {
                toggle(elem);
            }
        });
    }

    function toggle(elem) {
        $(elem).find("ul").toggle ("slide", {direction: "right"}, "slow");
        $(elem).toggleClass("active");
    }
});​
    • 0