Need help with adding Dropdown menu to my wordpress theme.

SuperMAG · 05-04-2009, 10:31 AM

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:

Code:

#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...ilverlight.zip

My site is http://Sports2ALL.com

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

abduraooft · 05-04-2009, 10:36 AM

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.

SuperMAG · 05-04-2009, 10:38 AM

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.

abduraooft · 05-04-2009, 10:49 AM

Quote:

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!

SuperMAG · 05-04-2009, 11:36 AM

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.

SuperMAG · 05-05-2009, 01:18 PM

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

Code:

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

SuperMAG · 05-07-2009, 12:10 PM

shameless Bump, any one?

abduraooft · 05-07-2009, 12:17 PM

Quote:

I can add subpages later,

Can you edit your template to add some static html code for making your drop down?

SuperMAG · 05-07-2009, 03:52 PM

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

The HTML source of that menu is:

Code:

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

abduraooft · 05-07-2009, 04:20 PM

Um.. have a try with

Code:

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

SuperMAG · 05-07-2009, 04:44 PM

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/

abduraooft · 05-07-2009, 05:00 PM

Code:

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

SuperMAG · 05-07-2009, 05:30 PM

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.

abduraooft · 05-08-2009, 08:56 AM

Code:

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

SuperMAG · 05-08-2009, 10:28 AM

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