View Full Version : Trying to modify the CSS of a javascript from dynamic drive but I've hit a roadblock

01-23-2009, 03:41 AM
I'm modifying the CSS of the JQuerySlideMenu from dynamic drive (found here: http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/)

Here is what I have so far: http://www.blassdesign.com/temp/menu/menu.html

You can see what my problem is. I separated .jqueryslidemenu ul li a and .jqueryslidemenu ul li so that it would be dynamic, no matter how much text I added. I used two different images...a left one, 15 pix, and a right one, that is around 300 so that it will expand for any amount of text.

The problem is that when I hover on one, I want both to turn white. Can you even set the hover of the li?

I'm assuming this takes scripting. If anyone knows of an easy way to accomplish what I am doing within the javascript, that would be awsome.

I might just have to figure out how big each menu item is and make one singular image for each if I want to have a rollover.

Any thoughts or comments are greatly appreciated.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<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*/

<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>


<div id="myslidemenu" class="jqueryslidemenu">
<li class="selected"><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<li><a href="#" class="first">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="#" class="last">Sub Item 1.4</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<li><a href="#" class="first">Sub Item 2.1</a></li>
<li><a href="#" class="last">Sub Item 2.2</a></li>
<li><a href="#">Item 4</a></li>
<br style="clear: left" />


font: bold 12px Arial;
width: 100%;
background-color: #cfd6de;

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;

/*Top level list items*/
.jqueryslidemenu ul li{
background:transparent url(../images/mainmenu_deactive_left.png) no-repeat scroll left top;
position: relative;
display: inline;
float: left;
margin: 0 3px;

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
background:transparent url(../images/mainmenu_deactive_right.png) no-repeat scroll right top;
display: block;
color: white;
padding: 10px 15px 10px 0;
color: #2d2b2b;
text-decoration: none;
.jqueryslidemenu ul li.selected {
.jqueryslidemenu ul li.selected a , .jqueryslidemenu ul li a:hover{

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
.jqueryslidemenu ul li.selected a:link, .jqueryslidemenu ul li.selected a:visited {
color: #205283;

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;

.jqueryslidemenu ul li a:hover{
color: #205283;

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
margin: 0 -3px;

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-top-color: #e6e6e6;
border-right-color: #e6e6e6;
border-bottom-color: #e6e6e6;
border-left-color: #e6e6e6;

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: bold 13px Arial;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
background-color: #f3f3ed;
background-image: none;
.jqueryslidemenu ul li ul li a:link, .jqueryslidemenu ul li ul li a:visited {
color: #205283;
.jqueryslidemenu ul li ul li a:hover {
color: black;
background-image: url(none);

/* ######### CSS classes applied to down and right arrow images ######### */

position: absolute;
top: 12px;
right: 7px;

position: absolute;
top: 6px;
right: 5px;

border-top: 1px solid #e6e6e6;

border-bottom: 1px solid #e6e6e6;
body {
background-color: #cfd6de;