How to add Submenu dropdown for my CSS Menu

Hi guys, i am new to html and CSS and just trying to add a submenu to the current CSS menu i currently have now.

Link yo website : http://www.campjeunesserichelieu.com/New%20CJR/index.html

Here is my HTML code :

 <div id="navigaition_panel">
    <div class="nav">
      <ul>
        <li><a href="index.html" class="over">Accueil</a></li>
        <li><a href="about-us.html" >Inscription</a></li>

 ===========================================
              Need to insert Submenu here
                          <ul><li>Page1</li></ul>
                          <ul><li>Page2</li></ul>
                          <ul><li>Page3</li></ul>
=============================================

        <li><a href="#">Site</a></li>
        <li><a href="services.html">Média</a></li>
		<li><a href="contact.html">Contact</a></li>
	  </ul>
	  <div class="clear"></div>
    </div>
  </div>

Here is my current CSS :

#navigaition_panel {clear:both; background:url(../images/nav_gradient.gif) repeat-x 0 0; height:74px;}

.nav {margin:0px; padding:0px 0px 0px 80px;}
.nav ul{margin:0px 0px 0px 0px; padding:0px;}
.nav ul li{
	margin:0px;
	padding:0 1px 0 2px;
	list-style:none;
	text-transform:uppercase;
	float:left;
	color:#fff;
	text-align:center;
	display:block;
	font-size:12px;
	font-weight:bold;
	background-image: url(../images/nav_line.gif);
	background-repeat: no-repeat;
	background-position: 0px 5px;
}
.nav ul li a{float:left; width:auto; margin:0px; padding:29px 30px 30px 40px ; text-decoration:none; color:#303030  ; background:url(../images/menu_bg2.gif) no-repeat 0 0; display:block}
.nav ul li a:hover {float:left; background:url(../images/menu_bg2.gif )  no-repeat 0 bottom; display:block; }

.nav ul li a.over{float:left; background:url(../images/menu_bg2.gif )  no-repeat 0 bottom; display:block;}

Any help would be appreciated !!!

Here is how. Just copy and paste the demo code into your editor and save it. Then open your current page. And then merge the two checking with each edit that it still works. That way when it stops working you know why.

http://www.websitecodetutorials.com/code/css-nav-menus/css-drop-down-menu.php

thanks for the example but , i still need my menu to look the same … not like the one in the example … anyway i can modify mine to add a dropmenu ? …

Of course! Just add the nested ul and the css. I can’t code it now. Try your hand at it. It’s very easy. Try what I suggested above. Or someone else will code it for your soon I’m sure

Alright, so here is how far ive got :

Only problem is, when i go over LINK 2 … it show the submenu … but covers the LINK2 … it should show the options under LINK2…

Please help

My CSS so far :

#navigaition_panel {clear:both; background:url(…/images/nav_gradient.gif) repeat-x 0 0; height:74px;}
#nav {list-style:none; height:2em; margin:0px; padding:0px 0px 0px 80px;}
#nav li {
position:relative;
margin:0px;
padding:0 1px 0 2px;
list-style:none;
text-transform:uppercase;
float:left;
color:#fff;
text-align:center;
display:block;
font-size:12px;
font-weight:bold;
background-image: url(…/images/nav_line.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
}
#nav li:hover {
float:left; background:url(…/images/menu_bg2.gif ) no-repeat 0 bottom; display:block; }

#nav a {
float:left; width:auto; margin:0px; padding:29px 30px 30px 40px ; text-decoration:none; color:#303030 ; background:url(…/images/menu_bg2.gif) no-repeat 0 0; display:block
}
/* --------- Drop Down -------- */
#nav ul {
position:absolute;
left:-999em;
margin:0px 0px 0px 0px; padding:0px;
}
#nav li:hover ul { left:0; top:auto; background:url(…/images/menu_bg2.gif ) no-repeat 0 bottom; display:block;
}

you missed top:100%; on the #nav ul. that declaration serves to position the TOP of the submenu’s UL at the BOTTOM of the parent’s LI.

Hope that helps.

I tried added the TOP 100% and it did now work …

#nav ul {
position:absolute;
left:-999em;
margin:0px 0px 0px 0px; padding:0px;
top:100%;
}

Could you update your working example? The link you gave in post 1 doesn’t have a submenu at all. :frowning:

Sorry about that, give it another try now : http://www.campjeunesserichelieu.com/New%20CJR/index.html

When you click on Link 2 … Link2 goes away and show the 3 submenus , which is fine but … i need to LINK2 to stay visible also.

Thank you

Try changing this:

#nav li:hover ul { left:0;[COLOR="#FF0000"] top:auto;[/COLOR] background:url(../images/menu_bg2.gif )  no-repeat 0 bottom; display:block; }

to this

#nav li:hover ul { left:0;[COLOR="#FF0000"] top:100%;[/COLOR] background:url(../images/menu_bg2.gif )  no-repeat 0 bottom; display:block; }

and if that doesn’t work, then try this:

#nav li:hover ul { left:0;[COLOR="#FF0000"] top: 73px;[/COLOR] background:url(../images/menu_bg2.gif )  no-repeat 0 bottom; display:block; }

Thank you for the help, that did work ! but this is what i get now … button are not the same size and background colors changes …

Any idea why ? …

My CSS :

/************************************************************************************/
#navigaition_panel {clear:both; background:url(…/images/nav_gradient.gif) repeat-x 0 0; height:74px;}
#nav {list-style:none; height:2em; margin:0px; padding:0px 0px 0px 80px;}
#nav li {
position:relative;
margin:0px;
padding:0 1px 0 2px;
list-style:none;
text-transform:uppercase;
float:left;
color:#fff;
text-align:center;
display:block;
font-size:12px;
font-weight:bold;
background-image: url(…/images/nav_line.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
}
#nav li:hover {
float:left; background:url(…/images/menu_bg2.gif ) no-repeat 0 bottom; display:block; }

#nav a {
float:left; width:auto; margin:0px; padding:29px 30px 30px 40px ; text-decoration:none; color:#303030 ; background:url(…/images/menu_bg2.gif) no-repeat 0 0; display:block
}
/* --------- Drop Down -------- */
#nav ul {
position:absolute;
left:-999em;
margin:0px 0px 0px 0px; padding:0px;

}

#nav li:hover ul { left:0; top:100%; background:url(…/images/menu_bg2.gif ) no-repeat 0 bottom; display:block; }

Anyone ? …

Looks pretty good now! I guess you’ve found a solution. All I would add, to get rid of the bullets, is this:

#menu {list-style: none;}

Wow, thanks for the last piece of code, that did the trick !!!

Menu completed :slight_smile:

This place is great, awsome support.

Great, glad we could help. :slight_smile: I look forward to seeing you around here again.