Hover in CSS not working

Question

I have a problem with the :hover selector in CSS not changing the display of another section. When I hover over the list items, they change color which is what I want, but they should also make the sub-menu appear.

When the 'list item' with id of #men is hovered over, it should change the display of the section with id #men_submenu from "display:none" to "display:block." This should happen for both 'men,' 'women' and 'youth.'

This is how they are normally displayed:

#men_submenu {
padding-top: 48px;
position: absolute;
display: none;
}
#women_submenu {
padding-top: 48px;
position: absolute;
display: none;
}
#youth_submenu {
padding-top: 48px;
position: absolute;
display: none;
}

This is what the display should change to, when the corrosponding list item is hovered over

#men:hover #men_submenu {
display: block;
}
#women:hover #women_submenu {
display: block;
}
#youth:hover #youth_submenu {
display: block;
}

I have separated the CSS in question at the bottom of the CSS section in JSFIDDLE

Here is the HTML and CSS in JSFIDDLE: http://jsfiddle.net/RBlair/907twm7m/1/

I am not currently worried about how it looks, just as long as it makes the sub-menu display, Thanks a lot!

your code seems to be correct. did you test different browsers? — vaheeds
– vaheeds, Commented Dec 7, 2014 at 7:00
I've tried Chrome, Firefox and Safari, but they don't seem to be working — RBlair
– RBlair, Commented Dec 7, 2014 at 7:05
You could use jQuery instead. jsfiddle.net/rdesai/907twm7m/3 — Rahul Desai
– Rahul Desai, Commented Dec 7, 2014 at 7:11
Thanks! With using jQuery, will I still be able to animate it when it appears? (Make it have a wipe effect as the menu is revealed) — RBlair
– RBlair, Commented Dec 7, 2014 at 7:18
@RahulDesai With using jQuery, will I still be able to animate it when it appears? (Make it have a wipe effect as the menu is revealed) — RBlair
– RBlair, Commented Dec 7, 2014 at 7:25

Rahul Desai · Accepted Answer · 2014-12-16 17:43:01Z

4

As I suggested in the comments, this can be achieved using jQuery.

Working Code Snippet:

$('#men').hover(function(){
    $('#men_submenu').slideDown('fast');
}, function(){
    $('#men_submenu').slideUp('fast');
});

#nav_wrapper {
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    box-shadow: 0px 5px 10px #444;
    display:inline;
    min-width: 1120px;
}
#nav {
    width: 550px;
    min-width: 550px;
    display: inline-block;
    padding-left: 120px;
    float: left;
}
#nav ul {
    list-style-type: none;
    padding: 0;
    position: relative;
    display: inline;
}
#nav ul li {
    display: inline-block;
    vertical-align: center;
    list-style-type: none;
}
#nav ul li a, visited {
    text-decoration: none;
    display: block;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 11px;
    padding-right: 11px;
    color: rgba(100, 100, 100, 1);
}
#nav ul li a:hover {
    color: rgba(255, 210, 0, 1);
    text-decoration: none;
}
#nav_content {
    padding-left: 13%;
    padding-right: 13%;
}
#nav_title {
    color: rgba(255, 210, 0, 1);
    font-family: HelveticaNeue-Light;
    font-size: 25px;
    display: inline;
    position: absolute;
    vertical-align: center;
    margin-top: 2px;
}
#search {
    float: right;
    vertical-align: center;
    margin-top: 5px;
}
#search_input {
    width: 125px;
    height: 18px;
    font-size: 10px;
    border-radius: 3px 3px;
    background-color: rgba(210, 210, 210, 1);
    border-style: solid;
    padding-left: 5px;
    border: none;
    vertical-align: text-bottom;
}
#search_submit {
    vertical-align: text-bottom;
    height: 21px;
    width: 21px;
    margin: 0;
    padding: 0;
}
#men:hover #men_submenu {
    display: block;
}
#women:hover #women_submenu {
    display: block;
}
#youth:hover #youth_submenu {
    display: block;
}
#men_submenu {
    padding-top: 48px;
    position: absolute;
    display: none;
}
#women_submenu {
    padding-top: 48px;
    position: absolute;
    display: none;
}
#youth_submenu {
    padding-top: 48px;
    position: absolute;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="nav_wrapper">
    <section id="nav_content">
        <section id="nav_title">NAME</section>
        <section id="nav">
            <ul>
                <li id="men"><a href="#">MEN</a>
                </li>
                <li id="women">	<a href="#">WOMEN</a>
                </li>
                <li id="youth">	<a href="#">YOUTH</a>
                </li>
                <li>	<a href="#">NEWS</a>
                </li>
                <li>	<a href="#">TEAM</a>
                </li>
                <li>	<a href="#">COMMUNITY</a>
                </li>
                <li>	<a href="#">BLOG</a>
                </li>
            </ul>
        </section>
        <section id="search">
            <form id="search" method="get" action="http://www.google.com/search">
                <input id="search_input" type="text" name="q" size="20" maxlength="100" placeholder="Search">
                <input id="search_submit" type="image" src="Images/Search2.png" alt="Search" height="22">
            </form>
        </section>
    </section>
