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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts

    horizontal menu w/vertical dropdowns

    What I would like my menu to look like:
    - solid border on top and bottom
    - first-level menu items horizontal and centered
    - first-level menu items equally spaced as opposed to same widths
    - second-level menu items vertical and on individual lines

    What my menu actually looks like:
    www.vicesbyproxy.com/staging/exp_menu_vert.html

    What's wrong:
    - border not on top & bottom
    - second level wrapping within the width of the container

    This CSS is much more complex than what I usually do. Any help would be greatly appreciated.

  • #2
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    1) You need to clear the floated <li>s.

    2) Either make those not be floated
    Code:
    li ul li {
      float: none;
    }
    or make them be 100% with of the sublist.
    Code:
    li ul li {
      width: 100%;
    }
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #3
    Regular Coder PremiumBlend's Avatar
    Join Date
    Apr 2006
    Location
    Marion, Iowa
    Posts
    201
    Thanks
    0
    Thanked 13 Times in 13 Posts
    With the second level objects try setting display to block.

    CSS:
    Code:
    UL LI {
      display: block;
    }
    For your top and bottom borders you can use a class.

    CSS:
    Code:
    LI.top {
      border-top: 1px solid #FF0000;
    }
    LI.bottom {
      border-bottom: 1px solid #FF0000;
    }
    HTML:
    Code:
    <LI class="top"><A HREF="boulevard.html">Boulevard</A></LI>
    ...
    <LI class="bottom"><A HREF="teacup.html">Teacups Backsplash</A></LI>
    For example.

    I didn't test either of these, but I'm pretty sure they should do the trick. If I'm wrong, its a step in the right direction.
    Last edited by PremiumBlend; 06-02-2006 at 07:46 AM.
    My Website: DumpsterDoggy


  •  

    Posting Permissions

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