Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with menu

    Hi
    I have a horizontal menu designed using html and css, but i require a vertical one, is it possible to alter the code to change the menu from horizontal to vertical?

    Below is the code thanks

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Horizontal Drop Down Menus</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!--[if lt IE 7]>
    <script type="text/javascript">
    sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" over";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" over\\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    <![endif]-->

    <style type="text/css">
    body {
    font: x-small Verdana, Arial, Helvetica, sans-serif;
    }
    * html body{
    font-size:xx-small;
    f\ont-size:x-small;
    }
    ul#nav, ul#nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

    ul#nav li {
    position: relative;
    float: left;
    width:149px;
    }

    #nav li ul {
    position: absolute;
    margin-left: -999em; /* hide menu from view */
    top: auto;
    left:0;
    }

    /* Styles for Menu Items */
    ul#nav li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    background-image: url(http://i330.photobucket.com/albums/l...stewie-2.png);
    background: #4BCFFA; /* IE6 Bug */
    padding: 5px;
    border: 1px solid #000000;
    margin-bottom:-1px;
    min-height:0;
    }
    /* commented backslash mac hiding hack \*/
    * html ul#nav li a {height:1%; position:relative;}
    /* end hack */

    /* this sets all hovered lists to blue */
    #nav li:hover a,#nav li.over a,
    #nav li:hover li a:hover,#nav li.over li a:hover {
    color: #fff;
    background-color: blue;}

    /* set dropdown to default */
    #nav li:hover li a,#nav li.over li a {
    color: #777;
    background-color: #ffffcc;
    }
    #nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
    #nav li:hover ul,#nav li.over ul {margin-left:0; } /* show menu*/

    </style>
    </head>
    <body>
    <ul id="nav">
    <

    <li><a href="#">Family Guy</a>
    <ul>
    <li><a href="http://www.megtoonz.com/2009/05/family-guy-season-1.html">Season 1</a></li>
    <li><a href="http://www.megtoonz.com/2009/05/season-2-link-list.html">Season 2</a></li>
    <li><a href="http://www.megtoonz.com/2009/05/family-guy-season-3-link-list.html">Season 3</a></li>
    <li><a href="http://www.megtoonz.com/2009/05/family-guy-season-4-link-list.html">Season 4</a></li>
    <li><a href="http://www.megtoonz.com/2009/05/family-guy-season-5-link-list.html">Season 5</a></li>
    <li><a href="http://www.megtoonz.com/2009/05/family-guy-season-6-link-list.html">Season 6</a></li>
    <li><a href="http://www.megtoonz.com/2009/05/family-guy-season-7-link-list.html">Season 7</a></li>
    </ul>
    </li>
    <li><a href="#">Futurama</a>
    <ul>
    <li><a href="http://www.megtoonz.com/2009/05/futurama-season-1-link-list.html">Season 1</a></li>
    <li><a href="http://www.megtoonz.com/2009/05/futurama-season-2-link-list.html">Season 2</a></li>
    <li><a href="http://www.megtoonz.com/2009/05/futurama-season-3-link-list.html">Season 3</a></li>
    <li><a href="http://www.megtoonz.com/2009/05/futurama-season-4-link-list.html">Season 4</a></li>
    </ul>
    </li>
    <li><a href="#">South Park</a>
    <ul>
    <li><a href="http://www.megtoonz.com/2009/05/south-park-season-1-link-list.html">Season 1</a></li>
    <li><a href="http://www.megtoonz.com/2009/05/south-park-season-2-link-list.html">Season 2</a></li>
    <li><a href="http://www.megtoonz.com/2009/05/south-park-season-3-link-list.html">Season 3</a></li>
    <li><a href="http://www.megtoonz.com/2009/05/south-park-season-4-link-list.html">Season 4</a></li>
    <li><a href="http://www.megtoonz.com/2009/05/south-park-season-5-link-list.html">Season 5</a></li>
    <li><a href="http://www.megtoonz.com/2009/05/south-park-season-6-link-list.html">Season 6</a></li>
    <li><a href="http://www.megtoonz.com/2009/05/south-park-season-7-link-list.html">Season 7</a></li>
    <li><a href="http://www.megtoonz.com/2009/05/south-park-season-8-link-list.html">Season 8</a></li>
    <li><a href="http://www.megtoonz.com/2009/05/south-park-season-9-link-list.html">Season 9</a></li>
    <li><a href="http://www.megtoonz.com/2009/05/south-park-season-10-link-list.html">Season 10</a></li>
    <li><a href="http://www.megtoonz.com/2009/05/south-park-season-11-link-list.html">Season 11</a></li>
    <li><a href="http://www.megtoonz.com/2009/05/south-park-season-12-link-list.html">Season 12</a></li>
    <li><a href="http://www.megtoonz.com/2009/05/south-park-season-13-link-list.html">Season 13</a></li>
    </ul>
    </li>
    </ul>

    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Change this in your css:

    Code:
    ul#nav li {
    position: relative;
    /*float: left;*/
    width:149px;
    }
    
    #nav li ul {
    position: absolute;
    margin-left: -999em; 
    top: 0;
    left:149px;
    }
    and give that a try... You might want to play around with your padding on the submenu as well.

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks, it is now a vertical list but it has lost all background colours and there is a large gap when the sub menu pops out?

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    That sounds like a typo in your css file, maybe a missing closing semi-colon.

    The css validator is good for this sort of thing, otherwise post your code again (use the code tags to make it more readable).


  •  

    Posting Permissions

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