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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css menu problem

    I am using following css and javascript to develop an drop down menu. Each drop down menu has just one background image set as background for the <ul> list tag. The links on the menu is written on top of the image. My problem is with the following code I can use only upto 5 or 6 buttons, but my menu systems has 8 major buttons at the top. I have to use menu for all the buttons which should be aligned horizontally at the top. Any suggestions on where I going wrong would be great.

    <style type="text/css">



    ul {
    list-style: none;
    padding: 0;
    margin: 1;
    }

    #nav a {
    font-weight: bold;

    }

    #nav a {
    text-decoration: none;
    }

    #nav li li a {
    display: block;
    font-family: Arial, Helvetica;
    font-size:12px;
    color: white;

    }

    #nav li li a:hover {


    }

    li {
    float: left;
    position: relative;
    width: 10em;
    text-align: left;
    cursor: default;

    background-color: white;

    }

    li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    font-weight: normal;
    font-size:10px;
    padding-left:10px;
    width:196px;
    height:219px;


    }

    li>ul {
    top:auto;
    left: auto;
    }

    li li {
    display: block;
    float: none;
    background-color: transparent;
    border: 0;
    }

    li:hover ul, li.over ul {
    display: block;
    }

    hr {
    display: none;
    }


    </style>

    <script type="text/javascript"><!--//--><![CDATA[//><!--

    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
    }
    node.onmouseout=function() {
    this.className=this.className.replace(" over", "");
    }
    }
    }
    }
    }
    window.onload=startList;

    //--><!]]></script>



    </HEAD>
    <BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 style=" width:1024; height:728 ">


    <div id="content">

    <ul id="nav">

    <li id="first" style="left:25px; width:160px">
    <div><a href=""><img src='images/button1.gif' border="0" /></a></div>
    <ul style="background: url(images/button1_background.gif) no-repeat; ">

    <li><a href="">Link1</a></li>
    <li><a href="">Link2</a></li>
    <li><a href="">Link3</a></li>
    <li><a href="">Link4</a></li>

    </ul>
    </li>

    <li style="left:-28px; width:160px; ">
    <div style=""><a href=""><img src="images/button2.gif" border="0"/></a></div>
    <ul style="background: url(images/button2_background.gif) no-repeat;">
    <li><a href="">Link1</a></li>
    <li><a href="">Link2</a></li>
    <li><a href="">Link3</a></li>
    <li><a href="">Link4</a></li>

    </ul>
    </li>

    <li id="last" style="left:-90px; width:160px; ">
    <div><a href=""><img src="images/button3.gif" border="0" /></a></div>
    <ul style="background: url(images/button3_background.gif) no-repeat; ">
    <li><a href="">Link1</a></li>
    <li><a href="">Link2</a></li>
    <li><a href="">Link3</a></li>
    <li><a href="">Link4</a></li>

    </ul>
    </li>
    .
    .
    .
    .
    .

    </ul>

    </div>

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Have you got a link to the page?

    It sounds as though you have an image of a set height and that the length of your menu becomes longer than the image if you have more than the 5 items in it. But I can't be sure without seeing it.



    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

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