Chrome CSS Drop Down Menu problem

**TitanJeff** · 03-27-2009, 07:14 PM

I've been using this great script now on a few site and it's worked beautifully. Now, I have a client wanting to have the menu run down vertically on the right of her index page. I have played with it and have it running fine vertically but am having trouble with the sub-menus popping up to the left instead of the right.

My page is here:
http://omorefashion.com/fashionmenu.shtml

Any suggestions appreciated.

**Nile** · 03-27-2009, 07:27 PM

Try this instead.

To keep things orgainized ask in the correct section please. In this case the correct section is DD Script Help. A moderator will hopefully move it for you

**TitanJeff** · 03-27-2009, 07:32 PM

Originally Posted by Nile

Try this instead.

To keep things orgainized ask in the correct section please. In this case the correct section is DD Script Help. A moderator will hopefully move it for you

Thanks for this. I wish I'd posted here about two hours ago.

My bad on the wrong section.

**TitanJeff** · 03-27-2009, 07:57 PM

If I could bother you for another tip. I got this working well EXCEPT I can't find a way for it to open to the submenus to the left instead of the right.

**Snookerman** · 03-27-2009, 08:25 PM

Here you go:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.sidebarmenu {
	float: right; /*The floats the entire menu to the right, you can remove this when you place it on your site*/
}
.sidebarmenu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font: bold 13px Verdana;
	width: 180px; /* Main Menu Item widths */
	border-bottom: 1px solid #ccc;
	text-align: right;
}
.sidebarmenu ul li {
	position: relative;
}
/* Top level menu links style */
.sidebarmenu ul li a {
	display: block;
	overflow: auto; /*force hasLayout in IE7 */
	color: white;
	text-decoration: none;
	padding: 6px;
	border-bottom: 1px solid #778;
	border-right: 1px solid #778;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active {
	background-color: #012D58; /*background of tabs (default state)*/
}
.sidebarmenu ul li a:visited {
	color: white;
}
.sidebarmenu ul li a:hover {
	background-color: black;
}
/*Sub level menu items */
.sidebarmenu ul li ul {
	position: absolute;
	width: 170px; /*Sub Menu Items width */
	top: 0;
	visibility: hidden;
}
.sidebarmenu a.subfolderstyle {
	background: url(right.gif) no-repeat 3% 50%;
}
/* Holly Hack for IE \*/
* html .sidebarmenu ul li {
	float: left;
	height: 1%;
}
* html .sidebarmenu ul li a {
	height: 1%;
}
/* End */
</style>
<script type="text/javascript">

//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
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.right=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.right=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", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

</script>
</head>
<body>
<div class="sidebarmenu">
	<ul id="sidebarmenu1">
		<li><a href="#">Item 1</a></li>
		<li><a 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 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>

All you need to do is change the arrow image to one that points to the left.

Good luck!

Thread: Chrome CSS Drop Down Menu problem

Thread Tools

Search Thread

Chrome CSS Drop Down Menu problem

The Following User Says Thank You to Nile For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions