CODEWITHSUNDEEP
htmlcssdrop-down-menu
Batsu
Batsu

Reputation: 61

sub-menu won't appear on hover

I'm having a hard time getting css to make the menu appear when a mouse is hovering over the main menu items. How do I select the submenu when the main menu is on hover?

HTML

      <ul class="mainNav">
            <li><a href="">Home</a></li>
            <li class="dropdown"><a href="">Treatments</a>
                <ul>
                    <li><a href="">Body Treatments</a></li>
                    <li><a href="">Make Up</a></li>
                    <li><a href="">Skincare</a></li>
                </ul>
            </li>
            <li><a href="">Gallery</a></li>
        </ul>

CSS

.mainNav
{
height: 43px;
list-style: none;
}
.mainNav li
{
float: left;
position: relative;
border-right: 1px solid #f0f986;
font-size: 1.15em;
height: 50px;
list-style-type: none;
}
.mainNav li a
{
text-decoration: none;
padding: 13px 1.03em 10px;
display: block;
white-space: nowrap;
font-size: 1.3em;
font-weight: 600;
color: White;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}
.mainNav li a:hover, .mainNav li a:focus
{
color: #dbeaa5;
background: #404e11;
}
.mainNav span
{
font-size: 19px;
position: relative;
right: -5px;
top: 2px;
line-height: 1px;
}

.dropdown ul
{
position: absolute;
top: 43px;
z-index: 100;
visibility: hidden;
}
.dropdown ul li a
{
background: none;
text-align: left;
display: block;
}
li li
{
width: 100%;
}

Any assistance would be appreciated. I'm sure this is quite simple for most of you!

Upvotes: 0

Views: 250

Answers (4)

Raydot
Raydot

Reputation: 1576

Yes, as others have been commenting you need something to toggle the state of the dropdown class. This can be done in a lot of ways, visibility and positioning being the two most widely used.

Upvotes: 0

Devima
Devima

Reputation: 1566

You can also animate the menu using css transitions.
So change your css selectors

.dropdown ul{
    display:block;
    position: absolute;
    top: 43px;
    z-index: 100;
    overflow:hidden;
    background-color:red;
    height: 0px;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
}

.dropdown:hover ul {
    visibility: visible;
    height:200px;
}

Upvotes: 0

LOTUSMS
LOTUSMS

Reputation: 10240

Change

.dropdown ul
 {
     position: absolute;
     top: 43px;
     z-index: 100;
     visibility: hidden;
 }

to 

.dropdown ul
 {
     position: absolute;
     top: 43px;
     z-index: 100;
     display:block;
 }

At least until you start using JQuery to toggle it on/off

Upvotes: 0

Felix
Felix

Reputation: 38102

You can change the visibility of your submenu to visible when hover on the .dropdown list item:

.dropdown:hover ul {
    visibility: visible;
}

Fiddle Demo

Upvotes: 1

Related Questions