Cross Browser Menu Tutorial

Cross Browser Menu TutorialIn this video tutorial I answer many questions I’ve received over the last month. For example:

1. Make a Cross Browser Menu that works with IE 6 & 7

2. Make a Menu that doesn’t require JavaScript

3. Make a Cross Browser WordPress Horizontal Menu

4. How do you execute different CSS styling based on browser type

And, many other questions will be answered in this video. The code follows the video.

If you like videos like this, share it with others

Code From the Video

$(function(){

    $("ul.dropdown li").hover(function(){
    
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    
    }, function(){
    
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    
    });

});

ul.dropdown ul li { 
	display: inline; 
	width: 100%; /* Width depends on the size of containing block */
} 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<title>Cross Browser Horizontal Menu</title>
	
	<link rel="stylesheet" href="css/style.css" type="text/css" />
	<!--[if lte IE 7]>
        <link rel="stylesheet" type="text/css" href="css/ie.css" />
    <![endif]-->
			
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
	
	<script type="text/javascript" language="javascript" src="js/crossbrowsermenu.js"></script>
	
	<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
</head>

<body>

<div class="art-bar art-nav">
	<div id="navigation" class="menu-menu-container">
	
	<ul id="menu-menu" class="dropdown">
		<li id="menu-item-720" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-720">
			<a href="#" >Home</a>
		</li>
		<li id="menu-item-734" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-734">
			<a href="#" >Products/Services</a>
				<ul class="sub-menu">
					<li id="menu-item-740" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-740">
						<a href="#" >Social Media Audit</a>
					</li>
					<li id="menu-item-891" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-891">
						<a href="#" >Social Media Consulting</a>
							<ul class="sub-menu">
								<li id="menu-item-753" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-740">
									<a href="#" >Social Media Audit</a>
								</li>
								<li id="menu-item-754" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-740">
									<a href="#" >Social Media Audit 2</a>
								</li>
							</ul>
					</li>
					<li id="menu-item-733" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-733">
						<a href="#" >Online Reputation</a>
					</li>
					<li id="menu-item-743" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-743">
						<a href="#" >Strategic Marketing Plan</a>
					</li>
					<li id="menu-item-729" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-729">
						<a href="#" >Mobile Marketing</a>
					</li>
					<li id="menu-item-836" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-836">
						<a href="#" >Real Estate Text Marketing</a>
					</li>
					<li id="menu-item-749" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-749">
						<a href="#" >A La Carte Services</a>
					</li>
					<li id="menu-item-1131" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1131">
						<a href="#" >Affiliate Products</a>
					</li>
				</ul>
		</li>
		<li id="menu-item-752" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-752">
			<a href="#" >Available Workshops</a>
				<ul class="sub-menu">
					<li id="menu-item-737" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-737">
						<a href="#" >Facebook Business Page</a>
					</li>
					<li id="menu-item-890" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-890">
						<a href="#" >LinkedIn Business</a>
					</li>
					<li id="menu-item-742" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-742">
						<a href="#" >Goals that Stick</a>
					</li>
					<li id="menu-item-745" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-745">
						<a href="#" >Affirmations for Life</a>
					</li>
					<li id="menu-item-750" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-750">
						<a href="#" >Clear the Clutter</a>
					</li>
				</ul>
			</li>
			<li id="menu-item-726" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-726">
				<a href="#" >Industry Articles</a>
		<ul class="sub-menu">
			<li id="menu-item-721" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-721">
				<a href="#" >Small Business Marketing</a>
			</li>
			<li id="menu-item-728" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-728">
				<a href="#" >Local Online Presence</a>
			</li>
			<li id="menu-item-732" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-732">
				<a href="#" >Mobile Marketing</a>
			</li>
			<li id="menu-item-741" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-741">
				<a href="#" >Social Media Marketing</a>
			</li>
		</ul>
	</li>
	<li id="menu-item-723" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-723">
		<a href="#" >Upcoming Events</a>
			<ul class="sub-menu">
				<li id="menu-item-724" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-724">
					<a href="#" >Are You LinkedIn</a>
				</li>
				<li id="menu-item-738" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-738">
					<a href="#" >Facebook Business/Fan Page</a>
				</li>
				<li id="menu-item-747" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-747">
					<a href="#" >Optimize LinkedIn Workshop</a>
				</li>
			</ul>
		</li>
		<li id="menu-item-744" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-744">
			<a href="#" >About Us</a>
				<ul class="sub-menu">
					<li id="menu-item-917" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-917">
						<a href="#" >About Social Voice Marketing</a>
					</li>
					<li id="menu-item-725" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-725">
						<a href="#" >Cindy&#8217;s Profile</a>
					</li>
					<li id="menu-item-731" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-731">
						<a href="#" >Barry&#8217;s Profile</a>
					</li>
				</ul>
			</li>
			<li id="menu-item-746" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-746">
				<a href="#" >Contact Us</a>
			</li>
