Advanced Search

Results 1 to 1 of 1

Thread: Change menu Headings from Vertical to Horizontal

  1. #1
    Join Date
    Oct 2008
    Posts
    12
    Thanks
    3
    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): 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>
    Last edited by trumpdown; 06-12-2009 at 07:24 PM.

Bookmarks

Posting Permissions

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