Solved

Gradient on drop-down menu?

Posted on 2013-06-21
4
425 Views
Last Modified: 2013-07-09
I want to duplicate the gradient background on the drop down menu as seen on this page's menu.

http://www.serve.gov
0
Comment
Question by:sandshakimi
  • 2
  • 2
4 Comments
 
LVL 13

Accepted Solution

by:
Arrow_1 earned 500 total points
ID: 39266066
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
 

Author Comment

by:sandshakimi
ID: 39268354
I posted below. I'm using the same background image, but it doesn't take.
0
 

Author Comment

by:sandshakimi
ID: 39268355
/* 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
 
LVL 13

Expert Comment

by:Arrow_1
ID: 39270846
Try adding

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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article is for those that are having major problems with users upload files such as pictures to their profile. The solution is simple and has to do with correcting the directory paths. With some experimenting and testing i got it fixed. Note…
RTL (right to left) web applications aiming for audiences speaking languages like Hebrew or Arabic, are generally more complicated than the same applications aiming for audiences speaking Latin based languages. The main difference lies of course …
This Micro Tutorial hows how you can integrate  Mac OSX to a Windows Active Directory Domain. Apple has made it easy to allow users to bind their macs to a windows domain with relative ease. The following video show how to bind OSX Mavericks to …
Along with being a a promotional video for my three-day Annielytics Dashboard Seminor, this Micro Tutorial is an intro to Google Analytics API data.

920 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

15 Experts available now in Live!

Get 1:1 Help Now