CODEWITHSUNDEEP
cssmenudropdown
Alex Anderson
Alex Anderson

Reputation: 3

CSS Dropdown Menu disappearing

I have created a side drop down menu and everything is positioned however every time I go to move my cursor onto the menu it disappears, I have a feeling this is something to do with the :hover I have used but I cannot seem to get it stop disappearing Can anyone help?

my html is :

<div class="navBar">
    <ul>
        <li class="navText"><a href="#">L1</a></li>
        <li class="navText dropdownTrigger">L2</li>


                <ul class="dropdown">
                    <li><a href="#">L6</a></li>
                    <li><a href="#">L7</a></li>
                    <li><a href="#">L8</a></li>
                    <li><a href="#">L9</a></li>
                    <li><a href="#">L10</a></li>
                </ul>

        <li class="navText"><a href="#">L3</a></li>
        <li class="navText"><a href="#">L4</a></li>
        <li class="navText"><a href="#">L5</a></li>

    </ul>

</div>

my css is : 

* {
    padding:0px;
    margin:0px;
}

body {
    background-color:rgba(17,17,17,1);
    background-size:cover;
}

.navBar {
    position:fixed;
    width:70px;
    height:100%;
    padding-top:100px;
    background-color:rgba(255,255,255,0.5);
    text-align:center;
}

.navBar > ul > li,
.navBar > ul > li > a  {
    margin-top:70px;
    text-decoration:none;
    display:block;
    color:black;
    font-family:"Constantia";
    font-size:30px;

}

.navBar > ul > ul > li,
.navBar > ul > ul > li > a {
    display:block;
    list-style-type:none;
    text-decoration:none;
    color:black;
    font-family:"Duan Penh";
    font-size:24px;
}


.navBar a:hover,
.navBar li:hover {
    background-color:rgba(0,0,0,0.5);
    color:white;
    font-weight:bold;
}
.navBar > ul > ul {
    background-color:rgba(255,255,255,0.5);

    width:200px;
    height:auto;
    margin-left:70px;
    margin-top:-35px;
    position:absolute;
    display:none;


}

.dropdownTrigger:hover ~ .dropdown {
    display:block;
}

Upvotes: 0

Views: 70

Answers (1)

devtye
devtye

Reputation: 302

Try this

.dropdownTrigger:hover ~ .dropdown, .dropdown:hover {
    display:block;
}

jsFiddle : https://jsfiddle.net/ojf32faz/

Upvotes: 1

Related Questions