Sucker tree Menu CSS style problem?

**bennyboysmith** · 12-01-2006, 09:47 AM

Sucker tree Menu
http://www.dynamicdrive.com/style/cs...menu-vertical/

Hi im trying to style the sub menu of this menu but with no luck, ive set up
a sub menu class, SUBMENU and linked to the UL but it doesnt seem to work? im using safari osx? Any help would be great? thanks ben

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{
  text-decoration: none;
 color: black;
 }

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

 .suckerdiv .subfolderstyle a:visited{
  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>

**BLiZZaRD** · 12-01-2006, 10:39 AM

Not too sure, but I think you define the ul classes in the anchors (worked and validated for me):

Code:

<ul>
<li><a id="SUBMENU" href="#nogo">link one</a></li>
etc...

You can try that...

**bennyboysmith** · 12-01-2006, 11:17 AM

thanks for the quick response! its partially worked thanks, just cant cant the background to change when hovered? is it my #SUBMENU? I cant figure it out? thanks again

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

#SUBMENU:link {color: #009900;}
#SUBMENU:visited {color: #999999;}
#SUBMENU:hover {background-color: white;}
#SUBMENU:focus {color: #333333;}
#SUBMENU:active {color: #009900;}

#SUBMENU{
 background-color: red;
 }


 .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{
  text-decoration: none;
 color: black;
 }

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

 .suckerdiv .subfolderstyle a:visited{
  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="SUBMENU" href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a id="SUBMENU" href="#nogo">link one</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  </ul>
</li>
</ul>
</div>

</body>
</html>

**BLiZZaRD** · 12-01-2006, 11:34 AM

not a real expert, but try this:

Code:

#SUBMENU ul li a:hover{
 display: block;
 color: black;
 text-decoration: none;
 background: blue;
 background-color: white;
 padding: 1px 5px;
 border: 1px solid #ccc;
 border-bottom: 0;
 }

In place of the #SUBMENU:hover {background-color: white;} you have now.

I will look closer in a little while, trying to get a work computer drive reformatted and re issued atm.

**bennyboysmith** · 12-01-2006, 11:50 AM

thanks again, but it still dont work? have fun!

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

#SUBMENU:link {color: #009900;}
#SUBMENU:visited {color: #999999;}
#SUBMENU:hover {background: blue;}
#SUBMENU:focus {color: #333333;}
#SUBMENU:active {color: #009900;}

#SUBMENU ul li a:hover{
 display: block;
 color: black;
 text-decoration: none;
 background: blue;
 background-color: blue;
 padding: 1px 5px;
 border: 1px solid #ccc;
 border-bottom: 0;
 }


 .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{
  text-decoration: none;
 color: black;
 }

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

 .suckerdiv .subfolderstyle a:visited{
  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="SUBMENU" href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a id="SUBMENU" href="#nogo">link one</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  </ul>
</li>
</ul>
</div>

</body>
</html>

Thread: Sucker tree Menu CSS style problem?

Thread Tools

Search Thread

Sucker tree Menu CSS style problem?

Bookmarks

Bookmarks

Posting Permissions