Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts

    Unhappy Dropdown Menu not working in Safari

    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

    Code:
    <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.

    Code:
    <!--
    @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.
    Attached Thumbnails Attached Thumbnails Dropdown Menu not working in Safari-untitled-2.jpg  

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    It's a good idea to have a valid markup before going to check cross browser compatibility, see http://validator.w3.org/check?verbos...om%2Findex.php
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    aaronhockey_09 (04-22-2011)

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Bump!

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello aaronhockey_09,
    Looks like you started a new li before closing a previous ul. Look at this instead (code stilll needs validated...&'s) -
    Code:
    <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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    aaronhockey_09 (04-22-2011)

  • #6
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •