I'd like to thank Jenn from http://www.zazzle.com/jennsdoodleworld for helping me to figure out how to create a Horizontal Navigation Menu with Drop Downs.

Thank you soooo much.

Here's how it turned out... www.zazzle.com/olpampam.

<EDIT: The initial design that you will see here is what your drop down menu will look like at first glance, but I've made changes since I posted this and it looks much different now. Your code will just have a one column drop down.>

And here's how you do it....

XHTML - place right after <div id="pageheader"></div>

<table align="center" width="900" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="menu">
<ul>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196131967908565793&amp;rf=238339483968853447&amp;tc=zazzlestorehomepage">Weddings</a>
<ul>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196444062833615157">Floral Suites</a></li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196041844296934655">Damask Suites</a></li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196870855257777225">Damask Suites</a></li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196842968419701295">Destination Wedding Suites</a></li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196196868913458240">Gifts and Accessories</a></li>
</ul>
</li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196062440462253773&amp;rf=238339483968853447&amp;tc=zazzlestorehomepage">Business</a>
<ul>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196322142375450310">Business Cards</a></li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196645769059266133">Promotional Items</a></li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196093438463759272">Labels</a></li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196359517227004795">Keychains</a></li>
</ul>
</li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196400042977936533&amp;rf=238339483968853447&amp;tc=zazzlestorehomepage">Holidays</a>
<ul>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196415968859889841">Christmas</a></li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196475969822268062">New Year's</a></li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196549904409079451">Halloween</a></li>
</ul>
</li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196045065646049715&amp;rf=238339483968853447&amp;tc=zazzlestorehomepage">Parties</a>
<ul>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196104211492755289">Birthday Invitations</a></li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196052731888134832">New Year's Invitations</a></li>
</ul>
</li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196055472300498224&amp;rf=238339483968853447&amp;tc=zazzlestorehomepage">Graduation</a>
<ul>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196163300373446685">Announcements and Invitations</a></li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196830981198201849">Gifts</a></li>
</ul>
</li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196933295734264193&amp;rf=238339483968853447&amp;tc=zazzlestorehomepage">Gifts and Cards</a>
<ul>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196556064239981673">Cards</a></li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196926728219954150">Phone and Tablet Covers</a></li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196402437659646484">Coasters</a></li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196708165494195195">Doodle Speakers</a></li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196587997375771895">Jewelry</a></li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196235590173731627">Keychains</a></li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196273164866327070">Magnets</a></li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196949798276135510">Mousepads</a></li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196002227240805917">Mugs</a></li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196487670840566656">Ornaments</a></li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196237409602019965">Post Cards</a></li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196471072764747724">Shirts</a></li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196757467694967883">Shoes</a></li>
</ul>
</li>
<li><a href="http://www.zazzle.com/olpampam/gifts?cg=196207600467996820&amp;rf=238339483968853447&amp;tc=zazzlestorehomepage">Baby</a>
</li>
</ul>
</div>
</td>
</tr>
</table>

CSS:

/* HORIZONTAL NAV BAR STYLE */


#menu{
padding:0;
margin:10px;
width: 900px;
background-color: #474C60;
border-bottom: 1px solid #fff;
height:31px;
border-width:medium;
border-color:#d8caa6;
border-style: ridge;
}
#menu ul{
padding:0;
width: 827px;
margin: 0 auto;
}
#menu li{
position: relative;
float:left;
list-style: none;
margin-left: 25px;
padding:0;
background-color: #474C60;
font-size:14px;
font-weight:bold;
text-align:center;
}
#menu li a{
font-weight: bold;
display: block;
text-decoration:none;
text-align: center;
color: #d8caa6;
padding: 8px 12px;
border-right: 0px solid #fff;
line-height: 15px;
}
#menu li a:hover{
background-color: #d8caa6;
color: #474C60;
}
#menu ul ul{
position: absolute;
top: 30px;
visibility: hidden;
z-index: 1000;
}
#menu ul ul li, #menu ul ul li a {
clear:both;
width:150px;
text-align:left;
margin:0px;
padding:2px;

}
#menu ul li:hover ul{
visibility:visible;
z-index: 1000;
}

I have a lot of extra styling that you may not want, so here are some tips to make changes:

If you don't want a space above and below you navigation bar, change the margin in the first section to 0.

If you don't want the border, erase the following code:
border-width:medium;
border-color:#d8caa6;
border-style: ridge;

