CSS Drop Down issue - Any GURU's out there?

[yinyang042]

Hey Everyone,

I am having a terrible time with my CSS drop down menu on my site. The site is http://www.designingdigitally.com

I have tried it with Firefox, IE6, and Safari 1.3.2 and there are crippling difficulties with each.

In IE6 the HOME COMPANY OUR WORK, etc. line does not appear at all.

In Firefox, when you place the mouse over COMPANY, a submenu appears, but when you try to mouse down it, it disappears.

In Safari, if you move the mouse just right, the submenu remains, but usually the bottom three items disappear.

Does anyone know what I can do to fix this? I have been playing hell with this issue.



My HTML:

<div class="PullDownDDINC ">
<ul>
<li><a href="http://www.designingdigitally.com/index.php">HOME
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if IE]><table><tr><td><![endif]-->
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul>
<li><a href="company.htm">COMPANY
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if IE]><table><tr><td><![endif]-->
<ul>
<li><a href="company.htm" >ABOUT US</a></li>
<li><a href="http://www.designingdigitally.com/blog/" >OUR BLOG</a></li>
<li><a href="policy.html" >OUR POLICY</a></li>
<li><a href="staff.html" >OUR TEAM</a></li>
<li><a href="history.html" class="lastone">OUR MISSION</a></li>
</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul>
<li><a href="http://www.designingdigitally.com/portfolio/index.php">OUR WORK
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if IE]><table><tr><td><![endif]-->
<ul>
<li><a href="clients.html" >OUR CLIENTS</a></li>
<li><a href="process.html" >OUR PROCESS</a></li>
<li><a href="portfolio/index.php" >OUR PORTFOLIO</a></li>
<li><a href="methodology.html" class="lastone">OUR METHOD</a></li>
</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul>
<li><a href="questions.html">QUESTIONS
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if IE]><table><tr><td><![endif]-->
<ul>
<li><a href="questions.html" >FAQ'S</a></li>
<li><a href="resources.html" >RESOURCES</a></li>
<li><a href="tutorials.html" class="lastone">TUTORIALS</a></li>
</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul>
<li><a href="services.html">OUR SERVICES
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if IE]><table><tr><td><![endif]-->
<ul>
<li><a href="elearning.html" >E-LEARNING</a></li>
<li><a href="flashd.html" >FLASH DEVELOPMENT</a></li>
<li><a href="graphicdesign.html" >GRAPHIC DESIGN</a></li>
<li><a href="gsa.html"> GSA IT SCHEDULE 70</a></li>
<li><a href="printing.html" >PRINTING SERVICES</a></li>
<li><a href="secondlife.html" >SECOND LIFE DESIGN</a></li>
<li><a href="webdesign.html" >WEB DESIGN</a></li>
<li><a href="dynamicscripting.html" class="lastone">WEB PROGRAMMING</a></li>
</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul>
<li><a href="contact.php">CONTACT US
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if IE]><table><tr><td><![endif]-->
<ul>
<li><a href="freequote.php" >FREE QUOTE</a></li>
</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>




MY CSS:

