CODEWITHSUNDEEP
htmlcsscss-selectors
Arawn
Arawn

Reputation: 27

How to select inner div in an unordered list

I am trying to create a navigation menu with markup as follows:

<ul id="ul1">
        <li><a href="#">Link 1</a>
            **<div>**
                <p>SOME STUFF</p>
                <ul>
                    <li><a href="#">Link 1.1</a><**div** class="innerdiv"></div></li>
                    <li><a href="#">Link 1.2</a><**div** class="innerdiv"></div></li>
                    <li><a href="#">Link 1.3</a><**div** class="innerdiv"></div></li>
                    <li><a href="#">Link 1.4</a><**div** class="innerdiv"></div></li>
                </ul>
            </div>
        </li>
        .
        .(WITH MORE <LI>'S OFC :))
        .
</ul>

Now, I want to make the outer div visible when I hover on Link 1...This is easily done using CSS:

#navbar ul li div
{
    min-width:500px;
    min-height:130px;
    background-color:#dfdfdf;
    position:absolute;
    left:0px;
    top:32px;
    visibility:hidden;
}

#navbar ul li:hover div
{
    visibility:visible;
}

Next I want that inner div be visible only when I hover on inner links like link 1.1,1.2.. This is causing problems cause I'm using #(id)-selector taking the #navbar as base ID and this is causing the inner divs to inherit the css from outer div ...THAT IS TO SAY THAT WHEN I HOVER ON OUTER LINKS THE BEHAVIOUR OF THE INNER DIV CHANGE TOO WHICH I DON'T WANT...if u understand what I mean..

I WANT THAT OUTER DIV SHOULD BE VISIBLE WHEN I HOVER ON OUTER LINKS(LINK 1,2,3) AND INNER DIV BE VISIBLE WHEN I HOVER ON INNER LINKS(LINK 1.1,1.2,1.3) SCREENSHOT OF THE NAVMENU

SCRREN SHOT OF THE MENU: God this is confusing... Kindly help in this respect by telling how to specifically select the inner div's or tell a workaround using JS or Jquery....currently I'm using the selectors

#navbar ul li div ul li div , and
#navbar ul li div ul li a:hover div

Upvotes: 0

Views: 202

Answers (2)

Tobias Lindgreen
Tobias Lindgreen

Reputation: 297

I would just change the visibillity of the list item.

ul li ul li { .... }

Furthermore i don't see your "navbar" id anywhere? Neither a ..

Upvotes: 0

steveukx
steveukx

Reputation: 4368

If your div is initially not displayed:

#navbar div {
  display: none;
}

You can make them visible when the container LI is hovered:

#navbar li:hover > div {
  display: block;
}

The > operator is used to select direct descendants, so here only the div elements that are immediate child nodes of the li that is currently being hovered will be made visible. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

Upvotes: 1

Related Questions