1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Sub menu too narrow

Discussion in 'CSS' started by dona70, Mar 5, 2016.

  1. #1
    I can't get the submenu wide enough.
    The site:

    http://toivalanurheilijat.fi/uusi/

    I tried to change padding into this css:
    SEMrush
    #main-nav li ul li {
    background-color: rgb(48, 48, 48);
    display: block;
    float: none;
    min-height: 26px;
    padding: 10px 10px 50px 20px;
    position: relative;
    width: 121px;

    The link texts go into two row, but I want sub menu so wide, that link text fits into one row.
    I hope you understand, what I mean :)
     
    dona70, Mar 5, 2016 IP
    SEMrush
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Use the following for #main-nav li ul and #main-nav li ul li:
    
    #main-nav li ul {
    left: 0;
    line-height: 1.2em;
    position: absolute;
    top: 100%;
    visibility: hidden;
    width: auto;
    }
    #main-nav li ul li {
    background-color: rgb(48, 48, 48);
    display: block;
    float: none;
    min-height: 26px;
    padding: 10px 10px 50px 20px;
    position: relative;
    }
    
    Code (markup):
     
    PoPSiCLe, Mar 5, 2016 IP
  3. dona70

    dona70 Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Thanks very much, it worked.
     
    dona70, Mar 6, 2016 IP
  4. dona70

    dona70 Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    Another problem: when I click third link from the left in the main menu (Joukkueet), there is sub menus, for example 03-04 pojat. Why it's in two row, but for example 02 pojat is in one row?
    Here below is whole css for the main-nav

    #main-nav {
        background-color: rgb(40, 135, 184);
        min-height: 76px;
    }
    
    #main-nav > ul {
        margin: 0 auto;
        width: 980px;
    }
    
    #main-nav > ul > li {
        display: block;
        float: left;
        font-size: 14.4px; /*0.9em 14.4px*/
        line-height: 1.2em;
        max-width: 980px;
        min-height: 16px;
        padding: 20px 20px 20px 20px;
        position: relative;
        word-spacing: -1px; /*-0.05em -1px*/
        z-index: 1;
    }
    
    #main-nav li.has-sub-items {
        margin-right: 0;
        padding-right: 39px;
    }
    
    #main-nav li:hover {
        background: rgb(48, 48, 48);
    }
    
    #main-nav > ul > .has-sub-items {
        padding-left: 21px;
        padding-right: 38px;
    }
    
    #main-nav > ul > .has-sub-items:hover {
        background: rgb(48, 48, 48) url(images/arrow_down.png) no-repeat right top;
    }
    
    #main-nav li ul {
        left: 0;
        line-height: 1.2em; /*1.2em 17.28px*/
        position: absolute;
        top: 100%;
        visibility: hidden;
      width: auto;
    }
    
    #main-nav li ul li {
        background-color: rgb(48, 48, 48);
        display: block;
        float: none;
        min-height: 26px;
        padding: 10px 20px 10px 20px;
        position: relative;
    }
    
    #main-nav li:hover > ul {
        visibility: visible;
    }
      
    #main-nav li ul li:hover  {
        background: rgb(40,135,184);
    }
    
    #main-nav li ul .has-sub-items  {
        padding-right: 35px;
        background: rgb(48,48,48) url(images/arrow_right.png) no-repeat right center;
    }
    
    #main-nav li ul .has-sub-items:hover  {
        background: rgb(24,24,24) url(images/arrow_right.png) no-repeat right center;
    }
    
    #main-nav a {
        color: rgb(255, 255, 255);
        text-decoration: none;
    }
    Code (markup):
     
    dona70, Mar 7, 2016 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,486
    Likes Received:
    367
    Best Answers:
    28
    Trophy Points:
    335
    #5
    You might also try adding {white-space: nowrap}, like so:
    #main-nav li ul li {
        ...
        white-space: nowrap;}
    Code (markup):
    cheers,

    gary
     
    kk5st, Mar 7, 2016 IP
  6. dona70

    dona70 Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #6
    Thank you very much for a quick answer. It worked. Now it's like it should be :)
     
    dona70, Mar 7, 2016 IP