CODEWITHSUNDEEP
htmlcss
mk_89
mk_89

Reputation: 2742

On hover display multiple siblings

I am trying to create a simple drop-down menu which hides the sub-menu anchors until a main menu anchor is being hovered over.

html markup

 <ul>
    <li><a href=".">1</a></li>
    <li><a href=".">2</a></li>
    <li>
       <a href=".">3</a>
       <a href=".">3.1</a>
       <a href=".">3.2</a>
    </li>
 </ul>

css styles

 <style>
    ul li a:nth-child(n+2){
       display:none;
    }

    ul li a:nth-child(n+2):hover{
       display:block;
    }

    ul li a:hover + a:nth-child(n+2) {
       display: block;
    }
</style>

currently this only displays the first anchor of the sub-menu (3.1) when I need it to be able to display all other anchors of the sub-menu 3.2....3.n, how do I achieve this?

Upvotes: 0

Views: 99

Answers (1)

Oriol
Oriol

Reputation: 288500

You should use this:

HTML:

<ul id="container">
    <li><a href=".">1</a></li>
    <li><a href=".">2</a></li>
    <li><a href=".">3</a>
        <ul>
            <li><a href=".">3.1</a></li>
            <li><a href=".">3.2</a></li>
        </ul>
    </li>
</ul>

CSS:

#container>li>ul{
   display:none;
}

#container>li:hover>ul{
   display:block;
}

Demo: http://jsfiddle.net/Tx4z7/

You could add also a padding to the submenu:

#container>li>ul{
    padding-left:20px;
}

Demo: http://jsfiddle.net/Tx4z7/1/

Upvotes: 1

Related Questions