3

I created a small example for learning HTML/CSS.

I have "Menu" and "Seasons" on the menu bar.

When the user places the mouse on the "Menu" (On hover) then "Item A" and "Item B" needs to be shown.

When the user places the mouse on "Item A" then "Item 1" and "Item 2" needs to be shown side to the "Item 1".

I tried to achieve it but am not getting it right. For me when I place the mouse on the "Menu" then its showing all the items like "Item A", "Item B", "Item 1" "Item 2".

I need "Item 1" and "Item 2" to be shown only when the cursor is place on "Item A" that too side to it without colliding the box.

Here's my code snippet

nav li {
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 10000;
}

nav li ul {
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 10000;
}

nav ul ul {
  font: 0/0 serif;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 2.5em;
  z-index: -1;
  -webkit-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
  z-index: 10000;
}

nav ul li:hover ul {
  display: inline;
  font: inherit;
  z-index: auto;
  z-index: 10000;
}

nav a,
nav span {
  background-color: red;
  color: black;
  display: block;
  margin: 0.2em 0 0 0;
  padding: 0.2em 0.1em 0.2em 0.1em;
  text-decoration: none;
  width: 13.6em;
  -webkit-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
  z-index: 10000;
}

nav ul li {
  margin: 0.2em 0 0 0.2em;
}

nav ul li ul {
  background-color: white;
  border: 1px solid black;
  width: 15.0em;
  nav ul li ul {
    background-color: white;
    border: 1px solid black;
    width: 15.0em;
  }
}

nav ul li ul li {
  background-color: white;
  width: 14.4em;
  padding: 0.0em 0.0em 0.0em 0.0em;
}

nav a:focus,
nav a:hover,
nav span {
  color: white;
  background-color: black;
  width: 13.4em;
}
<nav bgcolor="#727272">
  <ul>
    <li><a href="#">Menu</a>
      <ul>
        <li>
          <a href="#" target="ABC">Item A</a>
          <ul>
            <li><a href="#">Item 1</a>
            </li>
            <li><a href="#">Item 2</a></li>
          </ul>
        </li>
        <li>
          <a href="#" target="#">Item B</a>
      </ul>

      <li><a href="#">Seasons</a>
        <ul>
          <li>
            <a href="#" target="ABC">Season1 </a>
          </li>
          <li>
            <a href="#" target="ABC">Season 2</a>
        </ul>
  </ul>



  </li>

Improve this question
1
  • the html snippet is incomplete and in places badly formed. Can you add all the html that comprises the menu system?
    – Professor Abronsius
    Commented Jan 29, 2018 at 11:26

2 Answers 2

Reset to default
4

You have to distinguish between first-level and second-level submenus by using "direct descendant" selectors between the ul and li elements , i.e. >

That way, you can split up the CSS for those two levels like this:

nav > ul > li:hover > ul {
  display: block;
  font: inherit;
  z-index: 10000;
}

nav > ul > li > ul > li:hover > ul {
  display: block;
  position: absolute;
  left: 230px;
  top: 0;
  font: inherit;
  z-index: 20000;
}


nav li {
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 10000;
}

nav ul > li > ul {
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 10000;
}

nav ul > li > ul {
  font: 0/0 serif;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 2.5em;
  z-index: -1;
  -webkit-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
  z-index: 10000;
}

nav > ul > li:hover > ul {
  display: block;
  font: inherit;
  z-index: 10000;
}

nav > ul > li > ul > li:hover > ul {
  display: block;
  position: absolute;
  left: 230px;
  top: 0;
  font: inherit;
  z-index: 20000;
}

nav a,
nav span {
  background-color: red;
  color: black;
  display: block;
  margin: 0.2em 0 0 0;
  padding: 0.2em 0.1em 0.2em 0.1em;
  text-decoration: none;
  width: 13.6em;
  -webkit-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
  z-index: 10000;
}

nav ul li {
  margin: 0.2em 0 0 0.2em;
}

nav ul li ul {
  background-color: white;
  border: 1px solid black;
  width: 15.0em; 
}

nav ul li ul li {
  background-color: white;
  width: 14.4em;
  padding: 0.0em 0.0em 0.0em 0.0em;
}

nav a:focus,
nav a:hover,
nav span {
  color: white;
  background-color: black;
  width: 13.4em;
}
<nav bgcolor="#727272">
  <ul>
    <li><a href="#">Menu</a>
      <ul>
        <li>
          <a href="#" target="ABC">Item A</a>
          <ul>
            <li><a href="#">Item 1</a>
            </li>
            <li><a href="#">Item 2</a></li>
          </ul>
        </li>
        <li>
          <a href="#" target="#">Item B</a>
        </li>
      </ul>
    </li>

    <li><a href="#">Seasons</a>
      <ul>
        <li>
          <a href="#" target="ABC">Season1 </a>
        </li>
        <li>
          <a href="#" target="ABC">Season 2</a>
        </li>
      </ul>
    </li>
  </ul>

BTW: I added a few closing tags in my snippet which were missing in the code posted in the question

Improve this answer
1
  • Thanks a lot. I was unaware of this sub menus. I will learn it now
    – John
    Commented Jan 29, 2018 at 16:45
0

You should change your:

nav ul li:hover ul {
    display: inline;
    font: inherit;
    z-index: auto;
    z-index: 10000;
}

To:

nav>ul li:hover>ul {
    display: inline;
    font: inherit;
    z-index: auto;
    z-index: 10000;
}
nav>ul li:hover>ul li:hover li {
    display: inline;
    font: inherit;
    z-index: auto;
    z-index: 10000;
}

"Nav ul" means Every ul in a nav.
"Nav>ul" means Only ul direct child of nav.

https://www.w3schools.com/cssref/sel_element_gt.asp

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.