Css + Jquery Dropdown Submenu Overflow

November 30, 2023 Post a Comment

I have a css menu as shown in the picture: When I put the mouse over 'Haschildren' I obtain: My question is: what shall I modify to avoid the overflow (the grey all-around the su

Solution 1:

I commented out two lines and added background-color to .header li a:

.header {
   background-color: #333;
   /*position: absolute;*/width: 100%;
   z-index: 3;
}
.headerul {
   margin: 0;
   padding: 0;
   list-style: none;
   /*overflow: hidden;*/background-color: #333;
}
.headerlia {
   display: block;
   padding: 20px20px;
   color: #f2f2f2;
   border-right: 1px solid #f4f4f4;
   text-decoration: none;
   background-color: #333;
}
.headerli {
   float: left;
}
.submenuul {
   background-color: #fff;
}
.sub-menuli {
   clear: both;
   display: none;
}
.sub-menulia {
   clear: both;
   border-right: 0px;
}

Solution 2:

You can make your .has-children li parent relative and make the .submenu absolute. You can then position the submenu with top, left etc. properties to fit your design

Solution 3:

<ulclass="top-level-menu"><li><ahref="index.html">Home</a></li><li><ahref="#">About Us</a><ulclass="second-level-menu"><li><ahref="#">History of the organisation</a></li><li><ahref="#">Objective of the company</a></li><li><ahref="#">Our Mission</a></li><li><ahref="#">Our Vision</a></li></ul></li></ul>

.third-level-menu
{
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.third-level-menu > li {
    background: #3a3836;
    border-bottom: 1px solid #fff;width: 135%;
}
.third-level-menu > li:hover { background: #CCCCCC; }

.second-level-menu
{
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}
.second-level-menu > lia{
    font-family: 'FuturaBT-Medium', sans-serif;
    font-size: 14px;
    font-weight: normal;    text-transform: none;}
.second-level-menu > li {
    position: relative;
    background: #231f1c;
    z-index: 9999999;
    text-align: left;width: 140%;
    border-bottom: 1px solid #fff;
}
.second-level-menu > li:hover { background: #CCCCCC; }

.top-level-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.top-level-menu > li {
    position: relative;
    float: left;
    width: 154px;
    margin: 00010px;
    display: inline;
    border-right: 1px solid;
    border-left: 1px solid;background-color: #231f1c;
}
.top-level-menu > li:hover {    background: #f4821e;
}

.top-level-menuli:hover > ul
{
    /* On hover, display the next level's menu */display: inline;
}


/* Menu Link Styles */.top-level-menua/* Apply to all links inside the multi-level menu */
{
    font: bold 14px Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    text-decoration: none;
    padding: 00010px;
    
    /* Make the link cover the entire list item-container */display: block;
    line-height: 30px;    text-transform: uppercase;
}
.top-level-menua:hover {
    color: #000;
}

<body><ulclass="top-level-menu"><li><ahref="index.html">Home</a></li><li><ahref="#">About Us</a><ulclass="second-level-menu"><li><ahref="#">History of the organisation</a></li><li><ahref="#">Objective of the company</a></li><li><ahref="#">Our Mission</a></li><li><ahref="#">Our Vision</a></li></ul></li></ul></body>

Solution 4:

Here is your answer I set the menu position absolute and submenu li position relative. And also use left right 0 and top: 40 to equal the line-height of the links. Also liveFiddle

$(document).ready(function() {
  $('.has-children').hover(
    function() {
      $(".sub-menu li").slideDown("slow");

    });

  $(".sub-menu").mouseleave(function() {
    $('.sub-menu li').hide();
  });
});

header {
  background-color: #000;
  padding: 10px0;
}

headerul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

headerulli {
  display: inline-block;
  position: relative;
}


/* sub navigation */.menuliul {
  background-color: #000;
  position: absolute;
  left: 0;
  top: 40px;
  /* make this equal to the line-height of the links (specified below) */right: 0;
}

.menua {
  line-height: 40px;
  padding: 012px;
  margin: 012px;
}

.menua {
  color: #fff;
  text-decoration: none;
  display: block;
}

.menua:hover,
.menua:focus,
.menua:active {
  color: #bbb;
}


/* style sub level links */.sub-menulia {
  margin: 010px;
  padding: 0;
}

.sub-menuli {
  position: relative;
  margin: 0;
  text-align: center;
   display: none; /* hide sub with css */
}

<scriptsrc="https://code.jquery.com/jquery-3.1.1.min.js"integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="crossorigin="anonymous"></script><headerclass="header"><ulclass="menu"><li><ahref="#work">Work</a></li><li><aclass="has-children"href="#about">Haschildren</a><ulclass="sub-menu"><li><ahref="#link1">Child 1</a></li><li><ahref="#link2">Child 2</a></li><li><ahref="#link3">Child 3</a></li></ul></li><li><ahref="#careers">Careers</a></li></ul></header>

Html5 Academy

Css + Jquery Dropdown Submenu Overflow

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "Css + Jquery Dropdown Submenu Overflow"