CODEWITHSUNDEEP
htmlcss
a.bad
a.bad

Reputation: 1

css dropdown menu not working,submenu dissapearing

I am facing a problem, when I hover over the parent the sub menu appears but when I try to select one of the items in the sub menu and remove the cursor from the parent, the sub menu dissapears.
I have seen multiple answers but none of them worked, well I am not sure if they did not work or it is just me that didn't understand correctly as I am new to this.
Here is the CSS code: 

.navclass > ul {
background-color:#5E5D5D;
color:#D8D8D8;
font-size:20px;
font-family:sans-serif;
}
.navclass > ul > li {
list-style-type: none;
display: inline-block;
padding:5px 30px;
position:relative;
}
.navclass > ul > li:hover {
background-color:#383838;
}
ul.sub-menu{
position:absolute;
background-color:#383838;
list-style-type: none;
width:173px;
padding-left:0px;
margin-left:0px;
padding-top:5px;
opacity:0;
}
ul.sub-menu li {
padding-left:25px;
padding-top:-5px;
padding-bottom:5px;
}
.navclass li:hover +.sub-menu{
opacity:1
}

And there is another problem and I think it is related to this one, I added an arrow to the menu but it isn't in the hover effect and I can't seem to understand why.
Here is the code:

<nav class='navclass'>
<ul>
     <li>pvp tutorials</li>
<ul class="sub-menu">
<li><a href="">the best clicking techniques</a></li>
<li><a href="aiming.html">get better at aiming</a></li>
<li><a href="strafingintroduction.html">strafing:introduction</a></li>
<li><a href="blockhitting.html">how to block hit</a></li>
</ul>
<span class="arrow">&#9660;</span>

Upvotes: 0

Views: 71

Answers (1)

Juan Bernal
Juan Bernal

Reputation: 107

The problem for the sub-menu disappearing is that the sub-menu is not inside of the parent li. If you move the sub-menu into the parent li and change the css from selecting .sub-menu next to the li to the .sub-menu that is a child of the li, then it will work as you expect:

.navclass li:hover .sub-menu

Check it out here.

As for the arrow not being in the hover effect, the solution is very similar to the one I stated above. Move the arrow into the parent li.

Upvotes: 2

Related Questions