CODEWITHSUNDEEP
javascriptcsshover
ADH - THE TECHIE GUY
ADH - THE TECHIE GUY

Reputation: 4403

How to hold a css style on hover

I have a menu and I'm added it's minimised code here.I wish to show the sub menu when user hover on the <a> tag associated with it.here the problem is => when I hover on <a> tag it's showing sub menu but when I try to select a sub menu item it's disappear.How can I fix this? 

.nav-sec-level{
  opacity:0;
  border:1px solid #000;
  }

a:hover + ul.nav-sec-level{
  opacity:1;
  }
<ul>
  <li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>

<li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>
</ul>

Note : I can apply the hover property only for the <a> tag.

Upvotes: 0

Views: 1576

Answers (6)

Hue
Hue

Reputation: 303

Instead of :hover on a use it on li, this way your submenu(.nav-sec-level) will also be a part of li so it will remain open on hover.

.nav-sec-level{
  display: none;
  border:1px solid #000;
  }

li:hover ul.nav-sec-level{
  display: block;
  }
<ul>
  <li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>

<li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>
</ul>

Upvotes: 0

Mukesh Parmar
Mukesh Parmar

Reputation: 123

Please apply following style instead of your style :

.nav-sec-level
{   
   border:1px solid #000;
   display:none;
   position:absolute;
   background-color:#CCCCCC;
 }

.side-bar:hover ul.nav-sec-level
{
  display:block;    
}

No changes in HTML code.

Thanks...

Upvotes: 0

Naveed Ramzan
Naveed Ramzan

Reputation: 3593

.nav-sec-level{
  display:none;
  border:1px solid #000;
  }
a:hover + ul.nav-sec-level{
  display:block;
}
<ul>
  <li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>

<li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>
</ul>

I hope it will work fine.

Upvotes: 0

Mois&#233;s Pio
Mois&#233;s Pio

Reputation: 423

So, that's happening because you are removing your cursor from the "a" element when you try to go to the submenu. A quick fix for that is just change your :hover to the "li" element and replace the opacity property to display.

Something like that:

.nav-sec-level{
  display:none;
  border:1px solid #000;
  }

li:hover ul.nav-sec-level{
  display: block;
  }
<ul>
  <li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>

<li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>
</ul>

Upvotes: 0

Chiller
Chiller

Reputation: 9738

try this code, this how usually submenu works

li.side-bar{
  position:relative;
  transition: all .5s;
}

.nav-sec-level{
  border:1px solid #000;
  position:absolute;
  top:100%;
  display:none;
  background:#fff;
  z-index:111;
  
  }

li.side-bar:hover > ul.nav-sec-level{
  display:block;
  }
<ul>
  <li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>

<li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>
</ul>

Upvotes: 1

Cecil
Cecil

Reputation: 351

.nav-sec-level{
  background: red;
  border:1px solid #000;
  display: none;
 }

.side-bar:hover .nav-sec-level{
   display: block;
}
<ul>
  <li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>

<li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>
</ul>

Upvotes: 2

Related Questions