Link to home
Start Free TrialLog in
Avatar of sandshakimi
sandshakimiFlag for United States of America

asked on

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
ASKER CERTIFIED SOLUTION
Avatar of Aaron Feledy
Aaron Feledy
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of sandshakimi

ASKER

I posted below. I'm using the same background image, but it doesn't take.
/* 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;
}
Try adding

.navigation li ul li a {
  background: none;
}