asked on
Wordpress horizontal dropdown menu

Hi, I am trying to get a horizontal drop down menu for my new wordpress blog with several categories (about 10) and then several pages under each category. I am a beginner at wordpress but am very familiar with CSS. Trying to find out if anyone knows where a code such as this would go in a header.php file so that it works? Or does anyone have a blog or website that explains this clearly? I've tried looking online but can't find any good guides.

I'm looking to create a horizontal drop down menu such as these examples:

http://healthyfoodrawdiet.com/

http://www.whateverlife.com/
ASKER CERTIFIED SOLUTION
MrAgile
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
darkapple
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Britni
ASKER
Thanks guys this helps. I just don't know wordpress very well and I should've explained the problem better. But here is the site I'm working on: http://thegirlscene.stunnazine.com and I wanted a horizontal bar like this http://adroitinfosolution.com/blog_2.8.6/ but I don't know where to enter the code to do it? Header.php? Index.php? Style.css only?
<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid #08a0b6;
border-bottom-width:;
font:normal 12px arial;
color:000;
line-height:18px;
z-index:100;
}


#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom:;
padding: 1px 0;
text-decoration: none;
font-weight: bold;font:normal 11px arial;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #000000;
}

</style>

<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- Â© Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/


//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="http://www.stunnazine.com/beauty.html">&hearts; Complete Beauty Guide</a>'
menu2[1]='<a href="http://www.stunnazine.com/natural-organic-beauty-tips.html">&hearts; Make Homemade Beauty Products</a>'
menu2[2]='<a href="http://www.stunnazine.com/acne.html">&hearts; Combat  Acne, Get Clear Skin</a>'
menu2[3]='<a href="http://www.stunnazine.com/your_beauty_secrets.html">&hearts; Readers Beauty Secrets</a>'
menu2[4]='<a href="http://stunnazine.com/glowing-skin.html">&hearts; Natural Secret to Glowing Skin</a>'
menu2[5]='<a href="http://www.stunnazine.com/beauty101.html">&hearts; Beauty 101: Models Beauty Secrets</a>'
menu2[6]='<a href="http://www.stunnazine.com/dryskin.html">&hearts; Natural Product: Dry Skin</a>'
menu2[7]='<a href="http://www.stunnazine.com/shiny-hair.html">&hearts; Natural Product: Shiny Hair</a>'
menu2[8]='<a href="http://www.stunnazine.com/shiny-hair.html">&hearts; Summer Beauty</a>'

//Contents for menu 3, and so on
var menu3=new Array()
menu3[0]='<a href="http://stunnazine.com/prom.html">&hearts; Prom Tips and Ideas - Get Ready!</a>'
menu3[1]='<a href="http://www.stunnazine.com/fall-fashion.html">&hearts; Fall Fashion Ideas</a>'
menu3[2]='<a href="http://www.stunnazine.com/fall_shopping_guide.html">&hearts; Fall Shopping Guide</a>'
menu3[3]='<a href="http://www.stunnazine.com/2009-spring-trends.html">&hearts; Top 2009 Spring Trends</a>'
menu3[4]='<a href="http://www.stunnazine.com/2009-fashion.html">&hearts; Interesting New 2009 Fashion</a>'

//Contents for menu 4, and so on
var menu4=new Array()
menu4[0]='<a href="http://stunnazine.com/winterstory.html">&hearts; A Warming Winter Story</a>'
menu4[1]='<a href="http://stunnazine.com/teen-fiction-story.php">&hearts; Summer Story</a>'
menu4[2]='<a href="http://www.stunnazine.com/teen-blog.php">&hearts; What She Sees - Teen Poetry</a>'
menu4[3]='<a href="http://www.stunnazine.com/poetry.html">&hearts; The Grave</a>'
menu4[4]='<a href="http://www.stunnazine.com/the_sweetest_thing.html">&hearts; The Sweetest Thing</a>'

