CSS - Menu Problem

vivabensmith · #1 (**permalink**) 11-30-06, 11:27 AM

Hi Folks! Im using this menu but I cant seem to style the sub menu(pop out to the right)? Please help! Ive tried everything I know!.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">

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

a.column:link {color: #009900;}
a.column:visited {color: #999999;}
a.column:hover {color: white; background-color: green;}
a.column:focus {color: #333333;}
a.column:active {color: #009900;}

 .suckerdiv ul{
 margin: 0;
 padding: 0;
 list-style-type: none;
 width: 150px; /* Width of Menu Items */
 border-bottom: 1px solid #ccc;
 }

 .suckerdiv ul li{
 position: relative;
 }

 /*1st level sub menu style */
 .suckerdiv ul li ul{
 left: 149px; /* Parent menu width - 1*/
 position: absolute;
 width: 160px; /*sub menu width*/
 top: 0;
 display: none;
 }

 /*All subsequent sub menu levels offset */
 .suckerdiv ul li ul li ul{ 
 left: 159px; /* Parent menu width - 1*/
 }

 /* menu links style */
 .suckerdiv ul li a{
 display: block;
 color: black;
 text-decoration: none;
 background: #blue;
 background-color: white;
 padding: 1px 5px;
 border: 1px solid #ccc;
 border-bottom: 0;
 }

 .suckerdiv ul li a:visited{
 background-color: white;
 text-decoration: none;
 color: black;
 }

 .suckerdiv ul li a:hover{
 background-color: red;
 text-decoration: underline;
 }

 .suckerdiv .subfolderstyle a:visited{
 background-color: white;
 text-decoration: none;
 color: black;
 }

 .suckerdiv .subfolderstyle a:hover{
 background-color: red;
 text-decoration: underline;
 }

 .suckerdiv .subfolderstyle{
 background: url(media/arrow-list.gif) no-repeat center right;
 }
 background-color: white;
 }


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

</style>

<script type="text/javascript">

//SuckerTree Vertical Menu 1.1 (Nov 8th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

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

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
		if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
			ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
		else //else if this is a sub level submenu (ul)
		  ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
		for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
		ultags[t].style.visibility="visible"
		ultags[t].style.display="none"
		}
  }
}

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

</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="#">Item 1</a></li>
<li><a class="column" href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>

<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a class="column" 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.1.4</a></li>
    </ul>
  </li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>

</body>
</html>

UnrealEd · #2 (**permalink**) 11-30-06, 11:30 AM

please use [code] wrappers i don't think anyone will read this unless you use those

vivabensmith · #3 (**permalink**) 11-30-06, 11:58 AM

Sorry, hope this is right?

tobyjoiner · #4 (**permalink**) 11-30-06, 12:00 PM

its [ code ] without the spaces at the first and [ /code ] at the end without the spaces

jfulton · #5 (**permalink**) 11-30-06, 12:17 PM

Quote:

Originally Posted by vivabensmith

Hi Folks! Im using this menu but I cant seem to style the sub menu(pop out to the right)? Please help! Ive tried everything I know!.

What do you mean by style? They have style (red on hover, green text, etc.) The only things I see wrong are:

line 47 should either be commented out or it should be background: blue;
delete that bracket on line 78

vivabensmith · #6 (**permalink**) 12-01-06, 03:53 AM

Thanks for the quick reply, I dont see them on safari mac or on a pc ie? I added a submenu class now but it still doesnt work?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">

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

a.column:link {color: #009900;}
a.column:visited {color: #999999;}
a.column:hover {color: white; background-color: green;}
a.column:focus {color: #333333;}
a.column:active {color: #009900;}

.SUBMENU{
 background-color: red;
 }
 
/* menu links style */
 .SUBMENU ul li a{
 display: block;
 color: black;
 text-decoration: none;
 padding: 1px 5px;
 border: 1px solid #ccc;
 border-bottom: 0;
 }

 .SUBMENU ul li a:visited{
 background-color: red;
 text-decoration: none;
 color: black;
 }

 .suckerdiv ul{
 margin: 0;
 padding: 0;
 list-style-type: none;
 width: 150px; /* Width of Menu Items */
 border-bottom: 1px solid #ccc;
 }

 .suckerdiv ul li{
 position: relative;
 }

 /*1st level sub menu style */
 .suckerdiv ul li ul{
 left: 149px; /* Parent menu width - 1*/
 position: absolute;
 width: 160px; /*sub menu width*/
 top: 0;
 display: none;
 }

 /*All subsequent sub menu levels offset */
 .suckerdiv ul li ul li ul{ 
 left: 159px; /* Parent menu width - 1*/
 }

 /* menu links style */
 .suckerdiv ul li a{
 display: block;
 color: black;
 text-decoration: none;
 background: blue;
 background-color: white;
 padding: 1px 5px;
 border: 1px solid #ccc;
 border-bottom: 0;
 }

 .suckerdiv ul li a:visited{
 background-color: white;
 text-decoration: none;
 color: black;
 }

 .suckerdiv ul li a:hover{
 background-color: red;
 text-decoration: underline;
 }

 .suckerdiv .subfolderstyle a:visited{
 background-color: white;
 text-decoration: none;
 color: black;
 }

 .suckerdiv .subfolderstyle a:hover{
 background-color: red;
 text-decoration: underline;
 }

 .suckerdiv .subfolderstyle{
 background: url(media/arrow-list.gif) no-repeat center right;
 
 background-color: white;
 }


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

</style>

<script type="text/javascript">

//SuckerTree Vertical Menu 1.1 (Nov 8th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

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

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
		if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
			ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
		else //else if this is a sub level submenu (ul)
		  ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
		for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
		ultags[t].style.visibility="visible"
		ultags[t].style.display="none"
		}
  }
}

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

</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="#">Item 1</a></li>
<li><a class="column" href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
  <ul class="SUBMENU">
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>

<li><a href="#">Folder 2</a>
  <ul class="SUBMENU">
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a class="SUBMENU" 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.1.4</a></li>
    </ul>
  </li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>

</body>
</html>

jfulton · #7 (**permalink**) 12-01-06, 01:17 PM

Are you sure? Everything still looks fine in IE for me. Win XP, IE 6.

I'm not at my Mac, so can't check out Safari, but all of the documentation for the SuckerTree vertical menu says that it should work in Safari. Nothing in your code really jumps out at me. Does the example work in Safari for you? Try to build off of that again, and see where things go awry.

vivabensmith · #8 (**permalink**) 12-04-06, 04:06 AM

thanks for your help, ive double checked but it still doesnt work on safari? The example works brilliantly. But The sub style doesnt work for example Folder 1, sub style 1.1 doesnt change on rollever and just appears with white bg? I will start from the begining as you said and see what happens, thanks Ben.