Gradient on drop-down menu?

I want to duplicate the gradient background on the drop down menu as seen on this page's menu.

http://www.serve.gov
sandshakimiAsked:
Who is Participating?
 
Aaron FeledyConnect With a Mentor Drupal Developer and ConsultantCommented:
The gradient is an image applied as a background to the ul element using css. I can't be more specific about the css because I don't know the markup for your menu.
0
 
sandshakimiAuthor Commented:
I posted below. I'm using the same background image, but it doesn't take.
0
 
sandshakimiAuthor Commented:
/* navigation */
#region-menu {
  display: none;
  width: 100%;
  margin: 0;
  background: #ffffff;
  border-top: 1px solid #eeeeee;
}

#navigation {
  overflow: hidden;
  position: relative;
  background: #ffffff;
 
}

.navigation ul {
       /*background: #d1d1d1; */
      /*background: -moz-linear-gradient(top, #f2f2f2 0%, #d1d1d1 100%);*/
      /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#d1d1d1));*/
      /*background: -webkit-linear-gradient(top, #f2f2f2 0%,#d1d1d1 100%);*/
      /*background: -o-linear-gradient(top, #f2f2f2 0%,#d1d1d1 100%);*/
      /*background: -ms-linear-gradient(top, #f2f2f2 0%,#d1d1d1 100%);*/
      /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#d1d1d1',GradientType=0 );*/
      /*background: linear-gradient(top, #f2f2f2 0%,#d1d1d1 100%);*/
      /*height: 50px;*/
      position: relative;
      display: block;
      margin: 0;
       background: #ffffff;
       /*background: url(http://128.121.39.37/sites/default/files/ctools/blue-slice-menu.jpg);*/


}
.navigation ul li {
  float: left;
  font-size: 1.15em;
  /*font-size: 1.25em;*/
  font-weight: 700;
  list-style-type: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
  /*margin-left: 20px;*/
  padding-left: 0px;
  position: relative;
  text-transform: uppercase;
  font-family: arial;
  background: #ffffff;
  width: 190px;
}


.navigation li a.active {

  font-size: 1em;

}

li.first.leaf a

{
/*font-size: 1em;*/
}



.navigation li a {
  /*color: #666666;*/
  color: #000000;
  display: block;
  padding: 13px 20px;
  text-align: center;
  text-decoration: none;
  background: #ffffff;
  /*background: #011f35;*/

 
}
.navigation li.active-trail a,
.navigation li a.active,
.navigation li a:hover,
.navigation li a:focus,
.navigation ul li:hover a {
      /*background: #f2f2f2;*/ /* Old browsers */
      /*background: -moz-linear-gradient(top, #f2f2f2 0%, #ececec 100%);*/ /* FF3.6+ */
      /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#ececec));*/ /* Chrome,Safari4+ */
      /*background: -webkit-linear-gradient(top, #f2f2f2 0%,#ececec 100%);*/ /* Chrome10+,Safari5.1+ */
      /*background: -o-linear-gradient(top, #f2f2f2 0%,#ececec 100%);*/ /* Opera11.10+ */
      /*background: -ms-linear-gradient(top, #f2f2f2 0%,#ececec 100%);*/ /* IE10+ */
      /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#ececec',GradientType=0 );*/ /* IE6-9 */
      /*background: linear-gradient(top, #f2f2f2 0%,#ececec 100%);*/ /* W3C */
      /*border-right: 1px solid #FFF;*/
      /*border-left: 1px solid #FFF;*/
      padding-left: 19px;
      padding-right: 19px;
      /*color: #333;*/
       /*color: #ffffff;*/
       /*background: #011f35;*/
       /*background: #ffffff;*/


}

.navigation ul li:hover a {
      padding-left: 19px;
      padding-right: 19px;
      /*color: #333;*/
       color: #ffffff;
       background: #134b76;
       /*background: #ffffff;*/
       



}



/******* Drop-down Navigation ******/

.navigation li ul {
      
      margin: 0;
      padding: 5px;
      width: 200px;
      height: auto;
      position: absolute;
      left: -999em;
      z-index: 1000;

       width: 190px;


       background-image: url(http://128.121.39.37/sites/default/files/ctools/blue-slice-menu.jpg) ;
       background-repeat: repeat-x;

      /*background: #3fa3ca;*/
      
            
}



.navigation ul li:hover > ul {
      display: block;
      left: 0;
       width: 180px;
/*background: url(http://128.121.39.37/sites/default/files/ctools/blue-slice-menu.jpg);*/
      /*background: #3fa3ca;*/


}

.navigation li ul li {
      float: none;
      margin: 0;
      padding: 0;
      text-transform: none;
      font-weight: 400;
      font-size: 12px;
      list-style-image: none;
       width: 180px;
      /*background-color: #3fa3ca;*/
/*background-image: url(http://128.121.39.37/sites/default/files/ctools/blue-slice-menu.jpg);*/


}

.navigation li ul li a,
.navigation li.active-trail ul li a,
.navigation li:hover ul li a {
      text-align: left;
      /*background: url(http://128.121.39.37/sites/default/files/ctools/blue-slice-menu.jpg);*/
      color: #ffffff;
      display: block;
      padding: 9px 16px 9px 16px;
      border: none;
       width: 150px;

}

.navigation li ul li a:hover,
.navigation li.active-trail ul li a.active {
      background: #3fa3ca url(../img/sprite.png) repeat-x 0 -543px;


      color: #FFF;
      padding: 9px 16px 9px 16px;
      border: none;
}
0
 
Aaron FeledyDrupal Developer and ConsultantCommented:
Try adding

.navigation li ul li a {
  background: none;
}
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.