View Full Version : Mouse Over Timing on CSS Dynamic Menu

12-01-2007, 06:22 PM

I have got a CSS menu script from this site and I have the following query.
When you roll of the menu it closes painfully quick especially if you did not mean to, is there some sort CSS command to control the timing of the mouse to ?
Heres the code for notepad.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Menu</title>
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

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

/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
background-color: #F3F3F3; /*overall menu background color*/

/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
width: 90px; /*Width of top level menu link items*/
padding: 1px 8px;
border: 1px solid black;
border-left-width: 0;
text-decoration: none;

/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{
left: 159px; /* no need to change, as true value set by script */
top: 0;

/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 160px; /*width of sub menu levels*/
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;

.suckertreemenu ul li a:hover{
background-color:#000099; /*Rollover Color */
color: white;

/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background: #F3F3F3 url(media/arrow-down.gif) no-repeat center right;

/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #F3F3F3 url(media/arrow-right.gif) no-repeat center right;

* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;

/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* End */

body {
margin-left: 0px;
margin-top: 0px;

<script type="text/javascript">

//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
else{ //else if this is a sub level menu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it

if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)




<div class="suckertreemenu">

<ul id="treemenu1">
<li><a href="#" style="border-left: 1px solid black">Item 1</a>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 3.1</a></li>
<li><a href="#">Sub Item 4.1</a></li>

<li><a href="#">Item 2</a>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a></li>
<li><a href="#">Sub Item 2.3</a></li>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Sub Item 2.1.3</a></li>
<li><a href="#">Sub Item 2.4</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>

<br style="clear: left;" />
<p id="iepara">Rest of content here</p>


Any help would be welcome as always.