Solved

Gradient on drop-down menu?

Posted on 2013-06-21
4
432 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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 …
Established in 1997, Technology Architects has become one of the most reputable technology solutions companies in the country. TA have been providing businesses with cost effective state-of-the-art solutions and unparalleled service that is designed…
I've attached the XLSM Excel spreadsheet I used in the video and also text files containing the macros used below. https://filedb.experts-exchange.com/incoming/2017/03_w12/1151775/Permutations.txt https://filedb.experts-exchange.com/incoming/201…

856 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