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 Coder
    Join Date
    May 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    multiple menus with divs

    I need to have two menu lists on the same page. One using using float and one absolute. I'm using internal css for my coding but I can't figure out how I can have them both on the page using the same html code. I thought I could use div to contain each list but I'm not sure how to code the css. is there a alt method to do this?

    Here's my codes:

    float:
    .rightBorder {
    border-right:#000000 1px solid;
    }
    ul {
    font-family:Arial, Helvetica, sans-serif;
    font-size:1em;
    margin:0;
    padding:0;
    list-style:none;
    }
    ul li {
    position:relative;
    float:left;
    width:125px;
    border-bottom:#000000 1px solid;
    border-left:#000000 1px solid;
    border-top:#000000 1px solid;
    top:5px;
    background-image:url(assets/bg_menu2.gif);
    text-align:center;
    }
    li ul li {
    border-bottom:#000000 1px solid;
    border-left:#000000 1px solid;
    border-right:#000000 1px solid;
    border-top:0;
    left:-1px;
    }
    li ul {
    position:absolute;
    left:0;
    top:15px;
    display:none;
    }
    ul li a {
    display:block;
    border-bottom:0;
    text-decoration:none;
    }
    li:hover ul {
    display:block;
    }



    Absolute:
    ul {
    font-family:Arial, Helvetica, sans-serif;
    font-size:1em;
    margin:0;
    padding:0;
    list-style:none;
    width:125px;
    border-bottom:1px #000000 solid;
    }
    ul li {
    position:relative;
    background-image:url(assets/bg_menu2.gif)

    }
    li ul {
    position:absolute;
    left:124px;
    top:0;
    display:none;
    }
    ul li a {
    display:block;
    border:1px #000000 solid;
    border-bottom:0;
    text-decoration:none;
    }
    li:hover ul {
    display:block;
    }

    html menu:
    <ul>
    <li>drop down item list1
    <ul>
    <li>link</li>
    <li>link</li>
    <li>link</li>
    </ul>
    </li>

    <li>drop down item list2
    <ul>
    <li>link</li>
    <li>link</li>
    <li>link</li>
    </ul>
    </li>

    <li>drop down item list3
    <ul>
    <li>link</li>
    <li>link</li>
    <li>link</li>
    </ul>
    </li>
    </ul>

    of course the border class is added to the float portion but theres no need to put it in here.

    Any help is appreciated.
    *edit* just making my menu portion more clear
    Last edited by melCarmasin; 05-25-2007 at 09:54 PM.

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    The easiest way for you to solve this would probably be to wrap the menus in two different div elements that are given distinct id attributes.

    Example:
    Code:
    <div id="menu1">
    <ul>
      [...]
    </ul>
    </div>
    
    <div id="menu2">
    <ul>
      [...]
    </ul>
    </div>
    Then modify your CSS to something like this:
    Code:
    #menu1 ul { [...] }
    #menu1 ul li { [...] }
    [...]
    
    #menu2 ul { [...] }
    #menu2 ul li { [...] }
    [...]
    Note: Find better descriptive names for the id attributes.


  •  

    Posting Permissions

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