#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2006
    Posts
    68
    Rep Power
    14

    Drop Down Menu Help


    Hi I have the following script is from http://tiernok.com/tt/dropdown/styles/caffeine.css and
    http://www.htmldog.com/articles/suckerfish/ that I am trying to modify. It runs fine both in IE and Netscape
    but look and feel is what I am trying to make it work. Here is the issue I am facing and have tried but couldn't figure it out

    1. In IE when hovering over Services And Implementation there's too much gap between Services And Implementation and History1Histy1 as in FireFox it comes out fine but everything is overlapped. Want to have less gap between menu and sub-menu.

    2. How can I increase the width for the menus and sub menus, as I want to fit everything in table width of 586.

    Code:
    <html>
    <head>
    	<title> Caffeinated Dropdowns </title>
    	<STYLE>
    /**************************** Editable Pretty Stuff *****************/
    /* Modification of the .ddMenu li item will require modification	*/
    /* of the .ddVert width as well
    /********************************************************************/
    
    /* Menu List Items */
    .ddMenu li{	
    	width: 117px;
    	height: 20px;
    	background: #9C2B01;
    	color: #616F81;
    	font-weight: bold;
    }
    .ddMenu .top_lvl .mnu_foot{
    	background-color: #9C2B01;
    	height: 2px;
    	border-bottom: 1px solid #616F81;
    	width: 117px;
    }
    .ddMenu .top_lvl .mnu_head{
    	/* used to space from the top menu without losinghover focus */
    	border: 0px;
    	height: 1px;
    	background-color: #9C2B01;
    	width: 117px;
    }
    .ddMenu .top_lvl li{
    	background: #9C2B01;
    	border-right: 0px solid #dddddd
    }
    .ddHoriz .mnu_head, .ddHoriz .mnu_foot{
    	width: 1px;
    }
    .ddHoriz .mnu_foot{
    	display: none;
    }
    .ddVert li{
    	background-color: yellow;
    }
    .ddVert .top_lvl{
    	padding: 15px 0 15px 0;
    	border-bottom: 1px solid #616F81;
    }
    ul.ddVert li.mnu_foot, ul.ddVert li.mnu_head{
    	background-color: #9C2B01;
    }
    /* Menu List Items Hover */
    .ddMenu li.sfhover, .ddMenu li:hover{
    	background-color: green;
    	color: #816A61;
    	z-index: 5;
    	cursor: default;
    }
    
    .ddMenu a:link { text-decoration: none; color: white }
    .ddMenu a:visited { text-decoration: none; color: white }
    .ddMenu a:hover { text-decoration: none; color: white }
    
    /**************************** Required CSS **************************/
    .ddMenu, .ddMenu ul {	/**** all lists ****/
    	list-style: none;	/* list style for menus */
    	margin: 0px;		/* get rid of built-in margin */
    	padding: 0px;		/* get rid of built-in padding */
    	display: block;		/* display as block elements */
    }
    .ddMenu li{				/**** all list items ****/
    	float: left;		/* float list items */
    	position: relative; /* position relative to siblings */
    }
    .ddMenu li a{			/**** all anchors in list items ****/
    	display: block;		/* make anchor tags block tags */
    	width: 100%;		/* 98% width to compensate for any borders 
    						/* that get added without obviously stealing
    						/* hover space from user */
    }
    .ddMenu li ul{			/**** positioning for sub-menus ****/
    	position: absolute; /* position */
    	display: none;		/* hide submenus */
    }
    
    .ddMenu li.sfhover ul.ulhover{ /**** show immediate submenu for IE ****/
    	display: block;
    }
    .ddMenu li:hover>ul{ /**** Show immediate submenu for compliant browsers ****/
    	display: block;
    }	
    
    /**************************** Horizantal ***************************/
    /* Sub-Menus need to drop down, Sub-Sub-Menus need to fly out to   */
    /* the right in a horizantal view                                  */
    ul.ddHoriz ul ul{
    	left: 100%;
    	top: 0;
    }
    .ddHoriz li ul{
    	top: 1.2em;
    	left: 0px;
    }
    
    /**************************** Vertical *****************************/
    /* Menu needs a fixed width in vertical view to cause wrapping and */
    /* sub-menus fly to the right by default                           */
    .ddVert, .ddVert ul{
    	width: 10em;
    }
    .ddVert li ul{
    	top: 0px;
    	left: 100%;
    }
    </STYLE>
    	<script language="JavaScript" type="text/javascript"><!--//--><![CDATA[//><!--
    	//--- This script is heavily based upon the one published as part of the SuckerFish dropdown method.
    	//--- For more information, please visit: http://www.htmldog.com/articles/suckerfish/
    	ddHover = function() { 
    		var ddMs = document.getElementsByTagName("UL");
    		for ( var t=0; t<ddMs.length;t++){
    			if(ddMs[t].className.indexOf("ddMenu") > -1){
    				var ddSMs = ddMs[t].getElementsByTagName("LI"); 
    				for (var i=0; i<ddSMs.length; i++) { 
    					ddSMs[i].onmouseover = function(){
    						var ddsm = this.getElementsByTagName("UL")[0];
    						this.className+=" sfhover";
    						if(ddsm != null){ ddsm.className+= " ulhover"; }}
    					ddSMs[i].onmouseout = function(){
    						var ddsm = this.getElementsByTagName("UL")[0];
    						this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); 
    						if(ddsm != null){ ddsm.className = ddsm.className.replace(new RegExp(" ulhover\\b"), ""); }
    					}
    				}
    			}
    		}
    	}
    	if (window.attachEvent) window.attachEvent("onload", ddHover)
    	//--><!]]></script>
    </head>
    <body>
    <TABLE width="586" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#9C2B01">
    		<TR><TD height="28" valign="center" bgcolor="#9C2B01" align="center">	
    			<ul class="ddMenu ddHoriz">
    				<li class="mnu_head"></li>
    				<li class="top_lvl"><a href="" title="History of Chocolate">Customer Inform</a></li>
    					<li class="top_lvl"><font color="white">Services And Implementation</font>
    					<ul>
    						<li class="mnu_head"></li>
    						<li><a href="" title="The History of Tea">History1Histy1</a></li>
    						<li><a href="" title="The History of Tea">Services And Implementation History</a></li>
    						<li><a href="" title="The History of Tea">History3</a></li>
    						<li><a href="" title="The History of Tea">History4</a></li>
    						<li><a href="" title="The History of Tea">History5</a></li>
    						<li><a href="" title="The History of Tea">History6</a></li>
    						<li><a href="" title="The History of Tea">History7</a></li>
    						<li><a href="" title="The History of Tea">History8</a></li>
    						<li><a href="" title="The History of Tea">History9</a></li>						
    						<li class="mnu_foot"></li>
    					</ul>
    				</li>
    				
    				<li class="top_lvl"><a href="" title="History of Chocolate">About Us</a></li>
    				<li class="top_lvl"><a href="" title="History of Chocolate">Foreign Affiliation</a></li>
    				<li class="top_lvl"><a href="" title="History of Chocolate">Contact Us</a></li>
    				
    				<li class="mnu_foot"></li>
    			</ul>
    	
    	
    	</TD></TR></TABLE>
    </body>
    </html>
    Any help is appreciated. Thanks
  2. #2
  3. The Queen of Typos
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2004
    Location
    Treasure Coast
    Posts
    1,471
    Rep Power
    195
    You should just be able to adjust the width of those elements in your CSS.

IMN logo majestic logo threadwatch logo seochat tools logo