...

View Full Version : Dropdown Menu not working in Safari



aaronhockey_09
04-21-2011, 05:37 PM
Hey guys, so im building a site right now.
And everything seems to work fine, except for the dropdown menu in safari.

Here is the html for the drop down


<div id="nav" class="container">
<ul class="dropdown">
<li><a class="dir">Services</a>
<ul>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Coaching-and-Mentoring">Coaching / Mentoring</a></li>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Kens-Topics">Keynote Speaking & Workshops</a></li>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Marketing-Services">Marketing Services</a></li>
</ul>
</li>
<li><a class="dir">Workshops & Seminars</a>
<ul>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Teleconference-Series">Teleconference Series</a></li>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Mastery-Summit">Seminars</a></li>
</ul>
<li><a class="dir">Videos</a>
<ul>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/The-Bottom-Line">The Bottom Line</a></li>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Live-Streams">Live Streams</a></li>

</ul>
</li>
<li><a class="dir">Discuss & Grow</a>
<ul>
<li><a href="blog.ckginternational.com">Coach Kens Blog</a></li>
</ul>
</li>
<li><a class="dir">Free Resources</a>
<ul>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Newsletter">Newsletter</a></li>
<li><a href="blog.ckginternational.com">Coach Kens Blog</a></li>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Billionaire-Mindset">Billionaire Mindset</a></li>
</ul>
</li>
<li><a class="dir">Testimonials</a>
<ul>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/What-Clients-Are-Saying">What Clients Are Saying</a></li>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Success-Stories">Success Stories</a></li>
</ul>
</li>
<li><a href="https://ckg.infusionsoft.com/cart/store.jsp" class="dir">Store</a>
</li>
<li><a class="dir">About Us</a>
<ul>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Company-Profile">Company Profile</a></li>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Coach-Ken">About Coach Ken</a></li>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Coaching-Team">Our Coaching Team</a></li>
</ul>
</li>

<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Contact-Us" class="dir">Contact Us</a>
</li>
</ul></div>

And here is the CSS for it as well.


<!--
@charset "UTF-8";

/**
* Horizontal CSS Drop-Down Menu Module
*
* @file dropdown.css
* @package Dropdown
* @version 0.7.1
* @type Transitional
* @stacks 597-599
* @browsers Windows: IE6+, Opera7+, Firefox1+
* Mac OS: Safari2+, Firefox2+
*
* @link http://www.lwis.net/
* @copyright 2006-2008 Live Web Institute. All Rights Reserved.
*
*/

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}

ul.dropdown {
position: relative;
z-index: 597;
width:960px;
margin:0 auto;
padding-left:65px;
}

ul.dropdown li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
font-family:Arial, Helvetica, sans-serif; font-size:12px;

}

ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 1;
cursor: default;
}

ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width:175px;
}

ul.dropdown ul li {
float: none;

}

ul.dropdown ul ul {
top: 1px;
left: 99%;

}

ul.dropdown li:hover > ul {
visibility: visible;
}

@charset "UTF-8";

/**
* NVIDIA Advanced CSS Drop-Down Menu Theme
*
* @file default.advanced.css
* @name NVIDIA
* @version 0.1
* @type transitional
* @browsers Windows: IE5+, Opera7+, Firefox1+
* Mac OS: Safari2+, Firefox2+
*
* @link http://www.lwis.net/
* @copyright 2008 Live Web Institute. All Rights Reserved.
*
*/

@import "default.css";


ul.dropdown li a {
display: block;
padding: 7px 14px;
color:#000;
padding-top:12px;
padding-bottom:10px;

}


/* ------------- Override default */

ul.dropdown li {
}


/* ------------- Reinitiate default: post-override activities */

ul.dropdown li.dir {
padding: 7px 20px 7px 14px;
}

ul.dropdown ul li.dir {

}


/* ------------- Custom */

ul.dropdown li { background-color:#c3b59b;

}

ul.dropdown ul a {
padding: 4px 5px 4px 14px;
width: 156px; /* Especially for IE */
background-color:#899590;
}

ul.dropdown ul a:hover {
background-color: #899590;
color:#fff;
width:156px;
}

ul.dropdown a.open {
background-color: #899590;
color: #fff;
}

ul.dropdown ul a.open {
background-color: #899590;
color: #fff;
}


/* CSS 2.1 */

ul.dropdown li:hover > a.dir {
background-color: #899590;
color: #fff;
}

ul.dropdown ul li:hover > a.dir {
background-color: #899590;
color: #fff;
}
-->

A picture of the problem has been attached.

abduraooft
04-21-2011, 06:04 PM
It's a good idea to have a valid markup before going to check cross browser compatibility, see http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.ckgtools.com%2Findex.php

aaronhockey_09
04-21-2011, 06:24 PM
Hey, so i was looking at the validator, and alot of them dont make sense to me, specifically the "li" ones.

In my head atleast, i have declared all of the UL and LI's properly.

What have i done wrong.

aaronhockey_09
04-22-2011, 01:00 AM
Bump!

Excavator
04-22-2011, 01:49 AM
Hello aaronhockey_09,
Looks like you started a new li before closing a previous ul. Look at this instead (code stilll needs validated...&'s) -
<div id="nav" class="container">
<ul class="dropdown">
<li><a class="dir">Services</a>
<ul>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Coaching-and-Mentoring">Coaching / Mentoring</a></li>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Kens-Topics">Keynote Speaking & Workshops</a></li>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Marketing-Services">Marketing Services</a></li>
</ul>
</li>
<li><a class="dir">Workshops & Seminars</a>
<ul>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Teleconference-Series">Teleconference Series</a></li>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Mastery-Summit">Seminars</a></li>
</ul>
</li>
<li><a class="dir">Videos</a>
<ul>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/The-Bottom-Line">The Bottom Line</a></li>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Live-Streams">Live Streams</a></li>
</ul>
</li>
<li><a class="dir">Discuss & Grow</a>
<ul>
<li><a href="blog.ckginternational.com">Coach Kens Blog</a></li>
</ul>
</li>
<li><a class="dir">Free Resources</a>
<ul>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Newsletter">Newsletter</a></li>
<li><a href="blog.ckginternational.com">Coach Kens Blog</a></li>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Billionaire-Mindset">Billionaire Mindset</a></li>
</ul>
</li>
<li><a class="dir">Testimonials</a>
<ul>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/What-Clients-Are-Saying">What Clients Are Saying</a></li>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Success-Stories">Success Stories</a></li>
</ul>
</li>
<li><a href="https://ckg.infusionsoft.com/cart/store.jsp" class="dir">Store</a> </li>
<li><a class="dir">About Us</a>
<ul>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Company-Profile">Company Profile</a></li>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Coach-Ken">About Coach Ken</a></li>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Coaching-Team">Our Coaching Team</a></li>
</ul>
</li>
<li><a href="http://www.ckgtools.com/index.php/CKGInternational/Contact-Us" class="dir">Contact Us</a> </li>
</ul>
</div>

aaronhockey_09
04-22-2011, 05:12 AM
Hey, thanks for that catch.
Unfortunately it didn't seem to fix the problem.

I think some of the UL's and LI's are mixed up somewhere in the css.
Any other help would be greatly appreciated.

And yes, i need to start validating during development.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum