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.
isaacr25Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
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.
0
isaacr25Author Commented:
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?
0
Julian HansenCommented:
Firstly, we are going to have to modify a style from earlier line 77 of styles. Can't have an overflow hidden if we want to see our drop downs but if we move the overflow then the UL does not stretch to cover the LI items so the background is not seen.
#header ul {
  list-style: outside none none;
/*  overflow: hidden;   REMOVE THIS LINE */
  height: 53px; /* ADD THIS LINE */
  text-align: left;
}

Open in new window

Having done that we now need to style the sub-menu.
First we have to override the height we set above - that will cascade down to the children. We could make the above style only apply to first child i.e. #header > ul and then we don't have to override the height - your choice.

Next we have to position the menu absolutely and set the top to the height of its parent (<li>) and left to 0 (left of parent).
We set a negative margin to overwrite the space and border of the background and bring the sub menu flush with the parent.
We give some padding around the menu items
Finally we add the background colour to blend in with the parent.
#
header ul ul {
  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

Last step - give the child <li> items some room
#header ul ul li {
    padding: 5px 0;
}

Open in new window

Add the above to your styles.css file - should give you the result you want.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

isaacr25Author Commented:
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?
0
Julian HansenCommented:
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.
0
isaacr25Author Commented:
Stupid mistake on my part. Thanks so much!
0
Julian HansenCommented:
You are most welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.