//Contents for menu 5, and so on
var menu5=new Array()
menu5[0]='<a href="http://www.stunnazine.com/anika.html">&hearts; Pop Singer AniKa</a>'
menu5[1]='<a href="http://www.stunnazine.com/konvict-905.html">&hearts; John McMullen / Konvict</a>'
menu5[2]='<a href="http://www.stunnazine.com/cover-dalena.php">&hearts; Ms.Hollywood XTC / Dalena, Ms.Hollywood XTC</a>'
menu5[3]='<a href="http://www.stunnazine.com/maria_katerina.html">&hearts; The Car Model / Maria Katerina, The Car Model</a>'
menu5[4]='<a href="http://www.stunnazine.com/cover_model_cydney.html">&hearts; March Cover Model Cydney</a>'
menu5[5]='<a href="http://www.stunnazine.com/cover_model_sky.html">&hearts; June Cover Model Sky</a>'
menu5[6]='<a href="http://www.stunnazine.com/cover_model_julianne.html">&hearts; July Cover Model Julianne</a>'

//Contents for menu 6, and so on
var menu6=new Array()
menu6[0]='<a href="http://stunnazine.com/say_what.html">&hearts; Say, "I Love You" in 100 Languages</a>'
menu6[1]='<a href="http://stunnazine.com/love.html">&hearts; Get Your Ex Back</a>'
menu6[2]='<a href="http://www.stunnazine.com/cheating-signs.html">&hearts; Is He Cheating? How to tell.</a>'
menu6[3]='<a href="http://www.stunnazine.com/the_sweetest_thing.html">&hearts; Sweet Guys</a>'
menu6[4]='<a href="http://www.stunnazine.com/single_on_valentines_day.html">&hearts; Things to do when youre Single</a>'
menu6[5]='<a href="http://www.stunnazine.com/boyz.html">&hearts; How to Attract Boys</a>'
menu6[6]='<a href="http://www.stunnazine.com/getting-over-ex.html">&hearts; Getting Over Ex</a>'
menu6[7]='<a href="http://www.stunnazine.com/about-boyfriend.html">&hearts; Is it OK for Boyfriends to Look at Other Girls?</a>'

//Contents for menu 7, and so on
var menu7=new Array()
menu7[0]='<a href="http://stunnazine.com/online-diaries.html">&hearts; Read Online Diaries</a>'
menu7[1]='<a href="http://stunnazine.com/thanksgiving_stories.html">&hearts; Your Thanksgiving Disasters</a>'
menu7[2]='<a href="http://www.stunnazine.com/realgirls.php">&hearts; Were models born Beautiful?</a>'
menu7[3]='<a href="http://www.stunnazine.com/mean-girls.php">&hearts; Girl Bullies</a>'
menu7[4]='<a href="http://www.stunnazine.com/makeover.html">&hearts; Makeover our Planet</a>'
menu7[5]='<a href="http://www.stunnazine.com/celebs-without-makeup.html">&hearts; Celebs without Makeup</a>'


//Contents for menu 8, and so on
var menu8=new Array()
menu8[0]='<a href="http://www.stunnazine.com/advice.html">&hearts; Request Free Advice</a>'
menu8[1]='<a href="http://www.stunnazine.com/teen-resources.html">&hearts; Teen Resources / Get Help</a>'
menu8[2]='<a href="http://stunnazine.com/gift-ideas.html">&hearts; Gift Ideas for Everyone</a>'
menu8[3]='<a href="http://www.stunnazine.com/backtoschool.html">&hearts; Back to School: Cool Tips</a>'
menu8[4]='<a href="http://www.stunnazine.com/model-tips.php">&hearts; How to Become a Model</a>'
menu8[5]='<a href="http://stunnazine.com/say_what.html">&hearts; Say "I Love You" in 100 languages</a>'
menu8[6]='<a href="http://stunnazine.com/merry_christmas_different_languages.php">&hearts; Say "Merry Christmas" in 100 languages</a>'
menu8[7]='<a href="http://stunnazine.com/teen-weight-loss.html">&hearts; Teen weight loss guide</a>'
menu8[8]='<a href="http://stunnazine.com/look-thin.html">&hearts; How to look thin</a>'
menu8[9]='<a href="http://stunnazine.com/teen-advice-stage-fright.html">&hearts; Lose Stage Fright</a>'
menu8[10]='<a href="http://stunnazine.com/teen-advice-self-esteem.html">&hearts; Self Esteem</a>'
menu8[11]='<a href="http://www.stunnazine.com/teen-advice-suicide.html">&hearts; Suicide</a>'


