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 2012
    Posts
    19
    Thanks
    7
    Thanked 0 Times in 0 Posts

    horizontal navigation menu

    Hello
    I was looking for a multilevel horizontal navigation bar and I found a website that had some css code that I used. I am really liking the navigation menu, it seems to work in all browsers. there is only one problem that I am hoping I could get some help with.

    because there are a lot of items in the menu, the menu ends up going to the next line, so right now, the menu takes up 2 lines. However, there is a lot of unused space to the left and right of the menu in the first line. I want to make the menu longer so it takes up only one line.

    Here is a picture that I made to explain what I mean:
    http://i.imgur.com/hclyuYw.png

    and here is the css code that I have:
    Code:
    #suckerfishnav {
        background:#ffffff;
        font-size:12px;
        font-family:verdana,sans-serif;
       
        width:100%;
        }
    #suckerfishnav, #suckerfishnav ul {
        float:left;
        list-style:none;
        line-height:20px;
        padding:0;
        border:1px solid #aaa;
        margin:0;
        width:100%;
        }
    #suckerfishnav a {
        display:block;
        color:#000000;
        text-decoration:none;
        padding:0px 10px;
        }
    #suckerfishnav li {
        z-index:999;
        position: relative;
        float:left;
        padding:0;
        }
    #suckerfishnav ul {
        position:absolute;
        left:-999em;
        height:auto;
        width:101px;
        font-weight:normal;
        margin:0;
        line-height:1;
        border:0;
        border-top:1px solid #666666;
        }
    #suckerfishnav li li {
        width:99px;
        border-bottom:1px solid #666666;
        border-left:1px solid #666666;
        border-right:1px solid #666666;
       
        font-family:verdana,sans-serif;
        }
    #suckerfishnav li li a {
        padding:4px 10px;
        width:80px;
        font-size:11px;
        color:#000000;
        }
    #suckerfishnav li ul ul {
        margin:-20px 0 0 100px;
        }
    #suckerfishnav li li:hover {
        background:#ffffff;
        }
    #suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
        color:#FFDB00;
        }
    #suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
        color:#FFDB00;
        }
    #suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
        color:#000000;
        }
    #suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
        left:-999em;
        }
    #suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
        left:auto;
        background:#ffffff;
        }
    #suckerfishnav li:hover, #suckerfishnav li.sfhover {
        background:#ffffff;
        }
    do you know how I can make the menu longer?

  • #2
    New Coder
    Join Date
    Mar 2013
    Posts
    63
    Thanks
    2
    Thanked 2 Times in 2 Posts
    can you post the said website?

    it could be margins or padding that are spacing you links too far apart.


  •  

    Posting Permissions

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