View Full Version : How to make horizontal menus with horizontal Sub Menus in css

Jan 9th, 2011, 05:52 AM
Hello Friends

I am trying to make Horizontal Menus with Horizontals Sub menu but unable to do it because of my limited knowledge in css Can any one guide me how to do it ?


Jan 9th, 2011, 10:03 AM

Download one of these.
Look at the code.
Try to understand it.

Google is a great place for finding things like these.

Jan 10th, 2011, 05:53 AM
Thanks for the help. But actually i am trying to make SUB MENUS Horizontally in a horizontal Menu . Not just horizontal menu .

Jan 10th, 2011, 06:34 AM
Hello sultanrazashah,
Here's a pretty simple one - http://nopeople.com/CSS%20tips/new_empty-menu18_dropdown-flyout/index.html

In many of the menus dbrekelmans linked you to (http://cssmenumaker.com/drop_down_css_menu.php) all that's needed is some different styling. Remove the width on the child ul and the float on the dropped li's and it's horizontal instead of vertical.

Jan 10th, 2011, 01:15 PM
Thanks Guys . really helped me alot .

http://www.junctionz.net/admin5/sub_menu/ here is what i am working on but now i want that when i click its show the sub menu then . not on hover but on click what i suppose to do ?


Jan 10th, 2011, 03:05 PM
not on hover but on click what i suppose to do ?

/*ul#topnav li:hover span { display: block; color:#000000; }*/

<script type="text/javascript">
$(document).ready(function() {

$("ul#topnav li").click(function() { //Hover over event on list item
$("ul#topnav li").css({ 'background' : 'none'});
$("ul#topnav li").find("span").hide(); //Hide the subnav
$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav


Jan 11th, 2011, 06:48 AM
abduraooft .... I love you for that !!!!!!!!!!!