Question 11245 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

horizontal menu on hover dropdown problem – Jquery

I’m making a simple menu that opens on hover, but it doesn’t work properly. For example, if you move the mouse pointer away from the border of menu item "item2_item", the menu item does not disappear immediately. How to fix it best and is it worth using jQuery?

I’m making a simple menu that opens on hover, but it doesn’t work properly. For example, if you move the mouse pointer away from the border of menu item "item2_item", the menu item does not disappear immediately. How to fix it best and is it worth using jQuery?

nav ul#menu {
  background-color: #0073BE;
}

nav ul {
  list-style: none;
  padding: 0px;
  min-width: 10em;
}

nav .parent li:hover {
  background-color: orange;
}

nav {
  margin: 0 auto;
}

nav ul {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  padding: 8px 4px 8px 4px;
}

nav .parent {
  position: relative;
  line-height: 30px;
  font-size: 150%
}

nav .parent li {
  background-color: #E4EFF7;
  line-height: 30px;
  clear: both;
  font-size: 70%;
  display: inline-block;
  float: left;
  max-width: 90%;
  background-color: darkorange;
  margin: 3px;
  border-radius: 23px;
  line-height: 120%;
  padding: 8px 5px 8px 5px;
}

li.parent {
  color: yellow;
  cursor: pointer;
}

ul>li,
ul>li>ul>li {
  position: relative;
  float: left;
  padding: 3px 5px;
  margin: 10px 5px;
  cursor: pointer;
}

ul ul ul li {
  float: none;
}

li>ul {
  display: none;
}

li:hover>ul {
  position: absolute;
  display: block;
}

li {
  position: absolute;
}
<nav>
  <ul id='menu'>
    <li id='1' attr='end' href=2 depth='1' class='parent'>
      <span style='color:yellow'>item 1</span>
      <ul id='1'></ul>
    </li>
    <li id='2' attr='' depth='1' class='parent'>item 2
      <ul id='2'>
        <li id='2_1' attr='' depth='2' class='parent'>item2item1
          <ul id='21'>
            <li id='2_2' attr='end' depth='3' class='parent'>item2_1item
            </li>
          </ul>
        </li>
        <li id='22' style="z-index:-1" attr='end' depth='2'>item2item2</li>
      </ul>
  </ul>
</nav>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 

     /* * { outline: 1px dashed black} */
 
nav ul#menu {
  background-color: #0073BE;
}

nav {
  margin: 0 auto;
}

nav ul {
  list-style: none;
  padding: 0px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  padding: 0px 0px 0px 0px;
  left:30px;
}

nav .parent {
  position: relative;
  line-height: 30px;
  font-size: 150%
}

nav .parent li {
  background-color: #E4EFF7;
  clear: both;
  font-size: 70%;
  display: inline-block;
  float: left;
  background-color: darkorange;
  margin: 3px;
  border-radius: 23px;
  line-height: 120%;
  padding: 8px 5px 8px 5px;
}

li.parent {
  color: yellow;
  cursor: pointer;
  padding: 6px !important;
}


li>ul {
  display: none;
}

li:hover>ul {
  position: absolute;
  display: block;
}

nav .parent li:hover {
  background-color: orange;
}
    <nav>
  <ul id='menu'>
  <li class='parent'> NAV:</li>
     <li id='2' attr='' depth='1' class='parent'>SOMETHING
      <ul id='2'>
        <li id='2_1' attr='' depth='2' class='parent'>itemitemitem1
          <ul id='21'style="z-index:1">
            <li id='2_2' attr='end' depth='3' style="z-index:1" class='parent'>item1_1item</li>
              <li id='2_2' attr='end' depth='3' style="z-index:1" class='parent'>item1_2item</li>
                   <li id='2_2' attr='end' depth='3' style="z-index:1" class='parent'>item2_3item</li>
          </ul>
        </li>
          <li id='2_1' attr='' depth='2' class='parent'>itemitemitem2
          <ul id='21'>
            <li id='2_2' attr='end' depth='3' style="z-index:1" class='parent'>item1_1item</li>
              <li id='2_2' attr='end' depth='3' style="z-index:1" class='parent'>item1_2item</li>
                   <li id='2_2' attr='end' depth='3' style="z-index:1" class='parent'>item1_3item</li>
          </ul>
        </li>
      </ul>
    </li>
    <li id='2' attr='' depth='1' class='parent'>ANYTHING
      <ul id='2'>
        <li id='2_1' attr='' depth='2' class='parent'>itemitemitem1
          <ul id='21'style="z-index:1">
            <li id='2_2' attr='end' depth='3' style="z-index:1" class='parent'>item1_1item</li>
              <li id='2_2' attr='end' depth='3' style="z-index:1" class='parent'>item1_2item</li>
                   <li id='2_2' attr='end' depth='3' style="z-index:1" class='parent'>item1_3item</li>
          </ul>
        </li>
          <li id='2_1' attr='' depth='2' class='parent'>itemitemitem2
          <ul id='21'>
            <li id='2_2' attr='end' depth='3' style="z-index:1" class='parent'>item2_1item</li>
              <li id='2_2' attr='end' depth='3' style="z-index:1" class='parent'>item2_2item</li>
                   <li id='2_2' attr='end' depth='3' style="z-index:1" class='parent'>item2_3item</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>


  2. 0

    Here you add min-width to ul.I changed ul‘s min-width by depth dependсy

    Change this:

     nav ul {
    list-style: none;
    padding: 0px;
    min-width: 10em;
}

    To this:

     nav > ul {
    list-style: none;
    padding: 0px;
    min-width: 10em;
}

    Additional:

    nav > ul > li > ul > li > ul{
    right: 0;
    transform: translateX(100%);
    top: 0;
    padding: 0;    
}

    nav ul#menu {
    background-color: #0073BE;
}

nav > ul {
    list-style: none;
    padding: 0px;
    min-width: 10em;
}
nav > ul > li > ul > li > ul{
right: 0;
transform: translateX(100%);
top: 0;
padding: 0;    
}

nav .parent li:hover {
    background-color: orange;
}

nav {
    margin: 0 auto;
}

nav ul {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
      padding: 8px 4px 8px 4px; 
}

nav .parent {
    position: relative;
    line-height: 30px;
    font-size: 150%
}

nav .parent li {
      background-color: #E4EFF7;
    line-height: 30px;
    clear: both; 
    font-size:70%;
    display: inline-block;
      float: left;
    max-width:90%;
    background-color: darkorange;
      margin: 3px;
      border-radius: 23px;
      line-height: 120%;
      padding: 8px 5px 8px 5px;
}

li.parent {
    color: yellow;
    cursor: pointer;
}

ul > li,
ul > li > ul > li {
  position: relative;
  float: left;
  padding: 3px 5px;
  margin: 10px 5px;
  cursor: pointer;
}
ul ul ul li {
  float: none;
}
li > ul {
  display: none;
}
li:hover > ul {
  position: absolute;
  display: block;
}

li {
  position: absolute;
}
    <nav>
<ul id='menu'>
<li id='1' attr='end' href=2  depth='1' class='parent'>
<span style='color:yellow'>item 1</span><ul  id='1'></ul></li>
<li id='2' attr=''  depth='1' class='parent'>item 2<ul  id='2'>
<li id='2_1' attr='' depth='2' class='parent'>item2item1<ul id='21'>
<li id='2_2' attr='end'  depth='3' class='parent'>item2_1item
</li></ul>
</li>
<li id='22' style="z-index:-1" attr='end'   depth='2' >item2item2</li>
</ul>
</ul>
</nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search