dzi11
06 Mar 2011, 07: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 :mad:
Is there a simple solution to this?
Here is my CSS for my navigation:
#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:
<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>
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 :mad:
Is there a simple solution to this?
Here is my CSS for my navigation:
#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:
<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>