expanding tabs

[HunainHafeez]

<div>
     <div style="position:fixed">
      <ul>
       <li><a href="#home">Home</a></li>
       <li><a href="#news">Profile</a></li>
       <li><a href="adminViewEmployers.aspx">Employers</a></li>
       <li><a href="adminViewApplicants.aspx">Applicants</a></li>
       <li><a href="#about">Super Admins</a></li>
     </ul>
    </div>

designed a vertical menu in css , it has 4 clickable links

HOME
APPLICANTS
EMPLOYERS
PROFILE

Now i want that when i click on APPLCIANTS then within this menu it should open 2 more clickable links like this:>

HOME

APPLICANTS

Active Applicants

Inactive Applicants

EMPLOYERS

PROFILE

[JorgeM]

I may have a sample. Will ck when I get back to the office.

[simplypixie]

Change your Applications LI to this (and add a class to your parent ul):

<ul class="vertical-menu">
.
.
<li><a href="#">Applicants</a>
    <ul class="submenu">
      <li><a href="active-applicants.aspx">Active Applicants</a></li>
      <li><a href="inactive-applicants.aspx">Inactive Applicants</a></li>
    </ul>
</li>
.
.
</ul>

And in your CSS (please change or add any additional required styling, this is the bare bones to show the sub-menu out to the right of the main menu)

ul.submenu {
    position: absolute;
    left: -999px;
    margin-left: 160px; /* This should be the same as the width of your main menu */
    z-index: 1000;
}
.vertical-menu li:hover ul.submenu {
    left: auto;
}