2

How can I get it so when I hover over Menu item 2 it will show the submenu-container?

Codepen

Do I need to add something on the LI or the A tag? I have tried

ul li a:hover .submenu-container {
    display: block;
}

but it didn't work

 <ul>
    <li>
        <a href="#">Menu 1</a>
    </li>
    <li>
        <a href="#">Menu 2</a>
    </li>        

 </ul>
 <div class="submenu-container">
    <ul class="Sub-Menu">
           <h3>SubMenu 1</h3>
       <li>
           <a href="#">Sub-Menu 1</a>
       </li>
       <li>
           <a href="#">Sub-Menu 2</a>
       </li>        
    </ul>



* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.submenu-container {
    padding: 50px 20px;
    background-color: red;
    display: none;
}

ul {
    list-style: none;
}

ul li {
    margin: 10px 0;
}

ul li a {
    text-decoration: none;
    display: block;
    font-size: 1.2rem;
}

Your ideas are appreciated.

Many thanks

Paul

Paul M
  • 435
  • 4
  • 13

2 Answers2

4

I would organize so that the submenu div is inside the menu 2 li and add:

ul li:hover .submenu-container {
  display: block;
}

See the full working example here:

    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
    .submenu-container {
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 50px 20px;
        background-color: red;
        display: none;
    }
ul li:hover .submenu-container {
  display: block;
}
    
    ul {
        list-style: none;
    }
    
    ul li {
        margin: 10px 0;
    }
    
    ul li a {
        text-decoration: none;
        display: block;
        font-size: 1.2rem;
    }
<div class=wrap>    

<ul>
        <li>
            <a href="#">Menu 1</a>
        </li>
        <li>
            <a href="#">Menu 2</a>
          <div class="submenu-container">
        <ul class="Sub-Menu">
            <h3>SubMenu 1</h3>
        <li>
            <a href="#">Sub-Menu 1</a>
        </li>
        <li>
            <a href="#">Sub-Menu 2</a>
        </li>        
    </ul>
  </div>
        </li>        
    </ul>

  </div>
John
  • 5,132
  • 1
  • 6
  • 17
2

I've changed you css selector to ul li:hover .submenu-container And then moved your sub-menu so it is inside the li with the hover selector

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.submenu-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 50px 20px;
    background-color: red;
    display: none;
}

ul {
    list-style: none;
}

ul li {
    margin: 10px 0;
}

ul li a {
    text-decoration: none;
    display: block;
    font-size: 1.2rem;
}

ul li:hover .submenu-container {
    display: block;
}
<ul>
  <li>
    <a href="#">Menu 1</a>
  </li>
  <li>
    <a href="#">Menu 2</a>
    <div class="submenu-container">
      <ul class="Sub-Menu">
        <h3>SubMenu 1</h3>
        <li>
          <a href="#">Sub-Menu 1</a>
        </li>
        <li>
          <a href="#">Sub-Menu 2</a>
        </li>
      </ul>
    </div>
  </li>

</ul>
Nico Shultz
  • 1,872
  • 1
  • 9
  • 23
  • 2
    This only sort of works, your sub menu disappears when trying to hover over it. See my answer for the proper way to do it. – John Dec 07 '20 at 15:47
  • thank you, yours would have worked if you didn't use the + symbol. With the + symbol I can't go into my sub menu e.g it disappears when I move off menu 2 – Paul M Dec 07 '20 at 15:51
  • 1
    Yeah you where right I've edited the answer – Nico Shultz Dec 07 '20 at 15:51