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
    May 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Dropdown Menu help

    Hello..

    Apologies for the simple question!

    I am trying to change some css code for an existing drop-down menu.

    At present the code displays the ul invisible sub menu by appearing directly below the text/href.

    I'd rather the list not all appear below, but be spread out in one line or "row" - in the line directly below the link.

    I'm sure this is easy but not sure where to make this change.

    Thanks

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 594 Times in 593 Posts
    With out code, I guess this:
    Code:
    li
    {
    display:inline;
    }

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello mashtonsmith,
    For a more specific answer, it would really help to see the code you're working with.

    Looking at this example for some ideas may help.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    mashtonsmith (05-21-2012)

  • #4
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry - code follows..

    #navbar {
    color: rgb(0, 145, 171);
    font-size: 16px;
    margin: 18px 24px 24px 24px;
    }
    #navbar ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    #navbar li {
    float: left;
    position: relative;
    margin: 0;
    }
    #navbar ul a {
    text-transform: uppercase;
    height: 32px;
    color: rgb(0, 145, 171);
    line-height: 30px;
    padding-right: 48px;
    text-decoration: none;
    display: block;
    }
    #navbar a:hover {
    color: rgb(84, 84, 84);
    text-decoration: none;
    z-index: 100;
    }
    #navbar ul ul {
    position: absolute;
    left: -6px;
    top: 32px;
    visibility: hidden;
    }
    #navbar ul ul a {
    padding: 5px;
    width: 200px;
    height: auto;
    color: rgb(84, 84, 84);
    text-transform: capitalize;
    line-height: 1.4em;
    z-index: 100;
    background-color:#FFFFFF;
    }
    #navbar ul ul a:hover {
    color: rgb(128, 128, 128);
    z-index: 100;
    }
    #navbar ul li:hover ul {
    visibility: visible;
    }


  •  

    Posting Permissions

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