sub menu list

[sti555]

how can i add multi level menu to my menu which i wrote below ? i want to do like this(http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/)


ul.menu {
list-style-type:none;
width:auto;
position:relative;
display:block;
height:33px;

background:url(images/bg.png) repeat-x top left;
font-family: "Lucida Grande",Verdana,sans-serif;
font-size: 12px;
line-height: 16px;
border:1px solid #000;
margin:0;
padding:0;
}

ul.menu li {
display:block;
float:left;
margin:0;
padding:0;
}

ul.menu li a {
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding-left:15px;
padding-top:4px;
font-weight:normal;
}

ul.menu li a:hover,.current {
color:#fff;
background:url(images/bg.png) repeat-x top left;
text-decoration:none;
}

ul.menu .current a {
color:#fff;
font-weight:700;
}


/*GREEN*/
ul.menu.green{
}
ul.menu.green li a:hover, .menu.green li.current {
background-color:#7AB900;
}


<ul class="menu green">
<li><a href="test.php" target="_self">test</a></li>
<li><a href="test" target="_self">test</a>
<ul>
<li><a href="test" target="_self">test</a></li>
<li><a href="test.php" target="_self">test</a>
</ul>
</li>
<li><a href="test.php" target="_self">test</a></li>
</ul>

[Snookerman]

Wrap it with the div from the demo page:

<div id="myslidemenu" class="jqueryslidemenu">
Your menu here
<br style="clear: left">
</div>
Add this to the head section of your page:

<link rel="stylesheet" type="text/css" href="jqueryslidemenu.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="jqueryslidemenu.js"></script>

Finally, download the JavaScript and CSS files and the arrow images from the demo page.

Good luck!

[hannah03]

Wrap it with the div from the demo page:

<div id="myslidemenu" class="jqueryslidemenu">
Your menu here
<br style="clear: left">
</div>
Add this to the head section of your page:

<link rel="stylesheet" type="text/css" href="jqueryslidemenu.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="jqueryslidemenu.js"></script>

Finally, download the JavaScript and CSS files and the arrow images from the demo page.

Good luck!


When you said, " Add this to the head section of your page:". Is this going to every page of .html or just the index.html?

Sorry, I am a newbie and learning now.

Hannah

[Snookerman]

You will need it on every page that you want the menu to be on. If you want the menu on all your pages, which I assume you do, then you need to add that to all of them.

Good luck!