Forum Moderators: open

Message Too Old, No Replies

Unable to see drop down menus in safari 3.2.1

         

Buzz

10:14 pm on Feb 19, 2009 (gmt 0)

10+ Year Member



Has anyone had this problem or heard of it? (I don't want to waste anyone's time so won't post code unless someone has.)

I created the horizontal navbar using css/html. I'm on iMac, OS 10.5.6.

I'm a beginner coder but it all validates.

Thanks for your help.

tedster

11:55 pm on Feb 19, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



How are these dropdown menus coded?

If they use javascript to change visibility or display in the CSS, you may have run into a difference either in the DOM or in the Javascript.

Buzz

12:43 am on Feb 20, 2009 (gmt 0)

10+ Year Member



Hi Tedster,

I coded in xhtml and css.

Here's the html code (I apologize if I'm uploading it wrong--I couldn't find any special attach method.)

<div id="wrapper1">
<div id="navigation"><!-- Navigation bar -->
<ul>
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<!-- Drop-down menu -->
<ul><li><a href="#">Nice Extras</a></li></ul><!-- End drop-down menu -->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="services"><a href="#">Services<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<!-- Drop-down menu -->
<ul><li><a href="#">Have A Look</a></li></ul><!-- End drop-down menu -->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="howitworks"><a href="#">How It Works</a></li>
<li class="contact"><a href="#">Contact</a></li>
</ul>
</div><!-- End navigation bar -->

Here's the corresponding css code:

/* Drop-down menu styling */
#navigation li ul
{
position:absolute;
z-index:100;
visibility:hidden;
}

/* Make drop-down menus visible on hover */
#navigation li:hover ul li, #navigation li a:hover ul li /* IE6 hack */
{
visibility:visible;
border-right:none;
top:0;
left:0;
}

/* Apply to drop-down menu choices */
#navigation li:hover ul li a, #navigation li a:hover ul li a /* IE6 hack */
{
color:#000;
background-color:#f9f9f9!important;
text-align:center;
display:block;
width:7em;
height:auto;
padding:0;
position:relative;
}

/* Change color on hover */
#navigation li:hover ul li a:hover, #navigation li a:hover ul li a:hover /* IE6 hack */
{
background-color:#ccc!important;
color:#000;
}

/* IE6 hack applies to its table drop-down */
#navigation table
{
margin:-1px;
border-collapse:collapse;
position:absolute;
top:0.5em;
left:0;
z-index:100;
}
/* End navigation bar styling section */

(You may see an oddball measurement in there for IE6 coding. I'm doing trial and error placement, and haven't been able to check it in IE6 yet)

Thanks.