Change menu Headings from Vertical to Horizontal

**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/dynamici...rome/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)

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

Thread: Change menu Headings from Vertical to Horizontal

Thread Tools

Search Thread

Change menu Headings from Vertical to Horizontal

Bookmarks

Bookmarks

Posting Permissions