Need help with adding Dropdown menu to my wordpress theme.

I have a theme called Silverlight for wordpress, its an old theme, which doesnt have drop down menu. I want to add dropdown menus of my subpages to pages tabs.

Here is the code of my tabs:

#ddnav{background-color:#312e2e;height:35px;margin:0;padding:0;}
#nav{height:25px;width:1060px;font-weight:700;margin:0 auto;padding:10px 0 0;}
ul.nav{height:25px;line-height:25px;float:left;list-style:none;font-size:11px;text-transform:inherit;margin:0;padding:0;}
ul.nav li{float:left !important;list-style-type:none;border-right:2px solid #312e2e;margin:0;padding:0;}
ul.nav li a, ul.nav li a:link, ul.nav li a:visited{background:url('images/navsilver.gif') repeat-x;color:#818181;float:left;display:block;text-decoration:none;padding-left:15px; padding-right:15px; padding-top:0; padding-bottom:0}
ul.nav li a:hover, ul.nav li a:active{background:url('images/navblue.gif') repeat-x;color:#205387;text-decoration:none}
ul.nav li.current_page_item a{text-decoration:none;background:url('images/navblue.gif') repeat-x;color:#fff}
ul.nav li ul{float:left;margin:0;padding:0;}


Can some one please add a way so it can show submenus as a dropdown menu. may be this will help:

http://www.lwis.net/free-css-drop-down-menu/

Here is full theme: http://super.m.a.g.world.googlepages.com/silverlight.zip

My site is http://Sports2ALL.com

Thanks in advance, if you want to contact me, support@sports2all.com

To add a drop down, initially you need to have the set of sub menu items under the required main menu. Refer http://htmldog.com/articles/suckerfish/dropdowns/

Wordpress can automatically generate this, if you have created some child paged for your main pages.

i know that, but my style doesn't do that. it shows the sub pages in the horizontal menu. not drop down.

so is there anyway i can add the drop down menu to my theme.

i tried to ask in wordpress forum, digitalpoint. seems no one is helping.

i know that, but my style doesn't do that. it shows the sub pages in the horizontal menu. not drop down.

A style can't simply add a drop down without its corresponding HTML markup. I don't see this in your page as indicated in my above post!

i know, i didnt post any sub pages, because it will ruin the template, i can always allow to show subpages. but after i get my theme fixed to show it as dropdown menus.

as i said, i just need to make this code show dropdown menu.

#ddnav{background-color:#312e2e;height:35px;margin:0;padding:0;}
#nav{height:25px;width:1060px;font-weight:700;margin:0 auto;padding:10px 0 0;}
ul.nav{height:25px;line-height:25px;float:left;list-style:none;font-size:11px;text-transform:inherit;margin:0;padding:0;}
ul.nav li{float:left !important;list-style-type:none;border-right:2px solid #312e2e;margin:0;padding:0;}
ul.nav li a, ul.nav li a:link, ul.nav li a:visited{background:url('images/navsilver.gif') repeat-x;color:#818181;float:left;display:block;text-decoration:none;padding-left:15px; padding-right:15px; padding-top:0; padding-bottom:0}
ul.nav li a:hover, ul.nav li a:active{background:url('images/navblue.gif') repeat-x;color:#205387;text-decoration:none}
ul.nav li.current_page_item a{text-decoration:none;background:url('images/navblue.gif') repeat-x;color:#fff}
ul.nav li ul{float:left;margin:0;padding:0;}

I can add subpages later, So can any one PLEASEEEEEEEEEEEEE HELP!

shameless Bump, any one?

I can add subpages later, Can you edit your template to add some static html code for making your drop down?

ok i done that, now look at the http://sports2all.com/

Misc Button, It has these subpages.
Online TV
Music/Songs
Free SMS
Online Games
SopCast Player

it is shown like this: http://img374.imageshack.us/img374/7013/67324949.png

http://img374.imageshack.us/img374/7013/67324949.png

The HTML source of that menu is:

<div id="ddnav">
<div id="nav">
<ul class="nav">
<li class="page_item page-item-63 current_page_item"><a href="http://sports2all.com" title="Home">Home</a></li>
<li class="page_item page-item-609"><a href="http://sports2all.com/forum/" title="Forum">Forum</a></li>
<li class="page_item page-item-40"><a href="http://sports2all.com/chat/" title="Chat">Chat</a></li>
<li class="page_item page-item-1010"><a href="http://sports2all.com/wrestling-live-streaming/" title="Wrestling Live Streaming">Wrestling Live Streaming</a></li>
<li class="page_item page-item-598"><a href="http://sports2all.com/football-live-streaming/" title="Football Live Streaming">Football Live Streaming</a></li>
<li class="page_item page-item-3053"><a href="http://sports2all.com/other-sports-live-streaming/" title="Other Sports Live Streaming">Other Sports Live Streaming</a></li>
<li class="page_item page-item-77"><a href="http://sports2all.com/wrestling-replays/" title="Wrestling Replay’s">Wrestling Replay’s</a></li>
<li class="page_item page-item-84"><a href="http://sports2all.com/wrestling-ppvs/" title="PPV’s">PPV’s</a></li>
<li class="page_item page-item-1137"><a href="http://sports2all.com/wrestling-dvds/" title="DVD’s">DVD’s</a></li>
<li class="page_item page-item-468"><a href="http://sports2all.com/misc/" title="Misc">Misc</a>
<ul>
<li class="page_item page-item-1850"><a href="http://sports2all.com/misc/online-tv/" title="Online TV">Online TV</a></li>
<li class="page_item page-item-1855"><a href="http://sports2all.com/misc/music-songs/" title="Music/Songs">Music/Songs</a></li>
<li class="page_item page-item-1887"><a href="http://sports2all.com/misc/free-sms/" title="Free SMS">Free SMS</a></li>
<li class="page_item page-item-1859"><a href="http://sports2all.com/misc/online-games/" title="Online Games">Online Games</a></li>
<li class="page_item page-item-1875"><a href="http://sports2all.com/misc/sopcast-player/" title="SopCast Player">SopCast Player</a></li>
<li class="page_item page-item-1863"><a href="http://sports2all.com/misc/satellite-maps/" title="Satellite Maps">Satellite Maps</a></li>
<li class="page_item page-item-1839"><a href="http://sports2all.com/misc/rapidleech/" title="RapidLeech">RapidLeech</a></li>
</ul>
</li>
<li class="page_item page-item-74"><a href="http://sports2all.com/contact/" title="Contact">Contact</a></li>
</ul>
</div>
</div>

I hope thats helpfull. And thanksssssssss Alot for helping me.

Um.. have a try with
ul.nav{height:25px;line-height:25px;float:left;list-style:none;font-size:11px;text-transform:inherit;margin:0;padding:0;}
ul.nav li{float:left ;position:relative; list-style-type:none;border-right:2px solid #312e2e;margin:0;padding:0;}
ul.nav li a, ul.nav li a:link, ul.nav li a:visited{background:url('images/navsilver.gif') repeat-x;color:#818181;float:left;display:block;text-decoration:none;padding-left:13px; padding-right:13px; padding-top:0; padding-bottom:0}
ul.nav li a:hover, ul.nav li a:active{background:url('images/navblue.gif') repeat-x;color:#205387;text-decoration:none}
ul.nav li.current_page_item a{text-decoration:none;background:url('images/navblue.gif') repeat-x;color:#fff}
ul.nav li ul{position:absolute;left:-9999px;margin:0;padding:0; top:2.2em}
#nav ul.nav li ul li, #nav ul.nav li ul li a{
float:none;
}
ul.nav li:hover ul{
left:auto;
} in FF

wow, it worked, but it is all messed up. is there any way i can change the style of the subpages menu to simple one.

u can check the misc page menu in the site: http://sports2all.com/

ul.nav li ul {/*style.css (line 29)*/
left:-9999px;
margin:0;
padding:0;
position:absolute;
top:2.2em;
width:15em;
}

ok thanks alot, that worked well, but as i said, i want simple tabs to show, not the tabs like original menu, so what i need to do that.

can u show me the separate code of the submenus.

i want a submenu like, DADADA borders. And FFFFFF Background, And Blue Links.

And sorry if i took too much of ur time, Thanks again.

ul.nav li ul li{
border:1px solid #dadada;
}
ul.nav li ul li a:link{
background:#fff;
color:blue;
}

ok thanks again

now i have a problem, the ads is blocking the menu to show.

is there any way i show menu over ads.

------

and small thing,

ul.nav li ul li{border:1px solid #dadada}
ul.nav li ul li a:link{background:#fff;color:#00749E;}

This is the style u gave me.
1- want to add the Hover.
The hover on the blocks be F8F8F8 and hover for Links need to be 000000

Thanks

ok thanks again

now i have a problem, the ads is blocking the menu to show.

is there any way i show menu over ads.

------

Ads? Sorry, I'm using Adblocker in my FF :)
Anyway, you could do it by setting a position:relative; to your Ad container element and your navigation container, and then setting two different z-index values to them (say z-index:1; for Ad container and z-index:10; for #nav).


and small thing,

ul.nav li ul li{border:1px solid #dadada}
ul.nav li ul li a:link{background:#fff;color:#00749E;}

This is the style u gave me.
1- want to add the Hover.
The hover on the blocks be F8F8F8 and hover for Links need to be 000000

That might be an easy one.... try to follow http://www.w3schools.com/css/pr_pseudo_hover.asp

Ads? Sorry, I'm using Adblocker in my FF :)
Anyway, you could do it by setting a position:relative; to your Ad container element and your navigation container, and then setting two different z-index values to them (say z-index:1; for Ad container and z-index:10; for #nav).

That might be an easy one.... try to follow http://www.w3schools.com/css/pr_pseudo_hover.asp

ok the ads stuff was little complicated to me, but i changed the place of the menu.

but the hover.

this is my complete nav css.

#ddnav{background-color:#312e2e;height:35px;margin:0;padding:0;}
#nav{height:25px;width:1060px;font-weight:700;margin:0 auto;padding:10px 0 0;}
ul.nav{height:25px;line-height:25px;float:left;list-style:none;font-size:11px;text-transform:inherit;margin:0;padding:0;}
ul.nav li{float:left ;position:relative; list-style-type:none;border-right:2px solid #312e2e;margin:0;padding:0;}
ul.nav li a, ul.nav li a:link, ul.nav li a:visited{background:url('images/navsilver.gif') repeat-x;color:#818181;float:left;display:block;text-decoration:none;padding-left:13px; padding-right:13px; padding-top:0; padding-bottom:0}
ul.nav li a:hover, ul.nav li a:active{background:url('images/navblue.gif') repeat-x;color:#205387;text-decoration:none}
ul.nav li.current_page_item a{text-decoration:none;background:url('images/navblue.gif') repeat-x;color:#fff}
ul.nav li ul{position:absolute;left:-9999px;margin:0;padding:0;top:2.2em;width:15em;}
#nav ul.nav li ul li, #nav ul.nav li ul li a{float:none;}
ul.nav li:hover ul{left:auto;}
ul.nav li ul li{border:1px solid #dadada;}
ul.nav li ul li a:link {background:#fff;color:#00749E;}


i added this
ul.nav li ul li a:hover {color: #000000;}

and now the the links hover changes, but the hover over block, donno how to do that :(

and between every submenu link

like

--------------
--------------
--------------

this lines are double, the side lines are single, so may be that could be corrected too. though its not that important

Thanks alot for your help.