Click here to Skip to main content
13,139,682 members (53,541 online)
Rate this:
 
Please Sign up or sign in to vote.
See more:
heyy..


I try a menu bar in this link :-
http://www.cssportal.com/css3-menu-generator/[^]


In this menu have only parent menu .. I want to add a child menu and it display in side..

I tried but failed get the child menu on side

here is my code ;-


<ul id="menu-bar">
     <li><a href="#">Security</a>
         <ul>
             <li><a href='~/ContentPages/PrivilegeManagement/AddPrivileges.aspx?MenuId=2'>Privilege
                 Management</a>
                 <ul>
                     <li><a href='~/ContentPages/PrivilegeManagement/AddPrivileges.aspx?MenuId=2'>Add Privilege</a></li>
                     <li><a href='~/ContentPages/PrivilegeManagement/SearchPrivileges.aspx?MenuId=3'>Search
                         Privilege</a> </li>
                 </ul>
             </li>
             <li><a href='~/ContentPages/PrivilegeManagement/SearchPrivileges.aspx?MenuId=3'>User
                 Management</a>
                 <ul>
                     <li><a href='~/ContentPages/UserManagement/AddUser.aspx?MenuId=5'>Add User</a></li>
                     <li><a href='~/ContentPages/UserManagement/SearchUser.aspx?MenuId=6'>Search User</a></li>
                     <li><a href='~/ContentPages/UserManagement/ChangePassword.aspx?MenuId=13'>Change Password</a></li>
                 </ul>
             </li>
         </ul>
     </li>
     <li><a href='#'>Masters</a>
         <ul>
             <li><a href='~/ContentPages/Location/Location.aspx?MenuId=8'>Add Location</a></li>
             <li><a href='~/ContentPages/Location/LocationSearch.aspx?MenuId=9'>Search Location</a></li>
         </ul>
     </li>
 </ul>
Posted 8-Jul-13 1:38am

1 solution

Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

try this code






#coolMenu,
#coolMenu ul {
list-style: none;
}
#coolMenu {
float: left;
}
#coolMenu > li {
float: left;
}
#coolMenu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#coolMenu ul li a {
width: 100px;
}
#coolMenu li:hover ul.noJS {
display: block;
}


/* Main menu
------------------------------------------*/
#coolMenu {
font-family: Arial;
font-size: 12px;
background: #2f8be8;
}
#coolMenu > li > a {
color: #fff;
font-weight: bold;
}
#coolMenu > li:hover > a {
background: #f09d28;
color: #000;
}


/* Submenu
------------------------------------------*/
#coolMenu ul {
background: #f09d28;
}
#coolMenu ul li a {
color: #000;
}
#coolMenu ul li:hover a {
background: #ffc97c;
}









<ul id="coolMenu">
<li><a href="#" >Security</a>
<ul class="noJS">
<li><a href='~/ContentPages/PrivilegeManagement/AddPrivileges.aspx?MenuId=2'>Privilege
Management</a>
<ul class="noJS">
<li><a href='~/ContentPages/PrivilegeManagement/AddPrivileges.aspx?MenuId=2'>Add Privilege</a></li>
<li><a href='~/ContentPages/PrivilegeManagement/SearchPrivileges.aspx?MenuId=3'>Search
Privilege</a>
</li>
</ul>
</ul>
</li>


<li><a href='~/ContentPages/PrivilegeManagement/SearchPrivileges.aspx?MenuId=3'>UserManagement</a>
<ul class="noJS">
<li><a href='~/ContentPages/UserManagement/AddUser.aspx?MenuId=5'>Add User</a></li>
<li><a href='~/ContentPages/UserManagement/SearchUser.aspx?MenuId=6'>Search User</a></li>
<li><a href='~/ContentPages/UserManagement/ChangePassword.aspx?MenuId=13'>Change Password</a></li>
</ul>
</li>

</li>
<li><a href='#'>Masters</a>
<ul class="noJS">
<li><a href='~/ContentPages/Location/Location.aspx?MenuId=8'>Add Location</a></li>
<li><a href='~/ContentPages/Location/LocationSearch.aspx?MenuId=9'>Search Location</a></li>
</ul>
</li>
</ul>
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy |
Web01 | 2.8.170915.1 | Last Updated 8 Jul 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100