trumpdown
06-10-2009, 08:46 PM
1) Script Title: Chrome CSS Drop Down Menu v 2.5
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm
3) Describe problem:
Hello. Can someone help me fix this drop-down menu. The menu headings are vertical and I want to make them horizontal. Everything else works fine just need to change the appearance. I'm probably 10 hours in and have spent quite a bit of time already looking thru old threads but to no avail.
Regards,
trumpdown
Also below is the code. (hope I formatted properly)
<!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/ */
.chromestyle {
float: left; /*The floats the entire menu to the right, you can remove this when you place it on your site*/
}
.chromestyle ul {
margin: 0;
padding: 0;
list-style-type: none;
font: 12px Verdana;
width: 115px; /* Main Menu Item widths */
border-bottom: 0px solid #000000;
text-align: center;
}
.chromestyle ul li {
position: relative;
}
/* Top level menu links style */
.chromestyle ul li a {
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-top: 0px solid #000000;
border-left: 0px solid #000000;
}
.chromestyle ul li a:link, .chromestyle ul li a:visited, .chromestyle ul li a:active {
background-color: #999999; /*background of tabs (default state)*/
}
.chromestyle ul li a:visited {
color: white;
}
.chromestyle ul li a:hover {
background-color: #2D2E30;
}
/*Sub level menu items */
.chromestyle ul li ul {
position: absolute;
width: 140px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}
.chromestyle a.subfolderstyle {
background: url(right.gif) no-repeat 3% 50%;
}
/* Holly Hack for IE \*/
* html .chromestyle ul li {
float: top;
height: 1%;
}
* html .chromestyle ul li a {
height: 1%;
}
/* End */
</style>
<script type="text/javascript">
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["chromestyle1"] //
function initchromestyle(){
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", initchromestyle, false)
else if (window.attachEvent)
window.attachEvent("onload", initchromestyle)
</script>
</head>
<body>
<div class="chromestyle">
<ul id="chromestyle1">
<li><a href="#">about</a>
<ul><li><a href="/gerald.html">gerald</a></li>
<a href="/philosophy.html">philosophy</a></li>
<a href="/staff.html">staff</a></li>
<a href="/workshop.html">workshop</a></li>
</a></li></ul>
<li><a href="#">services</a>
<ul><li><a href="/hair.html">hair</a></li>
<a href="/colour.html">colour</a></li>
<a href="/nails.html">nails</a></li>
<a href="/skincare.html">skin care</a></li>
</a></li> </ul>
<li><a href="#">products</a>
<ul><li><a href="/productlines.html">product lines</a></li>
<a href="/promotions.html">promotions</a></li>
<a href="/giftcertificates.html">gift certificates</a></li>
</a></li></ul>
<li><a href="#">career</a>
<ul><li><a href="/proseminars.html">pro seminars</a></li>
<a href="/busconsulting.html">bus. consulting</a></li>
<a href="/application.html">application</a></li>
<a href="/apprenticeprogram.html">apprentice program</a></li>
</a></li> </ul>
<li><a href="#">contact</a>
<ul><li><a href="/information.html">information</a></li>
<a href="/receiveemails.html">receive our emails</a></li>
</a></li>
</ul>
</div>
</body>
</html>
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm
3) Describe problem:
Hello. Can someone help me fix this drop-down menu. The menu headings are vertical and I want to make them horizontal. Everything else works fine just need to change the appearance. I'm probably 10 hours in and have spent quite a bit of time already looking thru old threads but to no avail.
Regards,
trumpdown
Also below is the code. (hope I formatted properly)
<!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/ */
.chromestyle {
float: left; /*The floats the entire menu to the right, you can remove this when you place it on your site*/
}
.chromestyle ul {
margin: 0;
padding: 0;
list-style-type: none;
font: 12px Verdana;
width: 115px; /* Main Menu Item widths */
border-bottom: 0px solid #000000;
text-align: center;
}
.chromestyle ul li {
position: relative;
}
/* Top level menu links style */
.chromestyle ul li a {
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-top: 0px solid #000000;
border-left: 0px solid #000000;
}
.chromestyle ul li a:link, .chromestyle ul li a:visited, .chromestyle ul li a:active {
background-color: #999999; /*background of tabs (default state)*/
}
.chromestyle ul li a:visited {
color: white;
}
.chromestyle ul li a:hover {
background-color: #2D2E30;
}
/*Sub level menu items */
.chromestyle ul li ul {
position: absolute;
width: 140px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}
.chromestyle a.subfolderstyle {
background: url(right.gif) no-repeat 3% 50%;
}
/* Holly Hack for IE \*/
* html .chromestyle ul li {
float: top;
height: 1%;
}
* html .chromestyle ul li a {
height: 1%;
}
/* End */
</style>
<script type="text/javascript">
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["chromestyle1"] //
function initchromestyle(){
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", initchromestyle, false)
else if (window.attachEvent)
window.attachEvent("onload", initchromestyle)
</script>
</head>
<body>
<div class="chromestyle">
<ul id="chromestyle1">
<li><a href="#">about</a>
<ul><li><a href="/gerald.html">gerald</a></li>
<a href="/philosophy.html">philosophy</a></li>
<a href="/staff.html">staff</a></li>
<a href="/workshop.html">workshop</a></li>
</a></li></ul>
<li><a href="#">services</a>
<ul><li><a href="/hair.html">hair</a></li>
<a href="/colour.html">colour</a></li>
<a href="/nails.html">nails</a></li>
<a href="/skincare.html">skin care</a></li>
</a></li> </ul>
<li><a href="#">products</a>
<ul><li><a href="/productlines.html">product lines</a></li>
<a href="/promotions.html">promotions</a></li>
<a href="/giftcertificates.html">gift certificates</a></li>
</a></li></ul>
<li><a href="#">career</a>
<ul><li><a href="/proseminars.html">pro seminars</a></li>
<a href="/busconsulting.html">bus. consulting</a></li>
<a href="/application.html">application</a></li>
<a href="/apprenticeprogram.html">apprentice program</a></li>
</a></li> </ul>
<li><a href="#">contact</a>
<ul><li><a href="/information.html">information</a></li>
<a href="/receiveemails.html">receive our emails</a></li>
</a></li>
</ul>
</div>
</body>
</html>