-
Spry menu bar problems
Hello,
I’ve been working on this spry menu bar for days and have some problems I can’t seem to find the solution to. Here is the test url with the spry menu I’m trying to get working: https://www.shwa.net/test/About_Usmenutest.html
I want the menu to sit like this: https://www.shwa.net/test/About_Us.htmlThe CSS- https://shwa.net/test/SpryAssets/SpryMenuBarHorizontal.css
These are my problems:
– There is a 30px padding all the way around my menu bar which is causing it to sit in the wrong place. I must be blind because I can not find that padding anywhere in the css!
– Is there a way to make the rollover image stay in the up state when the mouse moves over the submenu?
-There seems to be a long, skinny, unwanted scrollbar that pops up to the right of the submenu in Internet Explorer next to the submenu. How do I get rid of this?
-I can’t get the background color of the submenu to be solid white – only the top bar.
I know I’m asking a lot and want to say thanks so much for any help or suggestions. I’m pretty new to all of this.
-
5 Replies
-
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;
} -
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.
-
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.
-
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.
-
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
Reply to this Discussion! Login or Sign Up