Solved

Trouble with 3rd-level image-based drop-down css menu

Posted on 2012-04-04
12
298 Views
Last Modified: 2012-06-21
Dear Experts,

I am trying to create an image-based drop-down navigation menu bar with both a secondary drop-down of subcategories and a third level of subcategories. I have the 1st list of subcategories working fine, but I cannot for the life of me figure out how to go one more level. Nothing I try will make that next level appear. I am not very versed in css, so I'm sure my code is seriously lacking in something and/or is really incorrect, but if someone could take a look and help with this, I would very much appreciate it. I am also using a sprite to reference specific coordinates for the different menu elements. I have simplified the actual menu to only contain the one list that I am trying to add the 3rd level subcategories, to hopefully allow someone to focus more easily on the necessary code.

The HTML portion looks like this:

--------------------

<html>
<head>

<link href="css/nav-test.css" rel="stylesheet" type="text/css">

  <div class="ccd-navholder">
    <!-- start dropdown menu -->
    <ul class="ccd-nav">

<li class="menu2"><a href="#" class="tab tab2" title="About"><em>About</em></a>
    <ul>
        <li><a href="ccd.cfm" class="menu2-1" title="About"><em>About</em></a></li>
        <li><a href="philosophy.cfm" class="menu2-2" title="Interior Design Strategy"><em>Philosophy of Interior Design</em></a></li>
        <li><a href="howwework.cfm" class="menu2-3" title="Design Process"><em>How We Work</em></a></li>
        <li class="menu2-sub"><a href="#" class="menu2-4" title="Our Services"><em>Our Services</em></a>
            <ul>
                  <li><a href="services-res.cfm" class="menu2-4-1" title="Residential"><em>Residential</em></a></li>
                  <li><a href="services-com.cfm" class="menu2-4-2" title="Commercial"><em>Commercial</em></a></li>
            </ul>
      </li>
        <li><a href="info.cfm" class="menu2-5" title="More Info"><em>More Info</em></a></li>
    </ul>
</li>

</ul>
    <!-- end dropdown menu -->

</div>

</body>
</html>

--------------------

The css looks like this:

--------------------

.ccd-navholder {
      margin-top: 19px;
      margin-right: -22px;
      float: right;
      width:850px;
      height:20px;
      z-index:999;
}

/* nav styles */

/*** ESSENTIAL STYLES ***/
.ccd-nav, .ccd-nav * {
      margin:0;
      padding:0;
      list-style:none;
}
.ccd-nav {
      line-height:1.0;
}
.ccd-nav ul {
      position:absolute;
      top:-999em;
      width:180px;
}
.ccd-nav ul li,
.ccd-nav li li a {
      width: 100%;
}
.ccd-nav li {
      float:left;
      position:relative;
      z-index:999;
}
.ccd-nav a {
      display:block;
}
.ccd-nav li:hover ul,
.ccd-nav li:focus ul,
ul.ccd-nav li.sfHover ul {
      left:0;
      top:19px;
}
.ccd-nav li:hover li ul,
.ccd-nav li:focus li ul,
.ccd-nav li.sfHover li ul {
      top:-999em;
}
.ccd-nav li li:hover ul,
.ccd-nav li li:focus ul,
ul.ccd-nav li li.sfHover ul {
      left:180px;
      top:-1px;
}
.ccd-nav li li li:hover ul,
.ccd-nav li li li:focus ul,
ul.ccd-nav li li li.sfHover ul {
      left:308px;
      top:-1px;
}
.superfish li:hover ul,
.superfish li:focus ul,
.superfish li li:hover ul {
      top: -999em;
}

.ccd-nav {
      font-size:11px;
      float:left; /* needed for horizontal layout */
}
.ccd-nav a em {
      position:absolute;
      left:-9999em;
}
.ccd-nav .tab {
      height:27px;
}

.ccd-nav li {
      white-space:nowrap;
}

.ccd-nav li li a {
      padding: 12px 0;
      text-indent: 22px;
}

.ccd-nav li li li a {
      padding: 12px 0;
      text-indent: 22px;
}

.ccd-nav li li.lastli {
      border:0;
}

.ccd-nav li li {
      text-align:left;
}

