SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    submenu on two lines

    I have to realize a menu like atached, but I'm here.
    1 question.
    The item in the main menu have width:auto but with fixed (in px) margin right/left; the submenu need to have the same width of the relative item of the main, but width:inherit and width:auto don't work.

    2 question.
    if the text in the submenu is too long it needs to be wrapped on a second line, but with a layout like the attached file; now with text-indent it don't works good.

    Have you some suggestion?
    Can someone show me alternative method?
    Last edited by Paul O'B; Mar 20, 2011 at 10:11.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You should just be able to set the nested ul to width:100%.

    Code:
    .art-menu li ul{width:100%;}
    .art-nav .art-menu li ul a{text-indent:0;padding:0 0 0 10px}

  3. #3
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    GREAT!!!
    Thank you very very very much!!!

    About the second question: it's possible to have the wrapped text-line with a line-height more small then the not-wrapped text-line (see the "rassegna stampa" and "photo gallery" items in the attached file?

    Thanks anyway, I wish you a good day.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I can't open that pdf it says its corrupt so I have removed it. You can now try uploading a new one if necessary.

    If you are referring to the line-height in the submenu items then just cancel them out and use padding instead.

    e.g.

    Code:
    .art-nav .art-menu li ul a{
    text-indent:0;
    padding:5px 0 5px 10px!important;
    line-height:normal;
    }

  5. #5
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Problem solved with padding-top/bottom.
    Thanks Paul.


Bookmarks

Posting Permissions

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