Multi drop down menu

**suresh_gop** · 05-02-2010, 02:05 PM

Hello,

I am trying to create a website with muti level menu for the following HTML. I have attached 3 files here.

1. Outdoor.css is HTML css file
2. jqueryslidemenu is muti level menu css
3. jqueryslidemenu is muti level menu js

I edited all three files with my HTML code i could not get result that i wish. navigation bar is displayed but muti level menu is not displayed.

How to overcome this?

Thanks,
Suresh.G

HTML

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta name="Description" content="Information architecture, Web Design, Web Standards." />
<meta name="Keywords" content="your, keywords" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Distribution" content="Global" />
<meta name="Author" content="Erwin Aligam - ealigam@gmail.com" />
<meta name="Robots" content="index,follow" />

<link rel="stylesheet" href="images/Outdoor.css" type="text/css" />
<link rel="stylesheet" href="images/jqueryslidemenu.css" type="text/css"/>

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="images/jqueryslidemenu.js"></script>



<title>SK Exports</title>

</head>
<body>

<!-- wrap starts here -->
<div id="wrap">

	<!--header -->
	<div id="header">			
				
		<h1 id="logo-text"><a href="index.html" title="">SK Exports</a></h1>		
		<p id="slogan">Go Green...</p>
			
		<div id="header-links">
			<p>
			<a href="index.html">Home</a> | 
			<a href="index.html">Contact</a> | 
			<a href="index.html">Site Map</a>			
			</p>		
		</div>				
		
	<!--header ends-->					
	</div>
	
	<div id="header-photo"><img src="images/headerBackground.jpg" width="870" height="206" alt="header-photo" /></div>	
	
		

	<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
		<ul>
    		<li><a href="#">Sub Item 3.1.1.1</a></li>
    		<li><a href="#">Sub Item 3.1.1.2</a></li>
    		<li><a href="#">Sub Item 3.1.1.3</a></li>
    		<li><a href="#">Sub Item 3.1.1.4</a></li>
    		<li><a href="#">Sub Item 3.1.1.5</a></li>
		</ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>		
		

</body>
</html>

Attachment 3282 ( outdoor.css )
Attachment 3283 ( jqueryslidemenu.css )
Attachment 3284 ( jqueryslidemenu.js )

**katierosy** · 05-04-2010, 12:53 PM

Crosscheck the file path.
As per the code your JS and CSS should be placed in the images folder.
images folder need to be placed at the root of the HTML File.

**suresh_gop** · 05-09-2010, 05:27 AM

I checked as you told. now drop down menu items are not dispalyed just menu bar only displaying with underline.

Thread: Multi drop down menu

Thread Tools

Search Thread

Multi drop down menu

Bookmarks

Bookmarks

Posting Permissions