Spry menu bar problems

[Fernando Mol]

Try adding a padding of 0px to the ul.MenuBarHorizontal rule and see if that works.

ul.MenuBarHorizontal
{
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
padding: 0px;
}

[Crystal Van wyk]

Thanks Fernando that certainly helped some with the odd padding. Unfortunately it still seems much too low and I can’t see the drop down at all in IE.

Is there a more straightforward way to make a drop down menu? I feel like I’m not going to get this thing to work.

[Fernando Mol]

I can see your drop down menu in IE8 on Vista and it looks weird, but it’s visible.

Your real problem is that you are using an advanced layout technique with a very basic knowledge on CSS. You are mixing background images for your logo and an AP div for your menu breaking the flow in the HTML. Those are advanced layout techniques.

The straightest way to make a drop down menu is not to do it at all, unless you are sure it’s the best way to go. This is an advanced DW tool that simplifies the coding, but it’s not always the best way to solve your navigation and it’s not easy to modify on the CSS. Use a simpler architecture for your site or don’t try to add “fancy makeup” to a tool you don’t feel fully comfortable using it. Be bold, yes! But walk before you run.

Many people use the drop down menu, but not everybody. See this page? The COW doesn’t have drop down menus and this is a very big site.

I know this is not the solution you are asking, but it’s my honest advice.

PS. If you post your problem in the Dreamweaver forum you’ll find a better “Spry Menu” expert than me.

[Crystal Van wyk]

Fernando,

Thanks for the feedback. I taught myself how to make a webpage from a book so have had a lot of difficulties. I’m trying to fix what my boss sees as a “navigation problem” and thought that a drop down may do it. It wasn’t in the plan originally.

I changed the links and wanted to update them:

What the navigation bar should look like: https://www.shwa.net/

My shot at a spry menu bar: https://www.shwa.net/About_Usmenutest.html

Thanks again for your suggestions.

[Fernando Mol]

You can look at the SpryMenuBarHorizontal.css and read the instructions on every rule. Adobe does a great work explaining each rule and what does modify.

Look for the rules under the “DESIGN INFORMATION: describes color scheme, borders, fonts” comment and modify them until you get the look you are looking for.

Right now I’ll suggest to have a bgcolor for the submenu items. Play with this rule: “ul.MenuBarHorizontal a” and give it a bg color. You can also redefine your fonts.

If you want a more step by step instructions please define exactly what you want to change in your actual menu.

I hope this helps.

Fernando Mol
Independent designer and video producer
http://www.fernandomol.com