drop downs acting funny

There are no widths defined for the navigation li tags so it's defaulting to auto and taking the width of the parent container.

Can you please tell me which one I need to modify.  I tried a couple and it didn't work.  Drop downs always through me for a loop.


#nav li a:hover, ul#main-nav      li a:focus {border:1px solid gray;color:#000;background:#efefef;}
#nav li ul {padding:0;display:none;}
#nav li:hover ul {display:block;}
#nav li ul li {float:none; }
#nav li ul li a {font-size:0.9em;}

Should be nav li ul li

That was what I modified. Something is still kaflewie.  Any idea?
#nav li ul li {float:none;width:50px;}

http://nsitedesigns.com/nsitedesigns/surgical/surgeons.html
http://nsitedesigns.com/nsitedesigns/surgical/surgical.css

Where did this dropdown code come from?

modified suckerfish

Can anyone help me with these drop downs?  The buttons appear too wide.  I would think it is an easy fix.

http://nsitedesigns.com/nsitedesigns/surgical/surgeons.html
http://nsitedesigns.com/nsitedesigns/surgical/surgical.css

If you did the modifications, I would revert back the base js and css files and start over.  You may have over-modified something.  If it doesn't work in its pristine state, we have a different set of problems and need to do a different type of troubleshooting.

I am hoping someone out there can recommend a solution for me.  I worked on this navigation for hours and hours and don't want to trash it and start over.  I believe there is one small element that needs tweaking.  Anyone else have any thoughts?

I'm seeing this in the source code. There are no sub menu items under surgeons or anywhere else.

<div id="nav">
  <ul>
<li class="firstbutton"><a href="about.html">About</a></li>
        <li> <a href="patientinfo.html">Patient Info</a></li>
           <li><a href="surgeons.html">Surgeons</a></li>
        <li> <a href="services.html">Services</a></li>
        <li> <a href="vnus.html">VNUS Closure</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li class="lastbutton"><a href="index.html">Home</a></li>
  </ul>
</div>

In FF 4, I'm not seeing any drop downs either in the source or on the page.  

Did you remove the dropdowns?  I am speaking of this page, where I see none.
http://nsitedesigns.com/nsitedesigns/surgical/surgeons.html

Dang, I must have overwritten it.  I will add back in.

here is new link:
http://nsitedesigns.com/nsitedesigns/surgical/test.html

I want the drop downs to be the same width as the Surgeons button (or close to it). Right now the mouseover is working good but the nav bar extends out.

Try adding this to your CSS:

#nav li ul {
    background: #000000; /*Change to whatever color you want */
    display: none;
    float: left;
    padding: 0;
    position: absolute;
}

Select allOpen in new window

Dang - Works good in all browsers but IE 7.  In IE7 the drop downs shift about 20 pixels to the right and when you mouseover a button, the letters themselves have a background color.  I only want the button to turn white. In IE 7 the button turns white the but doctor's names have a background color of teal.  Weird huh?

Do you have the DOCTYPE set correctly?

I'm seeing 2 different #nav ul li a:hover definition.  I would recommend for the drop down's to have a separate section of CSS so that it overrides the previous definitions.

You do have some of the right ones like: #nav li ul li a, but you'll need to specify the hovers as well in order for IE 7 to behave, I believe.
As far as the positioning, you may need to have an IE 7 CSS and add left or right positioning in addition to your position:absolute.

I am not sure I understand.  How do I do a css sheet specific to ie?  

I found the duplicate css and removed it.  What do I need to do to the css below:

#nav li a:hover {
text-decoration:none;
background-color:#92b9b6;
color:#000;
    }

ul#main-nav      li a:focus {color:#000;background:#efefef;}
#nav li ul {padding:0;display:none;}
#nav li:hover ul {display:block;}
#nav li ul li {float:none;width:50px;}
#nav li ul li a {font-size:0.9em;}

Try this:

#nav li a:hover {
text-decoration:none;
background-color:#92b9b6;
color:#000;
    }

ul#main-nav      li a:focus {color:#000;background:#efefef;}
#nav li ul {
    background: #000000; /*Change to whatever color you want */
    display: none;
    float: left;
    padding: 0;
    position: absolute;
}#nav li:hover ul {display:block;}
#nav li ul li {float:none;width:50px;}
#nav li ul li a {font-size:0.9em;}

Select allOpen in new window

That didn't have any impact.  Drop downs text in button still has coloring around text only in IE7.  This is in addition to the mouseover button color.

It was suggested I create an IE7 specific css.  How do I do that?