3 Replies - 1458 Views - Last Post: 20 December 2010 - 09:18 PM

#1 Joshdw  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 225
  • Joined: 23-March 09

Need help with a dropdown menu (HTML + CSS)

Posted 19 December 2010 - 11:42 AM

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!!

Is This A Good Question/Topic? 0
  • +

Replies To: Need help with a dropdown menu (HTML + CSS)

#2 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Need help with a dropdown menu (HTML + CSS)

Posted 19 December 2010 - 01:21 PM

View PostJoshdw, 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".
Was This Post Helpful? 0
  • +
  • -

#3 Joshdw  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 225
  • Joined: 23-March 09

Re: Need help with a dropdown menu (HTML + CSS)

Posted 20 December 2010 - 10:46 AM

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 ;)
Was This Post Helpful? 0
  • +
  • -

#4 Sadin56  Icon User is offline

  • D.I.C Head

Reputation: 12
  • View blog
  • Posts: 183
  • Joined: 19-December 10

Re: Need help with a dropdown menu (HTML + CSS)

Posted 20 December 2010 - 09:18 PM

View PostJoshdw, 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...
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1