//Contents for menu 9, and so on
var menu9=new Array()
menu9[0]='<a href="http://www.stunnazine.com/quiz.html">&hearts; How Sexy are You?</a>'
menu9[1]='<a href="http://www.stunnazine.com/quiz-2.html">&hearts; Are you Good or Bad?</a>'
menu9[2]='<a href="http://www.stunnazine.com/quiz-3.html">&hearts; How Smart Are You?</a>'

//Contents for menu 10
var menu10=new Array()
menu10[0]='<a href="http://stunnazine.com/halloween_treats.html">&hearts; Healthy Halloween Treats?</a>'
menu10[1]='<a href="http://stunnazine.com/health.html">&hearts; Calorie Counter</a>'
menu10[2]='<a href="http://stunnazine.com/nutrition.html">&hearts; Is the "Healthy Food" You Eat Actually Healthy?</a>'
menu10[3]='<a href="http://stunnazine.com/teen-weight-loss.html">&hearts; Teen Weight Loss</a>'
menu10[4]='<a href="http://stunnazine.com/look-thin.html">&hearts; Look Thinner</a>'

		
var menuwidth='17000px' //default menu width
var menubgcolor='white'  //menu bgcolor
var disappeardelay=900  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="no" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onmouseover="clearhidemenu()" onmouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)

dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>

</head>

<body>
<div id="container">
<div id="main">
<div id="part1">
<div id="nav_bar">
<div style=" float:left; width:878px; height:30px; ">
<center><table cellspacing="0" cellpadding="0"><tr><td valign="top">
<div id="menuxbar"><ul class="style10" id="menux">

<li><a 
   href="radio.html" class="style15" 
   onclick="return popup(this, 'Stunnazine Radio')">SZ Radio</a></li>

<li><a href="http://www.stunnazine.com/forum/files/" class="style16">Forum</a></li>

<div align="right"></div>
<li><a href="Self-Help-click-to-see-all.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu8, '220px')" onMouseOut="delayhidemenu()">Advice</a></li>


<li><a href="beauty-click-to-see-all.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu2, '220px')" onMouseOut="delayhidemenu()">Beauty</a></li>


<li><a href="health-click-to-see-all.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu10, '250px')" onMouseOut="delayhidemenu()">Health/Fitness</a></li>

<li><a href="Fashion-click-to-see-all.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu3, '220px')" onMouseOut="delayhidemenu()">Fashion</a></li>

<li>  <a href="Love-click-to-see-all.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu6, '240px')" onMouseOut="delayhidemenu()">Love/Dating</a></li>

<li> <a href="Real-Life-click-to-see-all.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu7, '220px')" onMouseOut="delayhidemenu()">Real Life</a></li>


<li> <a href="Fiction-click-to-see-all.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu4, '220px')" onMouseOut="delayhidemenu()">Fun/Fiction</a> </li>

<li><a href="Quizzes-click-to-see-all.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu9, '220px')" onMouseOut="delayhidemenu()">Quizzes</a></li> 

<li><a href="http://251107.spreadshirt.com/us/US/Shop/">Store</a></li>
<li><a href="http://www.stunnagraphics.com">Graphics</a></li>
<li><a href="Http://stunnazine.com/secret.html" target="blank">Secret</a></li>

</ul>

</div></td>
</tr></table>
</center></div>
</div>
Open in new window
SOLUTION
Zkdog
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial