asked on

Css help needed with menu

Hey guys. I need some help styling a menu. I've been working on it for quite a number of hours, and I figured it was time to post a question.

Two links to reference:

Here is the mockup, with the way I would like the menu to look (not showing the expanded dropdown menus): http://www.prowodev.com/links/mockup.html. The background image is menu-bg.png.

Here is the actual site (in build): http://www.prowodev.com/links/site.html. It may be difficult to see the menu at first since it's currently white on a light background. Just look above the header image.

What CSS changes do I need to make to make the menu look like the mockup, with vertical dropdowns?

Also, this is Drupal site, and the module I'm using for the dropdown menus is Superfish, if that helps.

Thanks in advance.

Julian Hansen

Start with this

styles.css line 68

#header ul {
  list-style: outside none none;
  overflow: hidden;  / * ADD */
  text-align: left;
}

Open in new window

Next add this to your styles.css (assuming this comes after your superfish css file)

.sf-vertical, .sf-vertical li {
  width: auto;
}
ul.menu li {
  margin-left: 20px;
  margin-right: 20px;
  line-height: 53px;
}

Open in new window

That should get you started.

isaacr25

ASKER

Great! This has greatly lined things up.

Can you please look at the children menu items? Place your mouse over About or Patients. Why are the children menu items showing like that, as opposed to directly under the parent item?

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

isaacr25

ASKER

Thanks julianH.

Please take a look at the site again, with your adjustments added. It doesn't seem to quite have the desired effect. Any further suggestions?

Julian Hansen

The problem is in your styles.css file

header ul ul { /* MISSING '#' IN FRONT OF header
  background: #224975 none repeat scroll 0 0;
  height: auto;
  left: 0;
  margin-top: -2px;
  padding: 10px 5px;
  position: absolute;
  top: 100%;
}

Open in new window

In your markup header is defined like this

<div id="header">

Open in new window

It is an ID therefore in your style sheet it has to have a '#' in front of it - which you appear to have left out.

isaacr25

ASKER

Stupid mistake on my part. Thanks so much!

Julian Hansen

You are most welcome.