Jump to content

Customizing Drop Down Menus with CSS

Recommended Posts

justinn    0

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
catrina    103

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
justinn    0

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

    • 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.
    • tristanrodgers
      By tristanrodgers
      Website URL: http://mc1r-magazine.com/
      Framework Version:
      WordPress Version: 4.1
      Plugins in Use: The Pagelines Plugins
      Hey guys,
      I have a problem since I tried to add a custom font in my theme.
      I created a font-face-kit via "font-squirrel" and I tried to include the font on this way the docs tell me to do it:
      But it didn't work and it messed up the page in Firefox. Of course the Cache is empty, code deleted, plugins deactivated, but it still shows a messed up page in Firefox! I've included 2 screenshots to show you the problem (and another problem with the background-color of the font, maybe you see there is blue but I've chosen an orange)
    • afrankadvice
      By afrankadvice
      I've got a form where the user can select max 3 checkboxes. My setup is like this below. I've added the jQuery script to the custom script area. But for some reason I can select all checkboxes. Can anyone help me?
      <div id="bla">     <p>         Checkbox 1: <input type="checkbox" name="checkme[]" value="1" />     </p>     <p>         Checkbox 2: <input type="checkbox" name="checkme[]" value="2" />     </p>     <p>         Checkbox 3: <input type="checkbox" name="checkme[]" value="3" />     </p>     <p>         Checkbox 4: <input type="checkbox" name="checkme[]" value="4" />     </p>     <p>         Checkbox 5: <input type="checkbox" name="checkme[]" value="5" />     </p>     <p>         Checkbox 6: <input type="checkbox" name="checkme[]" value="6" />     </p>     <p>         Checkbox 7: <input type="checkbox" name="checkme[]" value="7" />     </p>     <p>         Checkbox 8: <input type="checkbox" name="checkme[]" value="8" />     </p> </div>   jQuery   <script> jQuery(document).jQuery(function() { $("#bla :checkbox").click(function() {     if($("#bla :checkbox:checked").length >= 3) {         $("#bla :checkbox:not(:checked)").attr("disabled", "disabled");     } else {         $("#bla :checkbox").attr("disabled", "");     } }) }); </script>