#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    1
    Rep Power
    0

    Side Category Screwing Up


    Alright I'm going cross eyed trying to figure this out. On our website we have two menus, a top navigation menu and a side bar. If you look at the top nav it is working great (white background with a red hover). However the side menu is giving me hell. The blocks don't stretch all the way across the categories panel, the categories that have sub categories appear with a blue tint when I hover over them. Which makes no sense because I didn't code that color in there. What's going on?
    Here's the website with the side category list showing:
    http://foldingtables.mybigcommerce.com/folding-tables/

    Code:
    /* Side Category List */
     
    .Left #SideCategoryList li ul {
      border-top: 1px solid #ddd;
      background-color: #7a0808;
     
    }
     
    /* == Side Category Popout == */
     
    #SideCouponCodeBox .Textbox,
    #SideCouponCodeBox .button,
    #SideGiftCertificateCodeBox .Textbox,
    #SideGiftCertificateCodeBox .button {
      float: left;
    }
    #SideCouponCodeBox .CouponCode,
    #SideGiftCertificateCodeBox form {
      overflow: hidden;
    }
     
    #SideCouponCodeBox .button,
    #SideGiftCertificateCodeBox .button {
      margin-left: 5px;
    }
     
    #SideCatPopOut {
      position: relative;
      z-index: 69;
    }
     
    /* resets */
     
    .Left #SideCategoryList #SideCatPopOut.SideCategoryListClassic li ul {
      padding-left: 0;
    }
     
    .Left #SideCategoryList #SideCatPopOut.SideCategoryListClassic li {
      padding: 0;
    }
     
    .Left #SideCategoryList #SideCatPopOut.SideCategoryListClassic li ul {
      border: none;
    }
    /* --/-- */
     
    #SideCatPopOut ul li {
      position: relative;
    }
     
    #SideCatPopOut ul li a {
      padding-top: 3px;
      padding-bottom:3px;
      position: relative;
      border-bottom:1px solid #242323;
      border-top:1px solid #3e3d3d;
     
     
    }
     
    #SideCatPopOut ul li a .caret {
      display: inline-block;
      width: 0;
      height: 0;
      position: absolute;
      right: 8px;
      top: 8px;
      text-indent: -99999px;
      *text-indent: 0;
      vertical-align: top;
      border-top: 3px solid transparent;
      border-left: 4px solid #fff;
      border-bottom: 3px solid transparent;
      opacity: 0.9;
      filter: alpha(opacity=90);
      content: "\2193";
     
     
    }
     
    #SideCatPopOut > ul > li > a:hover > .caret,
    #SideCatPopOut > ul > li.dropdown.open > a > .caret {
      opacity: 1;
      filter: alpha(opacity=100);
     
     
    }
     
    #SideCatPopOut > ul > li:hover ul {
      display:block;
     
    }
     
     
    /* popout styles */
    #SideCatPopOut ul li ul {
      position: absolute;
      top: -3px;
      left: 209px;
      z-index: 1000;
      float: left;
      display: none;
      width: 250px;
      padding: 4px 0;
      margin: 0;
      list-style: none;
      background-color: #ffffff;
      border: 1px solid #ccc!important;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      -webkit-background-clip: padding-box;
      -moz-background-clip: padding;
      background-clip: padding-box;
      *border-right-width: 2px;
      *border-bottom-width: 2px;
     
     
    }
     
    #SideCatPopOut ul li ul:before {
      content: '';
      display: inline-block;
      border-top: 7px solid transparent;
      border-right: 7px solid #ccc;
      border-bottom: 7px solid transparent;
      position: absolute;
      top: 7px;
      left: -7px;
     
     
    }
     
    #SideCatPopOut ul li ul:after {
      content: '';
      display: inline-block;
      border-top: 6px solid transparent;
      border-right: 6px solid #fff;
      border-bottom: 6px solid transparent;
      position: absolute;
      top: 8px;
      left: -6px;
     
     
    }
     
    #SideCatPopOut ul li ul li {
      margin: 0px 3px;
     
     
    }
     
    #SideCatPopOut ul li:hover,
    #SideCatPopOut ul .dropdown.open {
    *z-index: 1000;
     
     
    }
     
    #SideCatPopOut ul li a:active,
    #SideCatPopOut .dropdown-toggle:active,
    #SideCatPopOut .open .dropdown-toggle {
      outline: 0;
     
    }
     
    /* Uncomment and remove js in scripts.js if you desire non touch/mobile friendly hover dropdown 
    #SideCatPopOut ul li:hover > ul { display: block; } */
    #SideCatPopOut ul .dropdown.open > .dropdown-menu {
      display: block;
    }
     
    #SideCatPopOut li li a {
      display: block;
      padding: 3px 15px;
      clear: both;
      font-weight: normal;
      text-decoration: none;
      color: #555555;
      white-space: nowrap;
      border:0;
    }
     
    #SideCatPopOut ul li ul a:hover {
      color: #FEE24B;
    background-color: #7a0808;
     
    }
     
    /* 2nd level and below drop down styles */
    #SideCatPopOut ul li ul li ul {
      left: 155px;
    }
     
    #SideCatPopOut ul li ul li > a:hover > .caret {
      border-left: 4px solid #fff;
    }
     
    #SideCatPopOut ul li ul li.dropdown.open > a > .caret {
      opacity: 1;
      filter: alpha(opacity=100);
    }
     
    /* End Side Category PopOut */
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    310
    Rep Power
    162
    Hello,

    The blocks don't stretch all the way across the categories panel because the li width is set to 210px, while the links inside are set to only 175px wide. There's more sizing issues there but changing the links inside the li to 210px solves the visual problem.

    The light blue tint is coming from madstyles.css line 998:
    Code:
    .Left ul li a:hover, .Right ul li a:hover {
        color: #CCCCCC;
        text-decoration: none;
    }
    ..and once disabled you have a darker blue tint coming from blue.css line 101:

    Code:
    .Left li a:hover {
        color: #07599A;
    }
    I hope this helps you tracking down the issues you're having.
    Quality European Web Hosting - LDHosting.com
    High Quality, Low Cost Web Hosting Services
    www.ldhosting.com

IMN logo majestic logo threadwatch logo seochat tools logo