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%;
}
ralphm
April 3, 2013, 12:49pm
8
Could you update your working example? The link you gave in post 1 doesn’t have a submenu at all.
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
ralphm
April 3, 2013, 1:19pm
10
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; }
ralphm
April 3, 2013, 10:41pm
13
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
This place is great, awsome support.
ralphm
April 3, 2013, 11:26pm
15
Great, glad we could help. I look forward to seeing you around here again.