.PullDownDDINC {float:left; padding:0; margin:0;color: #FFFFFF;background: #333333;width:100%; border:solid 1px #333333;clear:both;} /*Color navigation bar normal mode*/
.PullDownDDINC a, .PullDownDDINC a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:200;
font-size:12px;
color: #FFFFFF;
background-color: #333333;
text-decoration: none;
}
.PullDownDDINC ul {list-style-type:none;padding:0; margin:0;}
.PullDownDDINC ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px #333333; }
.PullDownDDINC ul li a {color: #FFFFFF;background: #333333;float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:32px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.PullDownDDINC ul li ul {display:none; border:none;color: #FFFFFF;background: #333333;}
.PullDownDDINC ul li:hover a {background-color:#333333; text-decoration:none; color:#FB782C;} /*Color main cells hovering mode*/
.PullDownDDINC ul li:hover ul {display:block; position:absolute; z-index:999; top:32px; margin-top:1px; left:0;}
.PullDownDDINC ul li:hover ul li a {display:block; width:13em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #333333; border-bottom: solid 1px #333333; background-color:#333333; color:#ffffff; font-size:11px; letter-spacing:1px;} /*Color subcells normal mode*/
.PullDownDDINC ul li:hover ul li a:hover {background-color:#000000; text-decoration:none;color:#FB782C; font-size:11px; letter-spacing:1px;} /*Color subcells hovering mode*/
.PullDownDDINC table {position:absolute; top:0; left:0; border-collapse:collapse;color: #FFFFFF;background: #333333;}
.PullDownDDINC ul li a:hover {background-color:#333333; text-decoration:none;color:#FB782C;} /*Color main cells hovering mode*/
.PullDownDDINC ul li a:hover ul {display:block; width:13em; position:absolute; z-index:999; top:32px; left:0; }
.PullDownDDINC ul li a:hover ul li a {display:block; width:14em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #333333; border-bottom: solid 1px #333333; background-color:#333333; color:#ffffff; font-size:11px; letter-spacing:1px;} /*Color subcells normal mode*/
.PullDownDDINC ul li a:hover ul li a:hover {background-color:#000000; text-decoration:none;color:#FB782C; font-size:11px; letter-spacing:1px;} /*Color subcells hovering mode*/


a.FreeQuote {
display: block;
width: 119px;
height: 20px;
background: url("images/work_quote_over.gif") 0 0 no-repeat;
text-decoration: none;
float: left;
}

a:hover.FreeQuote {
background: url("images/work_quote_up.gif") 0 0 no-repeat;
display: block;
width: 119px;
height: 20px;

}

a.TestimonialBLock {
display: block;
width: 119px;
height: 20px;
background: url("images/service_method_over.gif") 0 0 no-repeat;
text-decoration: none;
float: left;
}

a:hover.TestimonialBLock {
background: url("images/service_method_up.gif") 0 0 no-repeat;
display: block;
width: 119px;
height: 20px;

}


a.NewsletterBLock {
display: block;
width: 119px;
height: 20px;
background: url("images/main_newsletter_over.gif") 0 0 no-repeat;
text-decoration: none;
float: left;
}


a:hover.NewsletterBLock {
background: url("images/main_newsletter_up.gif") 0 0 no-repeat;
display: block;
width: 119px;
height: 20px;

}

[WebJoel]

Wow... -could you have picked a more complicated, difficult drop-down to use? :D What with all the conditionals and all... you know, there ARE much easier to implement drop-downs available. :p

Also, I noted an error: missing-expected "</a>" before "</td>"

....<tr>
<td colspan="4"><a href="#"><script type="text/javascript" src="/chatlive/livehelp_js.php?eo=1&relative=Y&amp;department=1&amp;serversession=1&amp;pingtimes=15"></script></td>
<td colspan="4" valign="bottom"><img name="work_test_r1_c5" src="images/logo_top_half.gif" width="239" height="73" border="0" id="work_test_r1_c5" alt="Interactive Design Services and Application Development" /></td>
<td><img src="images/test/spacer.gif" width="1" height="73" border="0" alt="" /></td>
</tr>....

[yinyang042]

I will make that update. You said that I used a hard CSS drop down menu. Do you guys know where I can learn how to make this easier or what I should do to fix my issues with browsers?

[Centauri]

I much prefer the suckerfish dropdown menu over Stu Nichols' method of illegal nested tables via conditional comments - very messy. The list should also be one list, not multiple lists, and the surrounding div is also not needed (the name can be assigned to the <ul> itself, and should be an id rather than class).

Going the suckerfish route, the html for the entire menu can reduce to :<ul id="PullDownDDINC">
<li><a href="http://www.designingdigitally.com/index.php">HOME</a></li>
<li><a href="company.htm">COMPANY</a>
<ul>
<li><a href="company.htm">ABOUT US</a></li>
<li><a href="http://www.designingdigitally.com/blog/">OUR BLOG</a></li>
<li><a href="policy.html">OUR POLICY</a></li>
<li><a href="staff.html">OUR TEAM</a></li>
<li><a href="history.html" class="lastone">OUR MISSION</a></li>
</ul>
</li>
<li><a href="http://www.designingdigitally.com/portfolio/index.php">OUR WORK</a>
<ul>
<li><a href="clients.html">OUR CLIENTS</a></li>
<li><a href="process.html">OUR PROCESS</a></li>
<li><a href="portfolio/index.php">OUR PORTFOLIO</a></li>
<li><a href="methodology.html" class="lastone">OUR METHOD</a></li>
</ul>
</li>
<li><a href="questions.html">QUESTIONS</a>
<ul>
<li><a href="questions.html">FAQ'S</a></li>
<li><a href="resources.html">RESOURCES</a></li>
<li><a href="tutorials.html" class="lastone">TUTORIALS</a></li>
</ul>
</li>
<li><a href="services.html">OUR SERVICES</a>
<ul>
<li><a href="elearning.html">E-LEARNING</a></li>
<li><a href="flashd.html">FLASH DEVELOPMENT</a></li>
<li><a href="graphicdesign.html" >GRAPHIC DESIGN</a></li>
<li><a href="gsa.html"> GSA IT SCHEDULE 70</a></li>
<li><a href="printing.html">PRINTING SERVICES</a></li>
<li><a href="secondlife.html">SECOND LIFE DESIGN</a></li>
<li><a href="webdesign.html">WEB DESIGN</a></li>
<li><a href="dynamicscripting.html" class="lastone">WEB PROGRAMMING</a></li>
</ul>
</li>
<li><a href="contact.php">CONTACT US</a>
<ul>
<li><a href="freequote.php" >FREE QUOTE</a></li>
</ul>
</li>
</ul>
The css to run this would be :#PullDownDDINC {
float:left;
padding:0;
margin:0;
color: #FFFFFF;
background: #333333;
width:100%;
border:solid 1px #333333;
clear:both;
}
#PullDownDDINC li {
float:left;
position:relative;
border-right:solid 1px #333333;
list-style: none;
}
#PullDownDDINC a {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:200;
font-size:12px;
color: #FFFFFF;
background-color: #333333;
text-decoration: none;
float: left;
height: 32px;
line-height: 30px;
padding: 0 10px;
text-decoration: none;
}
#PullDownDDINC li ul {
border:none;
color: #FFFFFF;
background: #333333;
position: absolute;
top: 32px;
left: -999em;
margin: 0;
padding: 0;
}
#PullDownDDINC li:hover ul a, #PullDownDDINC li.sfhover ul a {
color: #FFFFFF;
}
#PullDownDDINC li:hover a, #PullDownDDINC li.sfhover a {
color: #FB782C;
}
#PullDownDDINC ul li:hover a, #PullDownDDINC ul li.sfhover a {
color: #FB782C;
background-color: #000000;
}
#PullDownDDINC li:hover ul, #PullDownDDINC li.sfhover ul {
z-index: 999;
left: 0;
}
#PullDownDDINC li ul li {
float: none;
}
#PullDownDDINC li ul li a {
width:12em;
height:auto;
line-height:1.3em;
margin-left:-1px;
padding:5px 10px 5px 10px;
border-left:solid 1px #333333;
border-bottom: solid 1px #333333;
font-size:11px;
letter-spacing:1px;
float: none;
display: block;
}
#PullDownDDINC a:hover {
background-color:#333333;
color:#FB782C;
}
Note that this will not work in IE6 without the suckerfish javascript - save this in a file called sfhover.js :sfHover = function() {
var sfEls = document.getElementById("PullDownDDINC").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
and link it in the <head> section of your page like this:<!--[if lt IE 7]><script src="sfhover.js" type="text/javascript"></script><![endif]-->

[yinyang042]

THank you so much for this info!

For some reason the rollovers are not working in IE7. Any idea why?

[yinyang042]

Nevermind. I took the <IF IE7> off the javascript linking and it works fine. Thanks again you rock! I really do appreciate your help! Thank you thank you thank you!