CODEWITHSUNDEEP
css
payIT
payIT

Reputation: 3

CSS hover drop down question

I was wondering is it possible to display the links contained in the nav element with the id value of sub-menu when I hover over the link with the id of more-subs using just CSS? If so how?

<nav id="main">
    <ul>    
        <li><a href="#" id="more-subs">More</a></li>        
    </ul>
</nav>


<nav id="sub-menu">
    <ul>    
        <li><a href="#">sub</a></li>
        <li><a href="#">sub</a></li>
        <li><a href="#">sub</a></li>
        <li><a href="#">sub</a></li>
        <li><a href="#">sub</a></li>        
    </ul>
</nav>

Upvotes: 0

Views: 148

Answers (3)

easwee
easwee

Reputation: 15915

You cannot travel up the DOM in css - only down (thus cascading).

If you can't change your html markup you will have to use a javascript solution to make this work.

Otherwise if you can change your html do it like this: http://jsfiddle.net/JdZUx/15/ (edited code in case you want to have multiple dropdowns)

<nav id="main">
    <ul>    
        <li>
            <a href="#" id="more-subs">More</a>
            <ul class="sub-menu">    
                <li><a href="#">sub</a></li>
                <li><a href="#">sub</a></li>
                <li><a href="#">sub</a></li>
                <li><a href="#">sub</a></li>
                <li><a href="#">sub</a></li>        
            </ul>
        </li>        
    </ul>
</nav>

#main .sub-menu {display:none;}
#main li:hover .sub-menu {display:block;width:200px;background:#ccc;}

Note: This is just basic code - if you want it to be crossbrowser compatible you will have to optimize and add some more rules. also :hover in IE6 is supported only on <a> element

Upvotes: 3

Yaroslav Bigus
Yaroslav Bigus

Reputation: 678

try use something like:

#more-subs #sub-menu{
  display: none;
}
#more-subs:hover #sub-menu{
  display: block;
}

Is this helps you?

Upvotes: 0

laradev
laradev

Reputation: 918

check this tutorial, i think it will help you.

https://www.servage.net/blog/2009/03/20/create-a-cool-css-based-drop-down-menu/

Upvotes: 3

Related Questions