Results 1 to 1 of 1

Thread: Change menu Headings from Vertical to Horizontal

  1. #1
    Join Date
    Oct 2008
    Thanked 0 Times in 0 Posts

    Unhappy Change menu Headings from Vertical to Horizontal

    1) Script Title: Chrome CSS Drop Down Menu v 2.5

    2) Script URL (on DD):
    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" "">
    <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: */
    .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:
    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][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> 
    Last edited by trumpdown; 06-12-2009 at 07:24 PM.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts