HTML/CSS Styling

Question

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>

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

Johannes · Accepted Answer · 2018-01-29 23:57:17Z

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

Thanks a lot. I was unaware of this sub menus. I will learn it now

Marco Sagripanti · Accepted Answer · 2018-01-29 11:35:13Z

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

answered Jan 29, 2018 at 11:35

Marco Sagripanti

11 silver badge1 bronze badge

Collectives™ on Stack Overflow

HTML/CSS Styling

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related