Wordpress horizontal dropdown menu

Posted on 2010-01-02
Last Modified: 2012-05-08
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:

Question by:Britni
    LVL 8

    Accepted Solution

    hi there,


    LVL 9

    Assisted Solution


    Author Comment

    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: and I wanted a horizontal bar like this but I don't know where to enter the code to do it? Header.php? Index.php? Style.css only?
    <style type="text/css">
    border:1px solid #08a0b6;
    font:normal 12px arial;
    #dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 3px;
    padding: 1px 0;
    text-decoration: none;
    font-weight: bold;font:normal 11px arial;
    #dropmenudiv a:hover{ /*hover background color*/
    background-color: #000000;
    <script type="text/javascript">
    * AnyLink Drop Down Menu- © Dynamic Drive (
    * This notice MUST stay intact for legal use
    * Visit for full source code
    //Contents for menu 2, and so on
    var menu2=new Array()
    menu2[0]='<a href="">&hearts; Complete Beauty Guide</a>'
    menu2[1]='<a href="">&hearts; Make Homemade Beauty Products</a>'
    menu2[2]='<a href="">&hearts; Combat  Acne, Get Clear Skin</a>'
    menu2[3]='<a href="">&hearts; Readers Beauty Secrets</a>'
    menu2[4]='<a href="">&hearts; Natural Secret to Glowing Skin</a>'
    menu2[5]='<a href="">&hearts; Beauty 101: Models Beauty Secrets</a>'
    menu2[6]='<a href="">&hearts; Natural Product: Dry Skin</a>'
    menu2[7]='<a href="">&hearts; Natural Product: Shiny Hair</a>'
    menu2[8]='<a href="">&hearts; Summer Beauty</a>'
    //Contents for menu 3, and so on
    var menu3=new Array()
    menu3[0]='<a href="">&hearts; Prom Tips and Ideas - Get Ready!</a>'
    menu3[1]='<a href="">&hearts; Fall Fashion Ideas</a>'
    menu3[2]='<a href="">&hearts; Fall Shopping Guide</a>'
    menu3[3]='<a href="">&hearts; Top 2009 Spring Trends</a>'
    menu3[4]='<a href="">&hearts; Interesting New 2009 Fashion</a>'
    //Contents for menu 4, and so on
    var menu4=new Array()
    menu4[0]='<a href="">&hearts; A Warming Winter Story</a>'
    menu4[1]='<a href="">&hearts; Summer Story</a>'
    menu4[2]='<a href="">&hearts; What She Sees - Teen Poetry</a>'
    menu4[3]='<a href="">&hearts; The Grave</a>'
    menu4[4]='<a href="">&hearts; The Sweetest Thing</a>'
    //Contents for menu 5, and so on
    var menu5=new Array()
    menu5[0]='<a href="">&hearts; Pop Singer AniKa</a>'
    menu5[1]='<a href="">&hearts; John McMullen / Konvict</a>'
    menu5[2]='<a href="">&hearts; Ms.Hollywood XTC / Dalena, Ms.Hollywood XTC</a>'
    menu5[3]='<a href="">&hearts; The Car Model / Maria Katerina, The Car Model</a>'
    menu5[4]='<a href="">&hearts; March Cover Model Cydney</a>'
    menu5[5]='<a href="">&hearts; June Cover Model Sky</a>'
    menu5[6]='<a href="">&hearts; July Cover Model Julianne</a>'
    //Contents for menu 6, and so on
    var menu6=new Array()
    menu6[0]='<a href="">&hearts; Say, "I Love You" in 100 Languages</a>'
    menu6[1]='<a href="">&hearts; Get Your Ex Back</a>'
    menu6[2]='<a href="">&hearts; Is He Cheating? How to tell.</a>'
    menu6[3]='<a href="">&hearts; Sweet Guys</a>'
    menu6[4]='<a href="">&hearts; Things to do when youre Single</a>'
    menu6[5]='<a href="">&hearts; How to Attract Boys</a>'
    menu6[6]='<a href="">&hearts; Getting Over Ex</a>'
    menu6[7]='<a href="">&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="">&hearts; Read Online Diaries</a>'
    menu7[1]='<a href="">&hearts; Your Thanksgiving Disasters</a>'
    menu7[2]='<a href="">&hearts; Were models born Beautiful?</a>'
    menu7[3]='<a href="">&hearts; Girl Bullies</a>'
    menu7[4]='<a href="">&hearts; Makeover our Planet</a>'
    menu7[5]='<a href="">&hearts; Celebs without Makeup</a>'
    //Contents for menu 8, and so on
    var menu8=new Array()
    menu8[0]='<a href="">&hearts; Request Free Advice</a>'
    menu8[1]='<a href="">&hearts; Teen Resources / Get Help</a>'
    menu8[2]='<a href="">&hearts; Gift Ideas for Everyone</a>'
    menu8[3]='<a href="">&hearts; Back to School: Cool Tips</a>'
    menu8[4]='<a href="">&hearts; How to Become a Model</a>'
    menu8[5]='<a href="">&hearts; Say "I Love You" in 100 languages</a>'
    menu8[6]='<a href="">&hearts; Say "Merry Christmas" in 100 languages</a>'
    menu8[7]='<a href="">&hearts; Teen weight loss guide</a>'
    menu8[8]='<a href="">&hearts; How to look thin</a>'
    menu8[9]='<a href="">&hearts; Lose Stage Fright</a>'
    menu8[10]='<a href="">&hearts; Self Esteem</a>'
    menu8[11]='<a href="">&hearts; Suicide</a>'
    //Contents for menu 9, and so on
    var menu9=new Array()
    menu9[0]='<a href="">&hearts; How Sexy are You?</a>'
    menu9[1]='<a href="">&hearts; Are you Good or Bad?</a>'
    menu9[2]='<a href="">&hearts; How Smart Are You?</a>'
    //Contents for menu 10
    var menu10=new Array()
    menu10[0]='<a href="">&hearts; Healthy Halloween Treats?</a>'
    menu10[1]='<a href="">&hearts; Calorie Counter</a>'
    menu10[2]='<a href="">&hearts; Is the "Healthy Food" You Eat Actually Healthy?</a>'
    menu10[3]='<a href="">&hearts; Teen Weight Loss</a>'
    menu10[4]='<a href="">&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;
    return totaloffset;
    function showhide(obj, e, visible, hidden, menuwidth){
    if (ie4||ns6)"-500px"
    if (menuwidth!=""){
    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
    else if (e.type=="click")
    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
    if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
    var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
    var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
    if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
    if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
    return edgeoffset
    function populatemenu(what){
    if (ie4||ns6)
    function dropdownmenu(obj, e, menucontents, menuwidth){
    if (window.event) event.cancelBubble=true
    else if (e.stopPropagation) e.stopPropagation()
    dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
    if (ie4||ns6){
    showhide(, e, "visible", "hidden", menuwidth)
    dropmenuobj.x=getposOffset(obj, "left")
    dropmenuobj.y=getposOffset(obj, "top"), "rightedge")+"px", "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))
    else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
    function hidemenu(e){
    if (typeof dropmenuobj!="undefined"){
    if (ie4||ns6)"hidden"
    function delayhidemenu(){
    if (ie4||ns6)
    function clearhidemenu(){
    if (typeof delayhide!="undefined")
    if (hidemenu_onclick=="yes")
    <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">
       href="radio.html" class="style15" 
       onclick="return popup(this, 'Stunnazine Radio')">SZ Radio</a></li>
    <li><a href="" 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="">Store</a></li>
    <li><a href="">Graphics</a></li>
    <li><a href="Http://" target="blank">Secret</a></li>

    Open in new window

    LVL 1

    Assisted Solution

    I'm looking to do something very similar.  From what I've seen so far, there are a few ways to do this.  One is a combonation of CSS (which I'm not great at) and editing the header.php file.  Look for something along the lines of the code below.  That's your menu.  What you want to do from there is remove the catagories line and add in your own dropdown code.

    The other way to do this, is to use a plugin.  There are many out there, some very complicated.  The best one I've found so far is PixoPoint Menu  ( )  .  It's what I'm using to try to get my dropdown going.  I've got it working, but can't seem to get the CSS right, but maybe you'll have better luck.
    <ul class="menu">
        <li class="page_item page_item_1 <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="Home">Home</a></li>
    <?php wp_list_pages('depth=1&sort_column=menu_order&title_li=' . __('') . '' ); ?>

    Open in new window


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now