CSS Dropdown Issue

LINK-
http://www.securehostserver.info/gkent/

I am trying to add a dropdown to the page linked above. The nested unordered list is included under the “Services” button in the main navigation at the top of the page. I cannot get the dropdown to appear. Can someone help me?

Todd

In element div#header you have to change overflow to “visible”.
The “clearfix” class sets it as “hidden”.

Hi,

You seem to have corrupted (mixed) the clearfix method :slight_smile:

You should not have this:


.clearfix{overflow:hidden}

That will effectively negate the reason for this:


.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

If you are using the former then there is no need for the latter (and vice versa).

There is actually no need for either of those in your header anyway because you have set the height explicitly.

Besides, the above won’t work in IE6 because it needs haslayout instead.

So, I would simply remove the overflow:hidden from the clearfix class?
Also, can you tell me why the footer-container does not stretch to 100% of the width of the iPhone browser? It has a nasty white gap instead of touching the edges…

You either use the correct clearfix or us use overflow:hidden (+haslayout) instead except when you want visible overflow. If you are using overflow:hidden then you don’t need to add an extra class for it. Just apply the rule natively to the element. (There is a thread about clearfix currently being discussed a few threads down from this.)

Also, can you tell me why the footer-container does not stretch to 100% of the width of the iPhone browser? It has a nasty white gap instead of touching the edges…

Your page has a min-width of 1144px so the white space is the scroll region to the edge of the browser from your 1000px footer.

Add this:


#footer-container{min-width:1144px}