...

View Full Version : jQuery Multi Level CSS Menu #2



Paramasivan
05-05-2011, 01:14 AM
I used jQuery Multi Level CSS Menu #2 from Dynamic Drive ( url http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/ )

I could not retain the hover state of the main menu when the cursor is its sub-menus. I tried the following:

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

changed to:

.jqueryslidemenu ul li a:hover, .jqueryslidemenu ul li:hover a{
background: black; /*tab link background during hover state*/
color: white;
}

AND

.jqueryslidemenuz ul li ul li a:hover

to

.jqueryslidemenuz ul li ul li a:hover, .jqueryslidemenuz ul li ul li:hover a

{.jqueryslidemenuz supposed to be .jqueryslidemenu }

Still not working. The sub-menus retain the hover state of the main menu, and during hover on the sub-menu, then that menu alone display its sub-menu hover state.

Any ideas?

Thank you

abduraooft
05-05-2011, 10:02 AM
You need to provide a link or the complete code at your end, since the dropdown in the original link works fine.

Paramasivan
05-05-2011, 05:38 PM
Can you please mention the code?

abduraooft
05-05-2011, 05:40 PM
Can you please mention the code?
To know what's going wrong at your end, you need to show the complete code at your end.

Paramasivan
05-05-2011, 06:28 PM
.jqueryslidemenu{
font: bold 13px Arial, Helvetica, sans-serif;
width: 950px;
height:56px;
margin:0 auto;
}

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

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;

color: white;
padding: 21px 27px 19px 25px;
background:url(../images/divider.jpg) top right no-repeat;

text-decoration: none;
}
.jqueryslidemenu ul li a.lastmenu{
background:none;
}
.jqueryslidemenu ul li a.startmenu{
padding: 21px 25px 19px 0px;
}
.jqueryslidemenu ul li a.startmenu:hover{
background:url(../images/menu_hover1.jpg) top left no-repeat;
}
* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

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


.jqueryslidemenu ul li a:hover{
background: url(../images/menu_hover.jpg) top left no-repeat; /*tab link background during hover state*/
color:#8ec546;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0px;
display: block;
visibility: hidden;
margin-left:10px;
}
.jqueryslidemenu ul li ul li ul{
margin-left:0px;
}
.jqueryslidemenu ul li ul.startmenu1{
margin-left:0px;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
border:none;
}

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

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Arial, Helvetica, sans-serif;
color:#e6e6e6;
width: 200px; /*width of sub menus*/
padding: 13px 0 13px 15px;
margin: 0;
border-top-width: 0;
background:#323232 url(../images/sub_bottom.jpg) bottom left no-repeat;
}
.jqueryslidemenu ul li ul li a.botlink {
background:#323232 url(../images/menubotbg.jpg) bottom left no-repeat;
}
.jqueryslidemenu ul li ul li a:hover{ /*sub menus hover style*/
background:#161616;
color:#e6e6e6;
}

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

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 17px;
right: 22px;
}

-----------------------------------------------------------------

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="Monitoring.html" title="Monitoring" class="startmenu">Monitoring</a>
<ul class="startmenu1">
<li><a href="MonitorsList.html" title="Monitors List">Monitors List</a></li>
<li><a href="ContactsList.html" title="Contacts List">Contacts List</a></li>
</ul>
</li>
<li><a href="Reports.html" title="Reports">Reports</a>
<ul>
<li><a href="TestStatus.html" title="Test Status">Test Status</a></li>
<li><a href="Summary.html" title="Summary">Summary</a></li>
<li><a href="Charts.html" title="Charts">Charts</a></li>
<li><a href="TestLog.html" title="Test Log">Test Log</a></li>
<li><a href="FailureLog.html" title="Failure Log">Failure Log</a></li>
</ul>
</li>
<li><a href="Tools.html" title="Tools">Tools</a>
<ul>
<li><a href="PingTest.html" title="Ping Test">Ping Test</a></li>
<li><a href="HTTPBasicTest.html" title="HTTP Basic Test">HTTP Basic Test</a></li>
<li><a href="HTTPStandardTest.html" title="HTTP Standard Test">HTTP Standard Test</a></li>
</ul>
</li>
<li><a href="Account.html" title="Account" class="lastmenu">Account</a>
<ul>
<li><a href="AccountInfo.html" title="Account Info">Account Info</a></li>
<li><a href="Users.html" title="Users">Users</a></li>
<li><a href="Billing.html" title="Billing">Billing</a>
<ul>
<li><a href="BillingInfo.html" title="Billing Info">Billing Info</a></li>
<li><a href="BillingChangeLog.html" title="Billing Change Log">Billing Change Log</a></li>
</ul>
</li>
</ul>
</li>
</ul>


</div> <!-- end myslidemenu -->

teedoff
05-05-2011, 06:34 PM
Thats not your complete code. A link to your site would be the best thing.

Paramasivan
05-05-2011, 06:37 PM
Not yet hosted.

Paramasivan
05-05-2011, 06:40 PM
Please see http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

I used nothing but same, only menu items changed.

Paramasivan
05-05-2011, 07:15 PM
When the cursor is in its sub menu, I want to retain the hover state of the sub-menu as well as the hover state of the main menu (when cursor is in its sub-menu).

In the original code of Dynamic Drive, hover state of the main menu is not retained when the cursor is in its sub menu.

Will Javascript or jQuery will do this function?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum