?
Solved

Gradient on drop-down menu?

Posted on 2013-06-21
4
Medium Priority
?
451 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:
Aaron Feledy earned 2000 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:Aaron Feledy
ID: 39270846
Try adding

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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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 …
Please read the paragraph below before following the instructions in the video — there are important caveats in the paragraph that I did not mention in the video. If your PaperPort 12 or PaperPort 14 is failing to start, or crashing, or hanging, …
In a question here at Experts Exchange (https://www.experts-exchange.com/questions/29062564/Adobe-acrobat-reader-DC.html), a member asked how to create a signature in Adobe Acrobat Reader DC (the free Reader product, not the paid, full Acrobat produ…
Suggested Courses

839 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