CODEWITHSUNDEEP
htmlcsscss-selectors
John
John

Reputation: 565

HTML/CSS Styling

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>

Upvotes: 3

Views: 115

Answers (2)

Johannes
Johannes

Reputation: 67798

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

Upvotes: 4

Marco Sagripanti
Marco Sagripanti

Reputation: 1

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

Upvotes: 0

Related Questions