Jump to content

Customizing Drop Down Menus with CSS

Recommended Posts


Hi All,


Just working on a site for a client and it's almost done, but I can't for the life of me find where and how to change the look of the drop-down menus. 


I'm using NavClassic and removed most of the styling by setting the background color of the menu to transparent and then setting up a background image for each menu item.


My problem is now, the edits I made to the main menu bar have now also automatically been applied to the dropdown menus underneath.


The URL I'm working on is here: http://www.justinphnoble.com/howardconsulting/

If you mouse over the "About" menu, you'll see what I mean.


I managed to change the background for the first menu item to black, just as a test to see if I'd located the correct css selector, but it only seems to have changed the first menu item and ignored the rest, so that can't be right. As always, it's probably so simple, but I can't see it, and my client is on my back to get it live (Aren't they always).


Any help would be greatly appreciated! All I need to achieve is a grey background behind the dropdown options, possibly with a little transparency, and to remove the background image that it's carried over from my main menu from each of the submenu items. (It's the blue line to the left of each menu item.)


Here's my custom css so far:


.fixed_width .section-branding .content-pad {
  padding: 0px!important;}
#footer .content {background-image: url('http://www.justinphnoble.com/howardconsulting/wp-content/uploads/2013/03/layout3_19.png');
background-repeat: repeat-x;
  background-color: #192555;}
#nav .content-pad, #secondnav .content-pad {
padding-top: 5px;
padding-bottom: 3px;
background-image: url('http://www.justinphnoble.com/howardconsulting/wp-content/uploads/2013/02/layout3_03.jpg');
  background-repeat: repeat-x;
#features .content .content-pad {
  padding: 0!important;}
#page .main-nav a {
background: transparent !important;
#page .main-nav a {
background: transparent !important;
.fboxtitle h3 {color: #1c2859 !important;
  font-size: 11pt;
.fboxtext {font-size: 9pt;
color: #373737 !important;}
#sidebar-wrap .widget-title {font-size: 13pt !important;
border-bottom: 1px solid #949494 !important;
  padding-bottom: 8px !important;
margin-right:20px !important;}

ul#menu-latest-briefings-downloads { }
ul#menu-latest-briefings-downloads li { list-style-type: none !important;
background: url('http://www.justinphnoble.com/howardconsulting/wp-content/uploads/2013/03/bullet.png') no-repeat top left !important;
height: 46px !important;
padding-left: 20px !important;}
li#nav_menu-3 {background: #e6e6e6;}
li#nav_menu-3 {-webkit-box-shadow: 2px 2px 4px 4px #bbb;
  box-shadow: 2px 2px 4px 4px #bbb;
margin: 10px;
border-radius: 6px;
border: 1px solid #fff;}
.grid-element, .media_overview {
margin-bottom: 0px !important;
#watchwords {font-weight: bold;
margin-top: 60px;
color: #1c295a;
  letter-spacing: 1px;}
