Amith Amith - 6 months ago 10
HTML Question

How to make sub links appear when mouse upon a link

I have placed my code in http://jsfiddle.net/ChvjL/4/

While the mouse pointer is upon Link1 then the sub links link1a, link1b, link1c should appear.

Similarly for Link2 also.

Can anyone help me in resolving this

Thanks in advance
Amith

Answer

Here is an idea how it should be in your case:

html

<ul>
    <li><a href="#">Link1</a> 
        <ul>
            <li><a href="USEPCreate.html">Link1a</a></li>
            <li><a href="USEPUpdate.html">Link1b</a></li>
            <li><a href="USEPRecovery.html">Link1c</a></li>
        </ul>
    </li>
    <li><a href="#">Link2</a>
        <ul>
            <li><a href="USEPCreate.html">Link2a</a></li>
            <li><a href="USEPUpdate.html">Link2b</a></li>
            <li><a href="USEPRecovery.html">Link2c</a></li>
        </ul>
    </li>
</ul>

Css

ul > li { width:100px; float:left; }
ul > li > ul { display:none; }
ul > li:hover > ul { display:block; }
ul > li > ul { padding-left:10px; }

Code http://jsfiddle.net/ChvjL/10/

Comments