CSS Hover dont work clearly

Question

I have in my menu two drop-down links. When you hover it, it will appear a gray area.

I have done this with pure CSS. The first dropdown doesn't work although it has the same CSS!

Just the second dropdown menu works.

What is going wrong?

HTML:

    <ul id="nav_menu">
        <li><a class="nav_menu_link">Startseite</a></li>
        <li class="nav_menu_drop nav_menu_link_drop_1"><a class="nav_menu_link">DropDown 1</a></li>
        <li class="nav_menu_drop nav_menu_link_drop_2"><a class="nav_menu_link">DropDown 2</a></li>
        <div id="dropdown">
            <div id="content1" style="display: none;">Contetn1</div>
            <div id="content2" style="display: none;">Content2</div>
        </div>
    </ul>

CSS:

#nav_menu {
    position: absolute;
    display: block;
    margin-left: 250px;
    height: 80px;
    width: 100%;
}
#nav_menu li {
    list-style-type: none;
    text-decoration: none;
    vertical-align: middle;
    height: 80px;
    display: inline-block;
    position: relative;
}
.nav_menu_link {
    color: #e4e7eb;
    font-size: 18px;
    font-family: Arial;
    vertical-align: baseline;
    position: relative;
    display: inline-block;
    height: auto;
    padding: 29px;
}
.nav_menu_link:hover {
    background: rgba(0, 0, 0, 0.4);
    color: #FFF;
    transition: all .2s;
}
.nav_menu_drop:hover + #dropdown {
    height: 500px;
    transition: height .35s;
}
.nav_menu_link_drop_1:hover + #dropdown #content1 {
    display: block !important;
    width: 100%;
    height: 500px;
    position: absolute;
}
.nav_menu_link_drop_2:hover + #dropdown #content2 {
    display: block !important;
    width: 100%;
    height: 500px !important;
    position: absolute;
}
#content1:hover {
    display: block !important;
    width: 100%;
    height: 500px !important;
    position: absolute;
}
#content2:hover {
    display: block !important;
    width: 100%;
    height: 500px !important;
    position: absolute;
}
#dropdown {
    width: 100%;
    margin-left: calc(-50% + 230px);
    top: 80px;
    height: 0;
    position: absolute !important;
    background: #C0C0C0;
    z-index: 10;
    transition: height .35s;
}
#dropdown:hover {
    height: 500px !important;
}

jsFiddle

score 1 · Accepted Answer · answered Mar 01 '14 at 04:19

1

+ is the adjacent sibling selector. Your #dropdown is not adjacent (directly after) the first link. YOu can instead use the general sibling selector ~

http://fiddle.jshell.net/x6s5R/2/

.nav_menu_drop:hover ~ #dropdown {
    height: 500px;
    transition: height .35s;
}
.nav_menu_link_drop_1:hover ~ #dropdown #content1 {
    display: block !important;
    width: 100%;
    height: 500px;
    position: absolute;
}

answered Mar 01 '14 at 04:19

James Montagne

77,516
14
110
130

A good explanation of `+` selector: http://stackoverflow.com/questions/1139763/what-does-the-plus-sign-css-selector-mean – Warlock Mar 01 '14 at 04:34

score 0 · Answer 2 · answered Mar 01 '14 at 04:17

You need some content for the first drop down to work.

http://plnkr.co/edit/AxV1aRZfHzZBy51tYAs0?p=info

 <ul id="nav_menu">
    <li><a class="nav_menu_link">Startseite</a></li>
    <li class="nav_menu_drop nav_menu_link_drop_1"><a class="nav_menu_link">DropDown 1</a></li>
    <div id="dropdown">
        <div id="content1" style="display: none;">Contetn1</div>
        <div id="content2" style="display: none;">Content2</div>
    </div>
    <li class="nav_menu_drop nav_menu_link_drop_2"><a class="nav_menu_link">DropDown 2</a></li>
    <div id="dropdown">
        <div id="content1" style="display: none;">Contetn1</div>
        <div id="content2" style="display: none;">Content2</div>
    </div>
</ul>

A document should never have multiple elements with the same `id`. — James Montagne, Mar 01 '14 at 04:23

CSS Hover dont work clearly

2 Answers2