SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    get rid of borders on 2nd level of css flyout

    I am using stu nichols css flyout menu.
    I cannot seem to change the borders on the second level only.
    Demo is here:
    http://digitaledgehosting.com/testin...lth/index.html
    code:
    Code:
    .menu2{
    font-family: Tahoma, Helvetica, sans-serif; width:134px; height:120px; position:relative; font-size:11px; margin:0; z-index:100; text-align: center; 
    padding-right: 12px; /*padding outside of menu moves over what's around it*/
    }
    .menu2 ul {
    padding:0; margin:0; list-style-type: none; background:#E3DAD2; width:134px; height:120px;
    }
    .menu2 ul li ul {
    visibility:hidden; position:absolute; height:0; overflow:hidden; top:0; left:65px; /* this to and left is how far from the main manu the sub menus are */
    }
    .menu2 ul li {
    float:left; background:#E3DAD2;
    }
    .menu2 ul li a, .menu2 ul li a:visited {
    display:block; float:left; text-decoration:underline; color:#333;
    width:134px; height:30px; line-height:29px; font-size:11px; border: 2px solid #999; border-collapse:collapse; background:transparent; padding:3px 8px 3px 0px; font-weight: bold;/* this will change the space/ size etc... of each menu item */
    }
    * html .menu2 ul li a, * html .menu2 ul li a:visited {width:100px; w\idth:90px;}
    
    .menu2 table {
    border-collapse:collapse; border:0; margin:0; padding:0; font-size:1em; position:absolute; left:0; top:0;
    }
    
    /* rollover styling */
    
    /* first line for IE7 and non-IE browsers - second line for IE5.5 and IE6 */
    .menu2 ul li:hover a,
    .menu2 ul li a:hover{
    background:#EBEBE3;; color:#333;
    }
    
    .menu2 ul li:hover {position:relative; z-index:90;}
    * html .menu2 ul li a:hover {position:relative; z-index:100;}
    
    /* Rules for second level (flyout) */
    .menu2 ul li:hover ul,
    .menu2 ul li a:hover ul {
    visibility:visible; position:absolute; height:auto; background:#EFECE2; overflow:visible;
    }
    .menu2 ul li:hover ul li a,
    .menu2 ul li a:hover ul li a{
    display:block; background:transparent; color:#333; line-height:13px; padding: 3px; height:auto; text-decoration:underline;
    }
    
    .menu2 ul li:hover ul li:hover a,
    .menu2 ul li a:hover ul li a:hover {
    background:#EFECE2; color:#333;
    }
    .menu2 ul li:hover ul li ul,
    .menu2 ul li a:hover ul li a ul {
    visibility:hidden; position:absolute; height:0; overflow:hidden; top:0; left:85px;
    }
    /* these are for an additional flyout if you want a third level. You can delete from here down if you only have one flyout level. */
    .menu2 ul li:hover ul li:hover ul,
    .menu2 ul li a:hover ul li a:hover ul {
    visibility:visible; position:absolute; height:auto; color:#000; padding:0; border:1px solid #069; list-style-type:none; background:#EFECE2;
    }
    .menu2 ul li:hover ul li:hover ul li a,
    .menu2 ul li a:hover ul li a:hover ul li a {
    display:block; background:transparent; color:#333;
    }
    
    .menu2 ul li:hover ul li:hover ul li:hover a,
    .menu2 ul li a:hover ul li a:hover ul li a:hover {
    background:#EFECE2; color:#333;
    }
    Thanks! Any help is appreciated.

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I cannot seem to change the borders on the second level only.
    They are being inherited from the 1st level, that's why you can't find them in the 2nd level rules.

    You can change the colors or remove them completely by adding them in the 2nd level rules.

    I have added them below in blue and red, I have put red on the hover just as an example. ( you don't need it there)

    You can change the colors or just put border:0; for no borders at all.

    Be sure to scroll the code box below to the right to see all the changes.
    Code:
    /* Rules for second level (flyout) */
    .menu2 ul li:hover ul,
    .menu2 ul li a:hover ul {
    visibility:visible; position:absolute; height:auto; background:#EFECE2; overflow:visible;
    }
    .menu2 ul li:hover ul li a,
    .menu2 ul li a:hover ul li a{
    display:block; background:transparent; color:#333; line-height:13px; padding: 3px; height:auto; text-decoration:underline;border:2px solid blue;
    }
    
    .menu2 ul li:hover ul li:hover a,
    .menu2 ul li a:hover ul li a:hover {
    background:#EFECE2; color:#333;border:2px solid red;
    }
    .menu2 ul li:hover ul li ul,
    .menu2 ul li a:hover ul li a ul {
    visibility:hidden; position:absolute; height:0; overflow:hidden; top:0; left:85px;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I thought I tried that, but I must have put it in the wrong spot or something. Bedtime!


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
  •