margin-left: 25px; changes the space from the beginning of the text (so that it is centered), if your words aren't centered, just change this value until it looks right.

In the 2nd last section, it says width:150px;, this changes the size of the space around the drop down part of the menu (the background), you can make this smaller or larger, depending on your needs. The original value was 100px, but I had to change it for my store.

I hope this saves someone a huge headache.

ADD ON:

If you want a second drop down, here's the code:

CSS (add to other css)

#menu li:hover ul ul{
position: absolute;
top: 0px;
margin-left:-2px;
left:155px;
visibility:hidden;
z-index: 1000;
}
#menu ul ul li:hover ul{
visibility:visible;
z-index: 1000;
}

XHTML:

Add a new section to your code.

Here's what I have for 1 added drop to the wedding section. I made the new stuff red:

<div id="menu">
<ul>
<li>
<a href="http://www.zazzle.com/olpampam/gifts?cg=196131967908565793&amp;rf=238339483968853447&amp;tc=zazzlestorehomepage">Weddings</a>
<ul>
<li>
<a href="http://www.zazzle.com/olpampam/gifts?cg=196444062833615157">Floral Suites</a>
<ul>
<li>
<a href="http://www.zazzle.com/olpampam/gifts?cg=196136429679704162">Suite 100</a>
</li>
</ul>
</li>
<li>
<a href="http://www.zazzle.com/olpampam/gifts?cg=196041844296934655">Damask Suites</a>
</li>

I have the 2nd drop down at the following link, but not sure if it will work since it's a private store.

http://www.zazzle.com/teststore2


Note From My5k262:

FYI ...

There is an IE7 (and earlier) bug that causes the navigation in this thread to open behind the main page of your store in those browsers.
(Info on the bug here, if interested: http://jonathanstegall.com/2009/01/15/ie-z-index-bug-with-css-dropdown-menu/ )

To fix it:
1) Add an ID to your main navigation table:
Code:
<table align="center" width="900" cellpadding="0" cellspacing="0" id="horizontalNav">


2) Add the following to your styles:
Code:
#mainShell #horizontalNav {
position: relative;
z-index: 2;
}
#mainShell #main {
position: relative;
}


3) That'll do it. You can remove the two "z-index:9000" references from the existing styles because it turns out they weren't doing much in this case anyway.

So far, I haven't find any unintended side effects. Hope this works for all.

You're welcome.

That's really awesome, thanks so much for sharing

Thanks so much! It only took me 3 tried to get it right, LOL...I kept breaking the code somehow...anyway, it is working now, and fabulous!

Do I copy the entire section in the xhtml? Or do I post the "CSS" part in that section, and if so, where? (Sorry, for my lack of knowledge)

The xhtml part goes in the xhtml section right after where it says

<div id="pageheader"></div>

Then, the css part goes anywhere in the css code as long as it's after the first line of code and before the last line of code.

thanks for this! make sure you change the referral codes in the menus though.

Does anyone know how to make menus inside the drop down to have sub menus open?

I just deleted them, if they don't work then they don't work, Just pointing out a small change. Who knows zazzle might change their minds about it in the future and you forget that you have someone else referral coded in to your store.

This is really fantastic, Pam! Thank you!

I'm having trouble adding items to the drop-down menu under "Baby." An error message is generated any time I try to add new subcategories or remove the "Baby" category. Any ideas why? For now I'm just using the space to link to my other store, but I actually need it for one last category with subcategories.

Verrrry nice. These 2 rules in combination implement a rollover which you otherwise can't get through ASC (no custom javascript).

#menu ul ul {position: absolute; top: 30px; visibility: hidden; z-index: 1000; }
#menu ul li:hover ul {visibility:visible; z-index: 1000; }

That's a great way to implement a category menu.

Thanks!

That said, I'd like to recommend a couple stylistic changes to help your drop down menus show up against the background.

Change these 2 rules as shown:
#menu ul ul{
position: absolute;
top: 30px;
visibility: hidden;
z-index: 1000;

border: 1px dotted white; /*added */
width:154px; /*added */
}
#menu ul ul li, #menu ul ul li a {
clear:both;
text-align:left;
margin:0px;
padding:2px;
/* removed width */
}

And add these 2 rules:

#menu ul ul li, #menu ul ul li {
width:150px;
}
#menu ul ul li
{
background-color:#636a86;
}


- Mike.