How to add drop down menus

Unless you are very proficient with CSS, I’d recommend that you look for a dropdown menu plugin.

Why don’t you just use the twentyten theme? The dropdowns are already all set.

You can also just look in the theme file and see how the twentyten developers set these up.

It really depends on how proficient you are with things. I would recommend just looking at the twentyten theme and copying the code and css for the navigation. From there you can tweak it to look how you want.

The thing is i tried adding following code

<div id="navmenu">

<ul>
<li><a>">HOME</a></li>
<li><a href="wordpress/recipes/">RECIPES</a></li>
<li><a href="wordpress/travel/">TRAVEL</a></li>
<li><a href="https://www.www.ads-software.com">WORDPRESS</a></li>
</ul>
</div>

and i also created css file for its navigation but it didnt worked.

First off if your trying to do dropdowns you need to do embedded ul’s. Something like this…

<ul>
<li>
    Nav1
    <ul>
        <li>SubNav1</li>
        <li>SubNav2</li>
        <li>SubNav3</li>
    </ul>
</li>
<li>Nav2</li>
<li>Nav3</li>
<li>Nav4</li>

The tricky thing is that if your using twentytens css it is designed around using the actual wordpress menus (as opposed to hardcoded navigation like you have). So you have two options from here

1. Go in and tweak the nav css (from twentyten) so that it uses your div/nav setup
2. Replace your current hardcoded nav with this (taken from twentyten)…

   <div id="access">
       <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
   </div><!-- #navigation -->

   Then setup an actual menu in the wordpress admin screen

Either way is fine. If you are just wanting to get it up and running just tweak the CSS. Otherwise I would recommend doing the actual menu way.

Thank you for the reply but it is not working.

I had already don this a lot of times.
Editor says menus can be added only on the widgets side bar

Thats fine. You can still do it the first way I said then. Just setup your hardcoded nav roughly the way wordpress’s twentyten theme renders it. Here is a snip I whipped up to get you started. Just make sure you have twentyten’s nav css!

<div id="access" role="navigation">
    <div class="menu">
        <ul>
            <li class="#"><a href="#">Home</a></li>
            <li class="#"><a href="#">About</a>
                <ul class='children'>
                    <li><a href="#">Our Culture</a></li>
                    <li><a href="#">Our Teams</a></li>
                </ul>
            </li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div><!-- menu -->
</div><!-- Access -->

Hi Jagg2637,

after putting the above code in my header.php, it only shows the First

• tag that is Home. After home everything is hidden.

Thanks for the help.

It’s kind of hard to say what the cause is without being able to see the site or any code or anything. If the navigation stuff (the ul’s/li’s) are in place and not missing any of these (<, >, ‘, “) then the most likely issue is something related to css.

I believe you are using twentyten’s css for the menu? If so, its most likely something in there that needs to be tweaked. Most likely something with the width, height, margin, or padding. Try viewing the source of the page as well to ensure everything is being rendered in html properly.

hi again,

the link to the css file is :

Can you please have a look at it.

Thanks again ??

I am not sure what part of that css is dealing with the navigation you are talking about. Is the template you are editing being used on your live site?

I need to see the html from the page you are working with as well in order to suggest actual lines to change. Your site you have linked also appears to have 2 navigation sections so I am not sure which one you are trying to get drop downs with.

If your having that much trouble just switch to the twentyten theme and look at the code it renders to wrap your head around how its css interacts with the html nav layout. After you understand how it works it should be alot easier to modify it to your templates needs.

In any case this is half the fun of doing web development is trial and error until you get your results!

Hi again,

I am talking about navigation section just below the header image. I tried editing css but its not working.

Thanks for your help.

I also tried spry menu bar using dreamweaver. But still the same results.
??