View Full Version : Change menu Headings from Vertical to Horizontal

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.



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">

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

<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


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


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

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

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


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