.ccd-nav li  { background-image: url(../img/navbar-sprite.png); background-repeat:no-repeat; background-position: 100px 100px; margin-right:4px; }

      .ccd-nav li.menu2 { width: 144px;      margin-right:-14px;      background-position: -128px      -11px;      }
      .ccd-nav li.menu2:hover, .ccd-nav li.menu2:focus, .ccd-nav li.menu2:active, body.aboutpage .ccd-nav li.menu2 {      background-position: -128px -45px; }

      .ccd-nav li.menu2 ul { width:252px; url(../img/navbar-sprite.png) no-repeat -431px -212px; }
      .ccd-nav li.menu2 li a, .ccd-nav li.menu2 li a:hover, .ccd-nav li.menu2 li a:focus { width:144px; padding:0; background:url(../img/navbar-sprite.png)

no-repeat left -121px; }
      
      .ccd-nav li.menu2 li a.menu2-1 { height:43px; background-position: -128px      -74px;      } .ccd-nav li.menu2 li a.menu2-1:hover, .ccd-nav li.menu2 li

a.menu2-1:focus { background-position: -128px -290px; }
      .ccd-nav li.menu2 li a.menu2-2 { height:43px; background-position: -128px      -127px;      } .ccd-nav li.menu2 li a.menu2-2:hover, .ccd-nav li.menu2 li

a.menu2-2:focus { background-position: -128px -343px; }
      .ccd-nav li.menu2 li a.menu2-3 { height:25px; background-position: -128px      -180px;      } .ccd-nav li.menu2 li a.menu2-3:hover, .ccd-nav li.menu2 li

a.menu2-3:focus { background-position: -128px -396px; }
      .ccd-nav li.menu2 li a.menu2-4 { height:25px; background-position: -277px      -180px;      } .ccd-nav li.menu2 li a.menu2-4:hover, .ccd-nav li.menu2 li

a.menu2-4:focus { background-position: -277px -396px; }
      .ccd-nav li.menu2 li a.menu2-5 { height:44px; background-position: -128px      -215px;      } .ccd-nav li.menu2 li a.menu2-5:hover, .ccd-nav li.menu2 li

a.menu2-5:focus { background-position: -128px -431px; }

            .ccd-nav li.menu2-sub li a.menu2-4 a.menu2-4-1{ height:25px; background-position: -277px -74px;      } .ccd-nav li.menu2-sub li a.menu2-4:hover,

.ccd-nav li.menu2-sub li a.menu2-4-1:focus { background-position: -277px -290px; }
            .ccd-nav li.menu2-sub li a.menu2-4 a.menu2-4-2{ height:26px; background-position: -277px -109px; } .ccd-nav li.menu2-sub li a.menu2-4:hover,

.ccd-nav li.menu2-sub li a.menu2-4-2:focus { background-position: -277px -325px; }
      

.ccd-nav li img.nav-new-badge {
    margin: 0px 0px 0px 8px;
}

--------------------

I'm thinking there is something wrong or lacking in my menu2-sub class, but I just don't know what to try anymore. No errors occur when I test; it just drops down the 1st level subcategories, as it is supposed to, and when hovering over the subcat I want to have 2 more subcats pop up next to it (Our Services), nothing happens, other than the rollover for Our Services. I just don't know how to go about bringing up the "Residential" and "Commercial" subcategories next to it. Again, thank you in advance!
0
Comment
Question by:tam423
  • 7
  • 5
12 Comments
 
LVL 30

Expert Comment

by:LZ1
Comment Utility
Can you post your sprite image?
0
 

Author Comment

by:tam423
Comment Utility
Yes, here it is. If you need anything else, please just ask.
0
 
LVL 30

Expert Comment

by:LZ1
Comment Utility
Nothing posted.
0
 

Author Comment

by:tam423
Comment Utility
I'm sorry; I clicked the Attach File link and thought it would attach the file. Here is a link to it online:

http://carincross.com/newsite/img/navbar-sprite.png
0
 
LVL 30

Assisted Solution

by:LZ1
LZ1 earned 100 total points
Comment Utility
Ok, I see the problem now.  The submenus have no height.  So you have to set a height on the sub menu li's.  I have a test page below:

<html>
<head>
<style type="text/css">
ccd-navholder {margin-top: 19px;margin-right: -22px;float: right;width:850px;height:20px;z-index:999;}

/* nav styles */

