[Joshdw]

Hey once again fellow members.

I have made a really quick navigation menu in HTML and CSS. I really need help adding Drop Down to it though. Can anybody here help me? Or lead me to a tutorial that isn't to complicated. Thanks.

CSS:

#navba{width:auto; height:36px; background:url(./img/navbar-bg.png) left top repeat-x; }
#navba .inbar{display:block; height:36px; background:url(./img/right-round.png) right top no-repeat; }
#navba ul, #navba ul li{border:0px; margin:0px; padding:0px; list-style:none; height:36px;
line-height:36px; } #navba ul{background:url(./img/left-round.png) left top no-repeat; }
#navba ul li{ float:left; display:block; line-height:36px; }
#navba ul li a{ color:#403e32; text-decoration:none; font-weight:bold; display:block; }
#navba ul li a span{padding:0 20px 0 0; height:36px; line-height:36px; display:block; margin-left:20px; }
#navba .navhome a, #navba .navhome a:hover{background:url(./img/a-bg.png) left top no-repeat; height:36px; line-height:36px; }
#navba .navhome a span, #navba .navhome a:hover span{ color:#FFFFFF; background:url(./img/span-bg.png) right top no-repeat; height:36px; line-height:36px; }
#navba ul li a:hover{ background:url(./img/ahover-bg.png) left top no-repeat; height:36px; line-height:36px; }
#navba ul li a:hover span{ background:url(./img/spanhover-bg.png) right top no-repeat; height:36px; line-height:36px; } 

HTML:

<div id="navba">
<span class="inbar">
<ul>
<li class="navhome"><a href="page1.php"><span>Home</span></a></li> 
<li><a href="page2.php"><span>About Us</span></a></li>
</ul>
</span>
</div>

Thanks Once Again!!

[EnvXOwner]

Joshdw, on 19 December 2010 - 12:42 PM, said:

Hey once again fellow members.

I have made a really quick navigation menu in HTML and CSS. I really need help adding Drop Down to it though. Can anybody here help me? Or lead me to a tutorial that isn't to complicated. Thanks.

CSS:

#navba{width:auto; height:36px; background:url(./img/navbar-bg.png) left top repeat-x; }
#navba .inbar{display:block; height:36px; background:url(./img/right-round.png) right top no-repeat; }
#navba ul, #navba ul li{border:0px; margin:0px; padding:0px; list-style:none; height:36px;
line-height:36px; } #navba ul{background:url(./img/left-round.png) left top no-repeat; }
#navba ul li{ float:left; display:block; line-height:36px; }
#navba ul li a{ color:#403e32; text-decoration:none; font-weight:bold; display:block; }
#navba ul li a span{padding:0 20px 0 0; height:36px; line-height:36px; display:block; margin-left:20px; }
#navba .navhome a, #navba .navhome a:hover{background:url(./img/a-bg.png) left top no-repeat; height:36px; line-height:36px; }
#navba .navhome a span, #navba .navhome a:hover span{ color:#FFFFFF; background:url(./img/span-bg.png) right top no-repeat; height:36px; line-height:36px; }
#navba ul li a:hover{ background:url(./img/ahover-bg.png) left top no-repeat; height:36px; line-height:36px; }
#navba ul li a:hover span{ background:url(./img/spanhover-bg.png) right top no-repeat; height:36px; line-height:36px; } 

HTML:

<div id="navba">
<span class="inbar">
<ul>
<li class="navhome"><a href="page1.php"><span>Home</span></a></li> 
<li><a href="page2.php"><span>About Us</span></a></li>
</ul>
</span>
</div>

Thanks Once Again!!

You need to use jQuery. Google "how to make a drop down navigation bar with jquery".

[Joshdw]

Thanks for the comment, I did have a look before but my problem is every single "tutorial" I find tells you how to make a NEW one. I would like to EDIT my current one

[Sadin56]

Joshdw, on 20 December 2010 - 09:46 AM, said:

Thanks for the comment, I did have a look before but my problem is every single "tutorial" I find tells you how to make a NEW one. I would like to EDIT my current one

Then read up on jquery...