.footcol .footcol-pad {
padding: 0px 10px 0px 40px;
.fcolumns {font-size: 9pt;}
.fcolumns h3{font-size: 10pt!important;}
.copyright {font-size: 7pt;
  letter-spacing: -1px;}
.ppfull .pp3 {
width: 260px !important;
#footerblock {
padding-top: 60px !important;
text-align: right;
margin-right: 40px;
font-size: 8pt;
letter-spacing: -0.1em;
.canvas .page-canvas, .thepage .content, .sf-menu li, #primary-nav ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active, .commentlist ul.children .even {
background-color: transparent!important;
ul.sf-menu li {
float: left;
position: relative;
margin: 0;
padding-top: 4px;
height: 37px;
background-image: url('http://www.justinphnoble.com/howardconsulting/wp-content/uploads/2013/03/layout3_03.png');
background-repeat: no-repeat;
ul.sf-menu ul.sub-menu li.menu-item a {
padding: 8px 15px 9px;
width: 300px;
ul.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
height: 41px;
text-transform: uppercase;
font-weight: bold;
  text-shadow: 1px 1px #000000;

#nav .content-pad, #secondnav .content-pad {
padding-top: 0px;
padding-bottom: 0px;
background-image: url('http://www.justinphnoble.com/howardconsulting/wp-content/uploads/2013/02/layout3_03.jpg');
background-repeat: repeat-x;
#content {background-image: url('http://www.justinphnoble.com/howardconsulting/wp-content/uploads/2013/03/layout3_23.png');
background-repeat: repeat-x;
  background-position: bottom;}
#boxes {background-image: url('http://www.justinphnoble.com/howardconsulting/wp-content/uploads/2013/03/layout3_09.png');
background-repeat: repeat-x;
  background-position: top;}
ul.sf-menu li#menu-item-81 {
  background-image: url('http://www.justinphnoble.com/howardconsulting/wp-content/uploads/2013/03/home.png')!important;  /* shows image */
  height: 41px;                        /* be sure to set height & width */
  width:  60px;

  /* Hide the text. */
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
.hentry h1, .hentry h2 {
color: #1c2859;
.hentry h1 {
font-size: 18pt!important;
ul.sf-menu ul.sub-menu, ul.sf-menu ul.children {
text-align: left;
position: absolute;
width: 300px;
margin-top: 7px;
padding: 0;
background-color: #000!important;


Many thanks in advance!



Share this post

Link to post
Share on other sites

The submenu items in the dropdown navigation use a different CSS selector for the <ul> list, so you'll need to use that selector to create a separate style for the submenu. When I inspect the dropdown with Firebug, I see that the <ul> list has the class submenu.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post

Link to post
Share on other sites

Thanks Catrina :)

Got it working now :) just had to and an "li" to the code I was already trying to use.





Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • Borries
      By Borries+
      I know this is not an easy problem. Maybe there is a easy solution.
      I have tryed to uses the existing solution, that I have found in the forum
      I changed the colours of my nav (simple nav) and the hover effect (a. hover).
      I really tryed to highlight the active/used link in the nav but I cant figure it out.
      I want it to be black when active.
      Any help would be appreciated. Thanks.
      http://www.marcborries.de  nav link: "Sinn & Selbst" 
    • Dan Haddock
      By Dan Haddock
      Hi Pagelines team and wider community,
      I am looking to develop a single post page for my blog. I have read over an old article on the subject, however the link provided on achieving this goal was giving me security warnings. Is there any way I can get round this?
      Secondly, I have had a root around the .zip file provided on my sites backup, however was unable to locate any file in there with the name of Single.php. Does this file exist in the Pagelines theme?
      By the way, this is the unsafe article: http://support.pagelines.me/docs/customization/create-a-custom-page-template/ (Click at your peril).
    • Kedark
      By Kedark+
      how to set the menu navi:
      - The background color when you expand a submenu,
      - Background color on mouseover,
      - The color of the text,
      - Width of submenu
      Please help, nowhere in the forum I have not found the answers to these questions ..
    • mzhafzah
      By mzhafzah
      I am using DMS 2 theme and I want to create a 2 different links on my website; each link should take you to a different blog post category. Although the process is easy, yet I can not figure out how to give each category page a unique design of its own; Any change I make on any page is applied to the other (I'm aware of the universal elements like the header and footer and I a am not talking about these.)
      Since I am new to wordpress in general, I am not sure if my description is sufficient; apologies if it is not.
    • napait
      By napait+
      Hello All,
      My question is.. How do I add more social icons using the Navi section in Mobile Menu mode?
      The only two that show up are the Facebook and Twitter, from the information you fill out in the Site Setting > Social & Local.
      Please review site for example: www.napait.com
      I would like to be able to add custom icons such as other social and phone, map, contact icons after these social icons in the mobile menu. Basically want to move the phone icon into the social icons bar. Having looked for the right hook using Hooker plugin I still have been unsuccessful.
      Thank you in advance.