www.webdeveloper.com
Results 1 to 5 of 5

Thread: HMTL Drop down nav issue

  1. #1
    Join Date
    Jun 2009
    Location
    Chi town. IL68 ICAO code home airport, literally.
    Posts
    157

    Question HMTL Drop down nav issue

    Hi there,

    I have this drop down menu that uses HMTL and CSS3 to dropdown and show the navigation. I have a slight issue though. On IE the dropdown works like its supposed to, but on Mozzila and the such, it doesnt work. It doesnt even work on IE8. I honestly cant see why this is happining. If anyone can figure this out, or help me out here that would be great.


    HTML Code:
    <ul id="menu">
    <li>
    <a href="index.shtml">Home</a>
    </li>
    						
    <li>
    <a href="team.shtml">Our Team & Vision</a>
    <ul>
    <li><a href="team.shtml">Our Team & Vision</a></li>
    <li><a href="dr.shtml">Dr. Risty</a></li>
    <li><a href="#">Worker # 1</a></li>
    <li><a href="#">Worker # 2</a></li>
    <li><a href="#">Worker # 3</a></li>
    <li class="last"><a href="#">Worker # 4</a></li>
    
    </ul>
    </li>
    						
    <li>
    <a href="free.shtml">Free Consultation</a>
    </li>
    						
    <li>
    <a href="newinf.shtml">New Patient Info</a>
    <ul>
    <li><a href="newinf.shtml">New Patient Info</a></li>
    <li><a href="getstarted.shtml">Getting Started</a></li>
    <li><a href="worho.shtml">Why Orthodontics?</a></li>
    <li><a href="office.shtml">Our Office</a></li>
    <li><a href="fininfo.shtml">Financial Information</a></li>
    <li><a href="testmon.shtml">Testimonials</a></li>
    <li class="last"><a href="patient.shtml">Patient Forms</a></li>
    </ul>
    </li>
    						
    <li>
    <a href="ortho.shtml">Orthodontics</a>
    <ul>
    <li><a href="ortho.shtml">Orthodontics</a></li>
    <li><a href="braces.shtml">Braces 101</a></li>
    <li><a href="orthospec.shtml">Orthodontic Specialist</a></li>
    <li><a href="orthoc.shtml">For Children</a></li>
    <li><a href="orthoa.shtml">For Adults</a></li>
    <li><a href="eiap.shtml">Early Interception and Prevention</a></li>
    <li><a href="tpt.shtml">Two-Phase Treatment</a></li>
    <li><a href="typebrace.shtml">Type of Braces</a></li>
    <li><a href="retaininst.shtml">Retainer Instructions</a></li>
    <li><a href="emercare.shtml">Emergency Care</a></li>
    <li><a href="commontreat.shtml">Common Treatments</a></li>
    <li class="last"><a href="invisalign.shtml">Invisalign</a></li>
    </ul>
    </li>
    						
    <li>
    <a href="dentoortho.shtml">Dentofacial Orthopedics</a>
    <ul>
    <li><a href="dentoortho.shtml">Dentofacial Orthopedics</a></li>
    <li><a href="palatal.shtml">Palatal Expander</a></li>
    <li class="last"><a href="surgicalortho.shtml">Surgical Orthodontics</a></li>
    </ul>
    </li>
    						
    <li>
    <a href="tmj.shtml">TMJ Disorders</a>
    </li>
    						
    <li>
    <a href="contact.shtml">Contact Us</a>
    <ul>
    <li><a href="contact.shtml">Contact Us</a></li>
    <li class="last"><a href="officeloc.shtml">Office Location</a></li>
    </ul>
    </li>
    </ul>
    </div>
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
    	$(function() {
    	  if ($.browser.msie && $.browser.version.substr(0,1)<7)
    	  {
    		$('li').has('ul').mouseover(function(){
    			$(this).children('ul').show();
    			}).mouseout(function(){
    			$(this).children('ul').hide();
    			})
    	  }
    	});        
    </script>
    and the css
    HTML Code:
    #menu{
    	width: 100%;
    	margin: 0;
    	padding: 10px 0 0 0;
    	float:left;
    	list-style: none;  
    	background: none;
    	/*background: -moz-linear-gradient(#444, #111); 
            background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));	
    	background: -webkit-linear-gradient(#444, #111);	
    	background: -o-linear-gradient(#444, #111);
    	background: -ms-linear-gradient(#444, #111);
    	background: linear-gradient(#444, #111);
    	-moz-border-radius: 50px;
    	border-radius: 50px;
    	-moz-box-shadow: 0 2px 1px #9c9c9c;
    	-webkit-box-shadow: 0 2px 1px #9c9c9c;
    	box-shadow: 0 2px 1px #9c9c9c;*/
    }
    
    #menu li{
    	float: left;
    	padding: 0 0 10px 0;
    	position: relative;
    }
    
    #menu a{
    	float: left;
    	height: 10px;
    	padding: 0 5px;
    	color: #999;
    	text-transform: uppercase;
    	font: 12px Tahoma, Sans-serif;
    	text-decoration: none;
    	text-shadow: 0 1px 0 #000;
    }
    
    #menu li:hover > a{
    	color: #fafafa;
    }
    
    *html #menu li a:hover{ /* IE6 */
    	color: #fafafa;
    }
    
    #menu li:hover > ul{
    	display: block;
    }
    
    /* Sub-menu */
    
    #menu ul{
        list-style: none;
        margin: 0;
        padding: 0;    
        display: none;
        position: absolute;
        top: 18px;
    	width:200px;
        left: 0;
        z-index: 99999;    
        background: #444;
        background: -moz-linear-gradient(#444, #111);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
        background: -webkit-linear-gradient(#444, #111);    
        background: -o-linear-gradient(#444, #111);	
        background: -ms-linear-gradient(#444, #111);	
        background: linear-gradient(#444, #111);	
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    
    #menu ul li{
        float: none;
        margin: 0;
        padding: 0;
        display: block;  
        -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
        -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
        box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    }
    
    #menu ul li:last-child{   
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;    
    }
    
    #menu ul a{    
        padding: 10px;
        height: auto;
        line-height: 1;
        display: block;
        white-space: nowrap;
        float: none;
        text-transform: none;
    }
    
    *html #menu ul a{ /* IE6 */   
    	height: 10px;
    	width: 150px;
    }
    
    *:first-child+html #menu ul a{ /* IE7 */    
    	height: 10px;
    	width: 150px;
    }
    
    #menu ul a:hover{
        background: #0186ba;	
    	background: -moz-linear-gradient(#04acec,  #0186ba);	
    	background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
    	background: -webkit-linear-gradient(#04acec,  #0186ba);
    	background: -o-linear-gradient(#04acec,  #0186ba);
    	background: -ms-linear-gradient(#04acec,  #0186ba);
    	background: linear-gradient(#04acec,  #0186ba);
    }
    
    #menu ul li:first-child a{
        -moz-border-radius: 5px 5px 0 0;
        -webkit-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0;
    }
    
    #menu ul li:first-child a:after{
        content: '';
        position: absolute;
        left: 30px;
        top: -8px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 8px solid #444;
    }
    
    #menu ul li:first-child a:hover:after{
        border-bottom-color: #04acec; 
    }
    
    #menu ul li:last-child a{
        -moz-border-radius: 0 0 5px 5px;
        -webkit-border-radius: 0 0 5px 5px;
        border-radius: 0 0 5px 5px;
    }
    
    /* Clear floated elements */
    #menu:after{
    	visibility: hidden;
    	display: block;
    	font-size: 0;
    	content: " ";
    	clear: both;
    	height: 0;
    }
    
    * html #menu             { zoom: 1; } /* IE6 */
    *:first-child+html #menu { zoom: 1; } /* IE7 */
    For want of a nail...the horseshoe was lost. For want of a horseshoe, the steed was lost. For want of a steed...the message was not delivered. For want of an undelivered message.....the war was lost.

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    Tested in:
    Google Chrome (22): works
    Firefox (15),
    IE9: rollover works, because the hover color of the main link turns white (no shadow effect)
    Safari 5: works
    Opera 12: works

  3. #3
    Join Date
    Jun 2009
    Location
    Chi town. IL68 ICAO code home airport, literally.
    Posts
    157
    Mhh, thanks, then it must be something on my end in this case!
    For want of a nail...the horseshoe was lost. For want of a horseshoe, the steed was lost. For want of a steed...the message was not delivered. For want of an undelivered message.....the war was lost.

  4. #4
    Join Date
    Mar 2009
    Posts
    452
    HMTL ? is it a new language in web development

  5. #5
    Join Date
    Jun 2009
    Location
    Chi town. IL68 ICAO code home airport, literally.
    Posts
    157
    Nope, simply a typo
    For want of a nail...the horseshoe was lost. For want of a horseshoe, the steed was lost. For want of a steed...the message was not delivered. For want of an undelivered message.....the war was lost.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles