Drop Down Menu and IE

**dzi11** · 06 Mar 2011, 06:35 PM

I've got a successfully made drop down menu for this client's website: http://thepatriotwausau.com/

their are two dropdown menus under "Weddings" and "Catering"

Functions exactly how I want it. Looks great in Firefox, Chrome, Safari, ect...

Then I tried Internet Explorer, total mess

Is there a simple solution to this?
Here is my CSS for my navigation:

Code:

#navbar {
margin: 0;
padding: 0;
height: 1em; 
position: relative;
z-index: 597;
}

#navbar ul {
position: relative;
z-index: 597;
float: left;
width: auto;
}

#navbar li {
list-style: none;
float: left;
position: relative;
line-height: 1.2em;
text-decoration: none;
z-index: 597;
}

#navbar li a {
display: block;
z-index: 597;
position: relative;
 }

#navbar li a:hover {
z-index: 597;
text-decoration: underline;
position: relative;
}

#navbar li ul {
display: none; 
width: auto;
z-index: 597;
background-image: none;
position: relative;
}

#navbar li ul li {
color: #fff;
width: 100%; /* Width to help Opera out */
position: relative;
background-color: #570709;
background-image: none;
line-height: 10px;
padding-left: 10px;
margin: 0 auto;
text-decoration: none;
z-index: 597;
margin-top: -5px;
}

#navbar li ul li a {
color: #fff;
text-decoration: none;
font-weight: normal;
z-index: 597;
position: relative;
}

#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
z-index: 597;
margin-top: 31px;
padding: 0;
background-image: none;
}

#navbar li a {
background-image: none;
z-index: 597;

}
#navbar li:hover li, #navbar li.hover li {
float: none;
z-index: 597;
}

#navbar li:hover li a, #navbar li.hover li a {
position:relative;
z-index: 597;
color: #fff;
text-decoration: none;
 }

#navbar li li a:hover {
z-index: 597;
color: #4cb1ff;
 }

And my HTML PART:

Code:

<ul id="navbar">

        <!-- To show "current" on the home page -->
        <li class="first" id="current">
                <a href="http://thepatriotwausau.com">Home</a>

        </li>

        <!-- To show "current" on the Archive Page (a listing of all months and categories), individual posts, but NOT individual posts in category 10 -->
        <li>
                <a href="http://thepatriotwausau.com/about-us">About Us</a>
        </li>

    <!-- To show "current" on the About Page -->
        <li>

                <a href="http://thepatriotwausau.com/event">Events</a>
        </li>

        <!-- To show "current" on the About Page -->
        <li>
                <a href="http://thepatriotwausau.com/room">Rooms</a>
        </li>


 <li>
                <a href="http://www.thepatriotwausau.com/wedding">Weddings</a>
 <ul><li><a href="http://thepatriotwausau.com/weddings/Wedding_Package_New.pdf">WeddingPackage</a></li>
			<li><a href="http://www.bbjlinen.com/">BBJ Linen</a></li>
			<li><a href="http://thepatriotwausau.com/photo-gallery/">Photo Gallery</a></li>
<li><a href="http://thepatriotwausau.com/caterings/">Catering</a></li>
</ul> 
        </li>

 <li>
                <a href="http://thepatriotwausau.com/rent">Rentals</a>
        </li>

 <li>
                <a href="http://thepatriotwausau.com/caterings">Catering</a>
<ul>
			<li><a href="http://thepatriotwausau.com/2510-catering/">2510 Catering</a></li>

			<li><a href="http://thepatriotwausau.com/bobs-catering/">Bob's</a></li>
			<li><a href="http://thepatriotwausau.com/rockmans-catering/">Rockman's</a></li>
<li><a href="http://thepatriotwausau.com/sy-am-garden/">Sy-Am Garden</a></li>
<li><a href="http://thepatriotwausau.com/village-hearth-catering/">Village Hearth</a></li>
		</ul> 
        </li>
 <li class="last">
                <a href="http://thepatriotwausau.com/contact-us">Contact Us</a>

        </li>
</ul>

**dzi11** · 06 Mar 2011, 07:21 PM

someone just answered my question: just needed to add a doctope, it was seriously that simple. Just added to the top of my <html> tag lol

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

Thread: Drop Down Menu and IE

Thread Tools

Drop Down Menu and IE

Similar Threads

Second drop down menu

Posting Permissions