</ul></div>
</div>

</body>

</html>

body { 
	/* Use em for IE and added custom google font*/
	font: 1.0em/1.4em 'PT Sans Narrow', sans-serif; 
	color: #fff;
} 

.menu-menu-container * { /* Everything starts out with no margins or padding */
	margin: 0; 
	padding: 0; 
}

.menu-menu-container { 
	width: 1000px; 
	margin: 0px auto; /* Top Bottom 25px / Left Right auto */
	border: 1px solid #3B88B4;
	float: left;
	background: #3B88B4;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3B88B4', endColorstr='#295D7C'); /* for IE */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#3B88B4), to(#295D7C)); /* for webkit browsers */
	background-image: -moz-linear-gradient(top,  #3B88B4,  #295D7C); /* for firefox 3.6+ */
} 

/* Remove underlines for all anchor tags in .menu-menu-container */
.menu-menu-container a { 
	text-decoration: none; 
}

/* Remove bullets for all ul tags in .menu-menu-container */
.menu-menu-container ul { 
	list-style: none; 
}

/* Styling for menubar */
ul.dropdown { 
	position: relative; 
}

ul.dropdown li { 
	font-weight: bold; 
	float: left; 
	zoom: 1; /* Forces IE to follow layout rules with the float */
	background: #3B88B4;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3B88B4', endColorstr='#295D7C'); /* for IE */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#3B88B4), to(#295D7C)); /* for webkit browsers */
	background-image: -moz-linear-gradient(top,  #3B88B4,  #295D7C); /* for firefox 3.6+ */ 
}

ul.dropdown a:hover { 
	color: #fff; 
}

ul.dropdown a:active { 
	color: #fff; 
}

ul.dropdown li a { 
	display: block; 
	padding: 6px 10px; /* Top Bottom 6px / Left Right 10px */
	border-right: 1px solid #3B88B4;
	color: #fff; 
}

ul.dropdown li:last-child a { 
	border-right: none; 
}

ul.dropdown li.hover,  /* Add hover class in JQuery so it works in IE */
ul.dropdown li:hover { 
	background: #295D7C;
	color: fff; 
	border: 1px solid #295D7C;
	position: relative; 
}

ul.dropdown li.hover a { 
	color: fff; 
}


/* First Drop Down Styling */
ul.dropdown ul { 
	width: 200px; 
	visibility: hidden; /* Hide Menu */
	position: absolute; 
	top: 100%; /* Sets top to the bottom of the containing box */
	left: 0; /* Sets left equal to the containing box */
}

ul.dropdown ul li { 
	font-weight: normal; 
	background: #3B88B4;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3B88B4', endColorstr='#295D7C'); /* for IE */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#3B88B4), to(#295D7C)); /* for webkit browsers */
	background-image: -moz-linear-gradient(top,  #3B88B4,  #295D7C); /* for firefox 3.6+ */ 
	color: #fff; 
	border-bottom: 1px solid #fff;
	float: none; 
}
									  
/* IE requires Inline Block */
ul.dropdown ul li a { 
	border-right: none; 
	width: 100%; /* Width depends on the size of containing block */
	display: inline-block; 
} 

/* Second Drop Down Styling */
ul.dropdown ul ul { 
	left: 100%; /* Positions item to the right of containing block */
	top: 0; /* Sets top to the top of the containing box */
}

/* Set styling for all uls that are children of li */
/* Makes menu appear on hover on all browsers since IE 7 */
ul.dropdown li:hover > ul { 
	visibility: visible; 
}

31 Responses to “Cross Browser Menu Tutorial”

  1. supprof1 says:

    thank you very mutch derek
    always making awesome tutorials

  2. Muddassir says:

    Thank you very much for this tutorial. It helps me in future 🙂

  3. Polder says:

    Derek,

    Last 3 days viewed all of your videos and want to say manymanymany thanks for all the effort you’ve put in to this stuff. I beginning to understand things I only dreamed about. I have a WordPress CMS website under construction and thanks to you I made a giant step in the completion of this site. Will let you know when it’s online. Once again thanks for you’re effort and generousity to made this available for the www community.
    Regards from the Netherlands and a 63 years old follower.

    • admin says:

      It makes me very happy that you find my tutorials useful. I do seem to attract people older than the normal 35 and under crowd. I don’t know why? I never meant for the WordPress tutorials to go so long, but most people that liked them appreciate the fact that I took the time to do so.

      It’s amazing that people in other countries see my stuff. I don’t travel at all and live a very frugal lifestyle.

      I plan to cover other areas of knowledge. I want this to be a free college of sorts. I plan to cover electronics, chemistry, microbiology, psychology and of course more programming tutorials in the new year. The fact is that without people like you I would have never continued this project. Your appreciation keeps me going.

      Thanks Derek

  4. emma says:

    Awesome tutorials…i love them alot, they are so helpful.keep it up

  5. melvin says:

    i, thanx for the tuts, I’m from Kenya and for once I’m getting da basics of setting up a website,many thanx!

  6. David says:

    Hello,

    Im not sure if my previous message was uploaded as I cannot see it in the reply therefore writing again. Sorry if its sent twice now.


    I am having problems with this showing up in IE8. Safari and Chrome are fine. For some reason the sub menus are not showing in my IE. I know that the code must be working becasuse I can see the boarder change when I hover over the menu but I cannot see the drop down menus. Do you have any idea were I am going wrong. Thanks Again. 🙂

    • admin says:

      Hi David, Sorry I couldn’t answer quicker. I always verify all of the comments don’t use code injection techniques.

      If you have elements on your page with a higher z-index they will show up over the drop downs. I almost guarantee that is the issue. I hope that helps

      • David says:

        I have now copied your tutorial EXACTLY as its shown and placed all the code in the right folders and still the menu dropdown doesnt show in my IE. Looked into z-index online and tested by placing it in the css code but still cannot figure out the whole thing. Derek do you have an idea were to put the z-index? Also I have copied the code EXACTLY as its show but why doesnt it work in IE…???????

        Help 🙁

        • admin says:

          Search for z-index in your css code. Then play with the z-index value for ul.dropdown ul until it shows up on top.

          As per why does IE work like this. IE has constantly worked different from every other browser. I tested this menu in IE 6, 7, 8, 9, and it worked. If you give something else on the page the same name as I use and then edit that CSS code you can have problems.

          Believe me I’ve had trouble with IE in the past. This is just part of the learning curve.

  7. Anonymous says:

    thanks for video..
    i have a question, i want to make css3 work for all the browsers, what can i do for this??
    is it possible to let all the properties of css3 work for all the browsers (even ie6 also)..

  8. Punit says:

    thanks for video..
    i have a question, i want to make css3 work for all the browsers, what can i do for this??
    is it possible to let all the properties of css3 work for all the browsers (even ie6 also)..

    • admin says:

      I’m working on a CSS3 and HTML5 tutorial. I actually started it here HTML 5 Help, but I ended it because nobody seemed interested in it. Tell me what you think of that tutorial. Anything I could improve?

      • Punit says:

        yeah you should continue with html5 and css3 tutorial they both are on boom, and if possible please create the complete series (like java), and please include all the features of html5 and css3, please include video on mobile development in html5, i never seen any video for this, html5 mobile development and all…

        Thank you..

  9. Truly, you have done a great service for many of us CSS heathens.

  10. credeau says:

    thanks a lot again sir Derek, I learn a lot from u…sir I hope you’ll upload a basic tutorials regarding slide show…good health and more power :*

  11. zahir says:

    Thanks at last find some useful knowledge. I was digging google for about 2 weeks and found you on youtube. Thanks alot .

  12. Jamie says:

    Hi Derek. I was wondering, you have 4 separate pages here of code it looks like. I wanted to know you can put that entire thing in the index.html for the website? your vid showed u switching back n forth to several pages and got confused.

    So is there a way to make that menu all on one page?

Leave a Reply

Your email address will not be published.

Google+