</section>
<section id="men_submenu">
    <section class="snowboard_menu">Snowboard - Men</section>
    <section class="boot_menu">Boot - Men</section>
    <section class="binding_menu">Binding - Men</section>
    <section class="apparel_menu">Apparel - Men</section>
    <section class="accessiories_menu">Accessories - Men</section>
</section>
<section id="women_submenu">
    <section class="snowboard_menu">Snowboard - Women</section>
    <section class="boot_menu">Boot - Women</section>
    <section class="binding_menu">Binding - Women</section>
    <section class="apparel_menu">Apparel - Women</section>
    <section class="accessiories_menu">Accessories - Women</section>
</section>
<section id="youth_submenu">
    <section class="snowboard_menu">Snowboard - Youth</section>
    <section class="boot_menu">Boot - Youth</section>
    <section class="binding_menu">Binding - Youth</section>
    <section class="apparel_menu">Apparel - Youth</section>
    <section class="accessiories_menu">Accessories - Youth</section>
</section>

Working jsFiddle Demo with Sliding Animations

edited Dec 16, 2014 at 17:43

answered Dec 7, 2014 at 7:30

Rahul Desai

15.5k20 gold badges89 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

RBlair Over a year ago

I edited the code a bit, with it working for women and youth as well jsfiddle.net/RBlair/rLdtse86/3 but it seems to be a little bit glitchy when you move the mouse pointer over them fast, is there any way to solve this problem?

Rahul Desai Over a year ago

@RBlair It doesnt seem glitchy to me in the latest IE, Firefox and Chrome. Please elaborate on the glitch that you are getting.

RBlair Over a year ago

When i move the pointer over them really fast from one to another, there seems to be a delay and once I stop moving the mouse, they continue to change because of this delay

RBlair Over a year ago

I color-coded the menus then filmed what happened here: dl.dropboxusercontent.com/u/21519163/Dropdown%20Menu.mov That is just a small video file of what is happening

Rahul Desai Over a year ago

@RBlair Its just doing it as per the code. It wouldnt appear glitchy if you place the submenus below the respective menus. You may want to take a look at the available jQuery effects.

|

Akshay · Accepted Answer · 2014-12-07 07:03:47Z

1

IF this needs to work

#men:hover  #men_submenu {

the #men_submenu should be a child of #men i have edited your html to show you how it works http://jsfiddle.net/907twm7m/2/

 <li id="men"><a href="#">MEN</a>
                <section id="men_submenu">
 <section class="snowboard_menu">Snowboard - Men</section>
 <section class="boot_menu">Boot - Men</section>
 <section class="binding_menu">Binding - Men</section>
 <section class="apparel_menu">Apparel - Men</section>
 <section class="accessiories_menu">Accessories - Men</section>
</section>

Hover over men to see the result

answered Dec 7, 2014 at 7:03

Akshay

14.4k5 gold badges49 silver badges73 bronze badges

7 Comments

RBlair Over a year ago

That is what I previously had, but I changed it to not be a child element because I was not able to make it have a width of 100% of the body. When I do it this way and set width to 100%, it makes it 100% of the width of the nav, and not the whole page

Akshay Over a year ago

@RBlair do you really have to use percentage ? can't you just give width:1000px ? if you are trying to make it responsive use max-width and min-width

RBlair Over a year ago

could you show me that by editing the JSFIDDLE above? I'm not quite sure what you are meaning, sorry

Akshay Over a year ago

@RBlair if you are fine with jquery try this jsfiddle.net/907twm7m/4 or this jsfiddle.net/907twm7m/6

RBlair Over a year ago

Thanks so much!!!! Would it be possible to have just a simple animation of the section opening, not the text inside? (just like a wipe downwards then it reveals the text content of the section)

|

Collectives™ on Stack Overflow

Hover in CSS not working

2 Answers 2

6 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related