Dropdown Menu Tutorial

Download the following folder of files needed for the drop down menu:

And.... See below for the code snippets that we will paste into our page.

Watch the Following Videos

1. Dropdown Menu Part 1

2. Dropdown Menu Part 2

3. Dropdown Menu Part 3

4. Dropdown Menu Part 4

5. Dropdown Menu Part 5

The Code

1. Copy the following code and paste it into the <head> section of your web page.

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection">
	<!--[if lte IE 7]>
        <link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" >
    <![endif]-->
	<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>	
	<script type="text/javascript"  src="js/jquery.dropdownPlain.js"></script>

2. Copy the following HTML Code, and Paste it into a div (like the #top-nav div or some other div.)

<ul class="dropdown">
        	  <li><a href="#">Home</a></li>
			  <li><a href="#">Getting Started</a>
        		<ul class="sub_menu">
        			 <li><a href="#">Checklist</a></li>
        			 <li><a href="#">1. Set up Web Site</a></li>                         			 
        			 <li><a href="#">2. Set the Doctype</a></li>
        			 <li><a href="#">3. Make Web Page</a></li>
        			 <li><a href="#">4. Make External Style Sheet</a></li>
        			 <li><a href="#">5. Desiging the Web Page</a></li>
        			 <li><a href="#">6. Dynamic Web Template</a></li>
           		</ul>
        	</li>
        	<li><a href="#">CSS Basics </a><ul class="sub_menu">
        			<li><a href="#">What is CSS?</a></li>
        			<li><a href="#">Types of CSS</a></li>
        			 <li><a href="#">Style Declaration</a></li>
        			 <li><a href="#">3 Types of CSS Styles</a>
        				<ul>
        					<li><a href="#">Internal</a></li>
        					<li><a href="#">External</a></li>
        					<li><a href="#">Inline</a></li>
           				</ul>
        			 </li>
           			 <li><a href="#">CSS Selectors</a></li>
        			 <li><a href="#">Creating CSS Styles</a></li>
        			 <li><a href="#">Style Builder</a></li>
        			 <li><a href="#">CSS Layouts</a></li>
           			 <li><a href="#"></a></li>
        		</ul>
        	</li>
        	<li><a href="#">HTML Basics</a>
        		<ul class="sub_menu">
        			 <li><a href="#">What is HTML</a></li>
        			 <li><a href="#">HTML 5 ?</a></li>
        			 <li><a href="#">The Doctype</a></li>
        			 <li><a href="#">XHTML vs HTML</a></li>
        			 <li><a href="#">HTML Tags</a>
        				<ul>
        					<li><a href="#">div</a></li>
        					<li><a href="#">p</a></li>
        					<li><a href="#">h1 thru h6</a></li>
        					<li><a href="#">ul</a></li>
        					<li><a href="#">ol</a></li>
        					<li><a href="#">li</a></li>
        					<li><a href="#">br</a></li>
        					<li><a href="#">hr</a></li>
        					<li><a href="#">others</a></li>
        				</ul>
        			 </li>
        			 <li>
        				<a href="#">Link</a>
        				<ul>
        					<li><a href="#">Link</a></li>
        					<li><a href="#">Link</a></li>
        				</ul>
        			 </li>
        			 <li>
        				<a href="#">Link</a>
        				<ul>
        					<li><a href="#">Link</a></li>
        					<li><a href="#">Link</a></li>
        					<li><a href="#">Link</a></li>
        				</ul>
        			 </li>
        			 <li>
        				<a href="#">Link</a>
        				<ul>
        					<li><a href="#">Link</a></li>
        					<li><a href="#">Link</a></li>
        				</ul>
        			 </li>
        	  		</ul>
        	</li>
        	<li><a href="#">Making Layouts</a>
        	   <ul class="sub_menu">
        			 <li><a href="#">PreMade Layouts</a></li>
        			 <li><a href="#">Layout from Scratch</a></li>
        			 <li><a href="#">Link</a></li>
                </ul>
                </li>
			<li><a href="#">Video Tutorials</a>
        		<ul class="sub_menu">
        			 <li><a href="#">Getting Started</a></li>
        			 <li><a href="#">Layout Videos</a></li>
        			 <li><a href="#">Form Tutorial</a></li>
        			 <li><a href="#">Expression Design 3</a></li>
        			 <li><a href="#">Link</a></li>
           		</ul>
        	</li>
        	<li><a href="#">Products </a>
        	<ul class="sub_menu">
				<li><a href="#">EW 2 Training DVDs</a></li>
				<li><a href="#">EW 3 Training DVDs</a></li>
				<li><a href="#">Online Class</a></li>
				<li><a href="#">Link</a></li>
			</ul>
        	</li>
        	</ul>

A Place For Beginners

Dropdown Menu Tutorial

Watch the Following Videos

The Code