/*** ESSENTIAL STYLES ***/
.ccd-nav, .ccd-nav * {margin:0;padding:0;list-style:none;position:relative;}
.ccd-nav {line-height:1.0;}
.ccd-nav ul {position:absolute;top:-999em;width:180px;}
.ccd-nav ul li,
.ccd-nav li li a {width: 100%;}
.ccd-nav li {float:left;position:relative;z-index:999;}
.ccd-nav a {display:block;}
.ccd-nav li:hover ul,
.ccd-nav li:focus ul,
ul.ccd-nav li.sfHover ul {left:0;top:19px;}
.ccd-nav li:hover li ul,
.ccd-nav li:focus li ul,
.ccd-nav li.sfHover li ul {top:-999em;}
.ccd-nav li li:hover ul,
.ccd-nav li li:focus ul,
ul.ccd-nav li li.sfHover ul {left:180px;top:-1px;border:1px solid red;}
.ccd-nav li li li:hover ul,
.ccd-nav li li li:focus ul,
ul.ccd-nav li li li.sfHover ul {left:308px;top:-1px;}
.superfish li:hover ul,
.superfish li:focus ul,
.superfish li li:hover ul {top: -999em;}
.ccd-nav {font-size:11px;float:left; /* needed for horizontal layout */}
.ccd-nav a em {position:absolute;left:-9999em;}
.ccd-nav .tab {height:27px;}
.ccd-nav li {white-space:nowrap;}
.ccd-nav li li a {padding: 12px 0;text-indent: 22px;}
.ccd-nav li li li a {padding: 12px 0;text-indent: 22px;}
.ccd-nav li li.lastli {border:0;}
.ccd-nav li li {text-align:left;}
.ccd-nav li  { background-image: url(http://carincross.com/newsite/img/navbar-sprite.png); background-repeat:no-repeat; background-position: 100px 100px; margin-right:4px; }
.ccd-nav li.menu2 { width: 144px;      margin-right:-14px;      background-position: -128px      -11px;      }
.ccd-nav li.menu2:hover, .ccd-nav li.menu2:focus, .ccd-nav li.menu2:active, body.aboutpage .ccd-nav li.menu2 {      background-position: -128px -45px; }
.ccd-nav li.menu2 ul { width:252px; url(http://carincross.com/newsite/img/navbar-sprite.png) no-repeat -431px -212px; }
.ccd-nav li.menu2 li a, .ccd-nav li.menu2 li a:hover, .ccd-nav li.menu2 li a:focus { width:144px; padding:0; background:url(http://carincross.com/newsite/img/navbar-sprite.png) no-repeat left -121px; height:25px;}
.ccd-nav li.menu2 li a.menu2-1 { height:43px; background-position: -128px      -74px;      } 
.ccd-nav li.menu2 li a.menu2-1:hover, .ccd-nav li.menu2 lia.menu2-1:focus { background-position: -128px -290px; }
.ccd-nav li.menu2 li a.menu2-2 { height:43px; background-position: -128px      -127px;      }
 .ccd-nav li.menu2 li a.menu2-2:hover, .ccd-nav li.menu2 li a.menu2-2:focus { background-position: -128px -343px; }
.ccd-nav li.menu2 li a.menu2-3 { height:25px; background-position: -128px      -180px;      } .ccd-nav li.menu2 li a.menu2-3:hover, .ccd-nav li.menu2 li
a.menu2-3:focus { background-position: -128px -396px; }
.ccd-nav li.menu2 li a.menu2-4 { height:25px; background-position: -277px      -180px;      } .ccd-nav li.menu2 li a.menu2-4:hover, .ccd-nav li.menu2 li
a.menu2-4:focus { background-position: -277px -396px; }
.ccd-nav li.menu2 li a.menu2-5 { height:44px; background-position: -128px      -215px;      } .ccd-nav li.menu2 li a.menu2-5:hover, .ccd-nav li.menu2 li
a.menu2-5:focus { background-position: -128px -431px; }
.ccd-nav li.menu2-sub li a.menu2-4 a.menu2-4-1{ height:25px; background-position: -277px -74px;      } .ccd-nav li.menu2-sub li a.menu2-4:hover,
.ccd-nav li.menu2-sub li a.menu2-4-1:focus { background-position: -277px -290px; }
.ccd-nav li.menu2-sub li a.menu2-4 a.menu2-4-2{ height:26px; background-position: -277px -109px; } .ccd-nav li.menu2-sub li a.menu2-4:hover,
.ccd-nav li.menu2-sub li a.menu2-4-2:focus { background-position: -277px -325px; }
.ccd-nav li img.nav-new-badge {margin: 0px 0px 0px 8px;}
.sf-sub-indicator{display:none;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://users.tpg.com.au/j_birch/plugins/superfish/js/superfish.js" type="text/javascript"></script>
<script> 
 
    $(document).ready(function(){ 
        $("ul.ccd-nav").superfish(); 
    }); 
 
</script>
</head>
<body>
  <div class="ccd-navholder">
    <!-- start dropdown menu -->
    <ul class="ccd-nav">
      <li class="menu2"><a href="#" class="tab tab2" title="About"><em>About</em></a>
      <ul>
        <li><a href="ccd.cfm" class="menu2-1" title="About"><em>About</em></a></li>
        <li><a href="philosophy.cfm" class="menu2-2" title="Interior Design Strategy"><em>Philosophy of Interior Design</em></a></li>
        <li><a href="howwework.cfm" class="menu2-3" title="Design Process"><em>How We Work</em></a></li>
        <li class="menu2-sub">
          <a href="#" class="menu2-4" title="Our Services"><em>Our Services</em></a>
            <ul>
              <li><a href="services-res.cfm" class="menu2-4-1" title="Residential"><em>Residential</em></a></li>
              <li><a href="services-com.cfm" class="menu2-4-2" title="Commercial"><em>Commercial</em></a></li>
            </ul>
      </li>
      <li><a href="info.cfm" class="menu2-5" title="More Info"><em>More Info</em></a></li>
    </ul>
    </li>
    </ul>
    <!-- end dropdown menu -->
  
  </div>

</body>
</html>

Open in new window

0
 

Author Comment

by:tam423
Comment Utility
Thank you so much. I do see something coming up now when hovering, though it is presented as horizontal across from the submenu, rather than vertical, and not the actual subcat text, but rather mostly a blank area, but I think that has to do with the coordinates indicated to isolate what I want in the sprite; I probably need to adjust those. Allow me to spend some time working with what you have done, but I think this brings me very close to my solution. I will post again once I have had a chance to work with it a bit.
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 30

Expert Comment

by:LZ1
Comment Utility
Let me know if you get stuck.
0
 

Author Comment

by:tam423
Comment Utility
Thank you. Perhaps I can ask for a little further assistance. I have it so that I can see that something is coming up vertically, next to the "Our Services" subcategory, but it just isn't referencing the right location within the sprite. What should be coming up alongside that subcategory are the off/on (hover) versions of "Residential" and "Commercial". It looks like only a small portion of the left edge is coming up. I've adjusted the coordinates I had indicated for the menu2-sub class, but nothing I try seems to change the pop-up appearance. According to spritecow.com, the coordinates should be:

Residential (off): -277, -74
Residential (on): -277, -290

Commercial (off): -277, -109
Commercial (on): -277, -325

In the css, I have it as:

.ccd-nav li.menu2-sub li a.menu2-4 a.menu2-4-1{ height:25px; background-position: -277px -74px;      } .ccd-nav li.menu2-sub li a.menu2-4:hover,
.ccd-nav li.menu2-sub li a.menu2-4-1:focus { background-position: -277px -290px; }

.ccd-nav li.menu2-sub li a.menu2-4 a.menu2-4-2{ height:26px; background-position: -277px -109px; } .ccd-nav li.menu2-sub li a.menu2-4:hover,
.ccd-nav li.menu2-sub li a.menu2-4-2:focus { background-position: -277px -325px; }

You can see how it functions at:

http://carincross.com/newsite/carin-test.cfm

I really must be missing something here! Thank you again for any assistance you can provide.
0
 

Author Comment

by:tam423
Comment Utility
LZ1, would you have any further time to help with my above issue - or perhaps someone else? I am just stuck and do not know what to alter in my css to bring up the "Residential" and "Commercial" subcats vertically, alongside "Our Services", when hovering. You can see what comes up now, if you visit the link I provided, above. Or, if I need to clarify anything or provide any additional info, please just let me know!

Thank you!
0
 

Accepted Solution

by:
tam423 earned 0 total points
Comment Utility
While waiting for further assistance, I have managed to work out the problem on my own and am therefore posting my solution and closing this question. I do appreciate the initial assistance that LZ1 provided, and will try to award some of the points to that expert. Below is my updated css for the complete navbar, should it help someone else who may have a similar issue:

.ccd-navholder {
      margin-top: 19px;
      margin-right: -22px;
      float: right;
      width:850px;
      height:20px;
      z-index:999;
}

/*** ESSENTIAL STYLES ***/
.ccd-nav, .ccd-nav * {
      margin:0;
      padding:0;
      list-style:none;
}
.ccd-nav {
      line-height:1.0;
}
.ccd-nav ul {
      position:absolute;
      top:-999em;
      width:144px;
}
.ccd-nav ul li,
.ccd-nav li li a {
      width: 100%;
}
.ccd-nav li {
      float:left;
      position:relative;
      z-index:999;
}
.ccd-nav a {
      display:block;
}
.ccd-nav li:hover ul,
.ccd-nav li:focus ul,
ul.ccd-nav li.sfHover ul {
      left:0;
      top:19px;
}
.ccd-nav li:hover li ul,
.ccd-nav li:focus li ul,
.ccd-nav li.sfHover li ul {
      top:-999em;
}
.ccd-nav li li:hover ul,
.ccd-nav li li:focus ul,
ul.ccd-nav li li.sfHover ul {
      left:144px;
      top:-1px;
}
.ccd-nav li li li:hover ul,
.ccd-nav li li li:focus ul,
ul.ccd-nav li li li.sfHover ul {
      left:308px;
      top:-1px;
}

.superfish li:hover ul,
.superfish li:focus ul,
.superfish li li:hover ul,
.superfish li li li:hover ul {
      top: -999em;
}

.ccd-nav {
      font-size:11px;
      float:left; /* needed for horizontal layout */
}
.ccd-nav a em {
      position:absolute;
      left:-9999em;
}
.ccd-nav .tab {
      height:27px;
}

.ccd-nav li {
      white-space:nowrap;
}

.ccd-nav li li a {
      padding: 12px 0;
      text-indent: 22px;
}

.ccd-nav li li li a {
      padding: 12px 0;
      text-indent: 22px;
      position: relative;
      left: -1px;

}

.ccd-nav li li.lastli {
      border:0;
}


.ccd-nav li li {
      text-align:left;
}

.ccd-nav li  { background-image: url(../img/navbar-sprite.png); background-repeat:no-repeat; background-position: 100px 100px; margin-right:4px; }

      .ccd-nav li.menu1 { width: 74px;            margin-right:28px;       background-position: -8px      -11px;      }
      .ccd-nav li.menu2 { width: 144px;      margin-right:-14px;      background-position: -128px      -11px;      }
      .ccd-nav li.menu3 { width: 141px;       margin-right:28px;      background-position: -277px      -11px;      }
      .ccd-nav li.menu4 { width: 145px;            margin-right:41px;      background-position: -579px      -79px;      }
      .ccd-nav li.menu5 { width: 74px;            margin-right:42px;      background-position: -464px      -11px;      }
      .ccd-nav li.menu6 { width: 123px;            background-position: -600px      -11px;      }

      
      .ccd-nav li.menu1:hover, .ccd-nav li.menu1:focus, .ccd-nav li.menu1:active, body.indexpage .ccd-nav li.menu1 {      background-position: -8px -45px; }
      .ccd-nav li.menu2:hover, .ccd-nav li.menu2:focus, .ccd-nav li.menu2:active, body.aboutpage .ccd-nav li.menu2 {      background-position: -128px -45px; }
      .ccd-nav li.menu3:hover, .ccd-nav li.menu3:focus, .ccd-nav li.menu3:active, body.gallerypage .ccd-nav li.menu3 { background-position: -277px -45px; }
      .ccd-nav li.menu4:hover, .ccd-nav li.menu4:focus, .ccd-nav li.menu4:active, body.fengshuipage .ccd-nav li.menu4 { background-position: -579px -113px; }
      .ccd-nav li.menu5:hover, .ccd-nav li.menu5:focus, .ccd-nav li.menu5:active, body.presspage .ccd-nav li.menu5 {      background-position: -464px -45px; }
      .ccd-nav li.menu6:hover, .ccd-nav li.menu6:focus, .ccd-nav li.menu6:active, body.contactpage .ccd-nav li.menu6 { background-position: -600px -45px; }

      .ccd-nav li.menu2 ul { width:144px; url(../img/navbar-sprite.png) no-repeat -431px -212px; }
      .ccd-nav li.menu2 li a, .ccd-nav li.menu2 li a:hover, .ccd-nav li.menu2 li a:focus { width:144px; padding:0; background:url(../img/navbar-sprite.png) no-repeat left -121px; }

      .ccd-nav li.menu2-sub li a.menu2-4-1 { height:26px; background-position: -426px -179px; } .ccd-nav li.menu2-sub li a.menu2-4-1:hover, .ccd-nav li.menu2-sub li a.menu2-4-1:focus { width:141px; padding:0; background:url(../img/navbar-sprite.png) no-repeat height:26px; background-position: -426px -395px; }
      .ccd-nav li.menu2-sub li a.menu2-4-2 { height:26px; background-position: -426px -215px; } .ccd-nav li.menu2-sub li a.menu2-4-2:hover, .ccd-nav li.menu2-sub li a.menu2-4-2:focus { width:141px; padding:0; background:url(../img/navbar-sprite.png) no-repeat height:26px; background-position: -426px -431px; }
      
      .ccd-nav li.menu2 li a.menu2-1 { height:43px; background-position: -128px      -74px;      } .ccd-nav li.menu2 li a.menu2-1:hover, .ccd-nav li.menu2 li a.menu2-1:focus { background-position: -128px -290px; }
      .ccd-nav li.menu2 li a.menu2-2 { height:43px; background-position: -128px      -127px;      } .ccd-nav li.menu2 li a.menu2-2:hover, .ccd-nav li.menu2 li a.menu2-2:focus { background-position: -128px -343px; }
      .ccd-nav li.menu2 li a.menu2-3 { height:25px; background-position: -128px      -180px;      } .ccd-nav li.menu2 li a.menu2-3:hover, .ccd-nav li.menu2 li a.menu2-3:focus { background-position: -128px -396px; }
      .ccd-nav li.menu2 li a.menu2-4 { height:25px; background-position: -277px      -180px;      } .ccd-nav li.menu2 li a.menu2-4:hover, .ccd-nav li.menu2 li a.menu2-4:focus { background-position: -277px -396px; }

      .ccd-nav li.menu2 li a.menu2-5 { height:44px; background-position: -128px      -215px;      } .ccd-nav li.menu2 li a.menu2-5:hover, .ccd-nav li.menu2 li a.menu2-5:focus { background-position: -128px -431px; }

      .ccd-nav li.menu2-sub li a.menu2-4 ul { width:141px; url(../img/navbar-sprite.png) no-repeat -431px -212px; }
      .ccd-nav li.menu2-sub li a.menu2-4 li a, .ccd-nav li.menu2 li a.menu2-4 li a:hover, .ccd-nav li.menu2 li a.menu2-4 li a:focus { width:141px; padding:0; background:url(../img/navbar-      sprite.png) no-repeat left -121px; }

      .ccd-nav li.menu3 ul { width:252px; url(../img/navbar-sprite.png) no-repeat -431px -212px; }
      .ccd-nav li.menu3 li a, .ccd-nav li.menu3 li a:hover, .ccd-nav li.menu3 li a:focus { width:144px; padding:0; background:url(../img/navbar-sprite.png) no-repeat left -121px; }
      
      .ccd-nav li.menu3 li a.menu3-1 { height:25px; background-position: -277px      -74px;      } .ccd-nav li.menu3 li a.menu3-1:hover, .ccd-nav li.menu2 li a.menu3-1:focus { background-position: -277px -290px; }
      .ccd-nav li.menu3 li a.menu3-2 { height:26px; background-position: -277px      -109px;      } .ccd-nav li.menu3 li a.menu3-2:hover, .ccd-nav li.menu2 li a.menu3-2:focus { background-position: -277px -325px; }
      

.ccd-nav li img.nav-new-badge {
    margin: 0px 0px 0px 8px;
}
0
 
LVL 30

Expert Comment

by:LZ1
Comment Utility
Understand that we do volunteer our time here on EE.  Most of us do have other obligations and are not always able to assist as quickly as some may want.  

I am glad you solved it though.
0
 

Author Closing Comment

by:tam423
Comment Utility
While waiting for further assistance, I worked out the solution on my own. I am not sure why I did not hear from the expert who initially began to assist me, or why no one else responded, but I feel I have no choice but to now close this question.
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now