ThemeShaper Forums » Thematic

[closed]

help with dropdown menu background

(7 posts)
  • Started 9 years ago by fedude
  • Latest reply from rekopacz
  • This topic is resolved
  1. fedude
    Member

    This is going to sound stupid to CSS gurus but I'm stumped trying to change the color of the child dropdown list in my child theme. The background in the dropdown list is white and I cannot seem to change it. Firebug won't show me the hierarchy of my CSS - must be a javascript thing?

    Here is my code (which I've found corroborated by many in these forums):

    .sf-menu li li {	/* this colors the 2nd level menus background*/
    	background:#333333;
    }

    Here is the code from the default.css (which is setting it to white):

    .sf-menu li li {
    	background:		#fff;
    }

    I'm following the superfish-themed.css writeup by jrobbin. The hover on the dropdown list renders perfectly. Everything else seems to be working except the css for the dropdown itself.

    Here is my site: http://14holegolf.com/newlcc/

    My stylesheets are listed below:

    Here is my superfish-themed.css:

    /*** Overall section ***/
    #access {  /* Sets the background for the menu division - called access in thematic */
        height:38px; /* this sets the height of your menus */
        padding-top:3px;
        font-size:13px;
        overflow:visible;
        z-index:100;
    	background-color:#000000;
    	}
    .skip-link { /* for accessibility */
       display:none;
    }
    
    /*** ESSENTIAL STYLES positioning***/
     /*coloring etc .. now handled by Theme section */
    .sf-menu, .sf-menu * {
    	margin:			0;
    	padding:		0;
    	list-style:		none;
    }
    .sf-menu {
    	line-height:	1.0;
    }
    .sf-menu ul {
    	position:		absolute;
    	top:			-999em;
    	width:			10em; /* left offset of submenus need to match (see below) */
    	}
    .sf-menu ul li {
    	width:			100%;
    }
    .sf-menu li:hover {
    	visibility:		inherit; /* fixes IE7 'sticky bug' */
    	}
    .sf-menu li {
    	float:			left;
    	position:		relative;
    }
    .sf-menu a {
    	display:		block;
    	position:		relative;
    }
    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
    	left:			0;
    	top:			2.5em; /* match top ul list item height */
    	z-index:		99;
    }
    ul.sf-menu li:hover li ul,
    ul.sf-menu li.sfHover li ul {
    	top:			-999em;
    	}
    ul.sf-menu li li:hover ul,
    ul.sf-menu li li.sfHover ul {
    	left:			10em; /* match ul width */
    	top:			0;
    	}
    ul.sf-menu li li:hover li ul,
    ul.sf-menu li li.sfHover li ul {
    	top:			-999em;
    	}
    ul.sf-menu li li li:hover ul,
    ul.sf-menu li li li.sfHover ul {
    	left:			10em; /* match ul width */
    	top:			0;
    	}
    
    	/******* Theme Specific SKIN *********/
    .sf-menu {
    	float:			left;
    	margin-bottom:	1em;
    	list-style: none;  /* this keeps the dots from showing after each menu item */
    	border-color:black;
    }
    .sf-menu a {
    /*	border-left:	1px solid #fff;  /* change this to match your color or delete if you do not want dividers between menu selections */
    /*	border-top:		0px solid #CFDEFF;
    */	padding: 		.75em 1em;
    	text-decoration:none; /*so your menu items are not underlined */
    	border-color:black;
    }	
    
    .sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    	color:			#ffffff;	/*  font color */
      }   
    
    /*  resets the underline of the page you are on to nothing  */
    .sf-menu .current_page_item a,
    .sf-menu .current_page_ancestor a,
    .sf-menu .current_page_parent a {
        border-bottom:0;
    }
    .sf-menu li { /*this keeps the main menu background the color of #access */
    	background:transparent;
    	list-style:none;
    }
    .sf-menu li li {	/* this colors the 2nd level menus background*/
    	background:#333333;
    }
    .sf-menu li:hover, .sf-menu li.sfHover,
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    	outline:	0;
    	color: #FFFFFF;
    	background-color: #666666; /* light gray - this is the 1st level hover */
    }
    
    .sf-menu li li:hover, .sf-menu li li.sfHover,
    .sf-menu li a:focus, .sf-menu li a:hover, .sf-menu li a:active {
    	color: #FFFFFF;
    	background-color: #666666; /* light gray - this is the 2nd level hover */
    }

    And my child theme style.css:

    /* Reset browser defaults */
    @import url('../thematic/library/styles/reset.css');
    
    @import url('../thematic/style.css'); 
    
    /* Main Navigation Menu */
    @import URL('superfish-themed.css');
    
    body {
    	padding-top: 10px;
    	background-image:url(images/layout/bodyBg.jpg);
    	font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,sans-serif;
    	margin:0 auto;
    	width:960px;
    }
    
    /* Add the header image instead of the blog title - to keep it clickable */
    
    #blog-description {
    	display:none
    }
    
    #branding {  /* Add the header background */
    	background-image:url(images/layout/headerBg2.jpg);
    	margin:0 auto;
    	padding:0;
    	width:960px;
    	height:123px;
    }
    
    #access {      /* Add the Menu Background and size */
    	border:none;
    	margin-left:0px;
    	width:960px;
    }
    
    /*******************************
    **    Top Navigation Menu     **
    *******************************/
    
    #top-nav
    {
    	width:475px;
    	float:right;
    	clear:right;
    	padding-top:60px;
    
    }
    
    #top-nav li
    {
    	float:left;
    	margin:0px 8px 0px 0px;
    	padding:0;
    	list-style-type:none;
    }
    
    #top-nav a
    {
    	padding:5px 10px;
    	font-size:12px;
    	color:#a6b9b1;
    	line-height:14px;
    	text-decoration:none;
    }
    
    #top-nav a:hover
    {
    	text-decoration:underline;
    }
    
    /*******************************
    **    Top Search Form         **
    *******************************/
    #search-form
    {
    	width:300px;
    	float:right;
    	padding-top:3px;
    	padding-bottom:8px;
    	padding-left:75px;
    	background-image:url("images/layout/searchBg.jpg");
    	background-position:center top;
    	background-repeat:no-repeat;
    }
    Posted 9 years ago #
  2. fedude
    Member

    Fixed it.

    Posted 9 years ago #
  3. Devadaru
    Member

    But how? I'm looking for the same thing....

    Posted 8 years ago #
  4. @Fedude - I noticed that your dropdowns "creep up" into your access bar instead of lying flush. That can be corrected by changing:

    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
        top:32px; /* overriding essential styles */
    }

    to

    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
        top:38px; /* overriding essential styles */
    }

    in your child theme so that the number there is the same as the height of your #access. If your effect is intentional, however, please disregard. :)

    Posted 8 years ago #
  5. elderberry
    Member

    @ridgely, maybe you can help me with my menu css?

    When I hover over the 2nd level links the color of the top level link reverts to the non hover color, while the top level background stays on the hover setting (making the top level text disappear.)


    /*** THEMATIC SKIN ***/
    .sf-menu {
    border-right:1px solid rgb(102,153,153);
    float:left;
    }
    .sf-menu a {
    border-left:1px solid rgb(102,153,153);
    border-top:1px solid rgb(102,153,153);
    border-bottom:1px solid rgb(102,153,153);
    padding:9px 13px;
    text-decoration:none;
    }
    .sf-menu .current_page_item a,
    .sf-menu .current_page_ancestor a,
    .sf-menu .current_page_parent a {
    border-bottom-color:rgb(245,245,223);
    background:rgb(245,245,223);
    }
    .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
    color:rgb(102,153,153);
    }
    .sf-menu li {
    background: rgb(153,194,194) url(http://high-ridge.alterra-wv.com/button-off.gif) repeat-x 0px -10px;
    }
    .sf-menu li li {
    background:rgb(153,194,194) url(http://high-ridge.alterra-wv.com/button-off.gif) repeat-x 0px -10px;
    }
    .sf-menu li li li {
    background:rgb(245,245,223);
    }
    .sf-menu li:hover, .sf-menu li.sfHover,
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    color : #fff;
    background : rgb(214,214,180) url(http://high-ridge.alterra-wv.com/button-on.gif) repeat-x 0px -10px;
    outline: 0;
    border-bottom-color:#ccc;
    }
    .sf-menu ul {
    border-right:1px solid gb(102,153,153);
    border-bottom:1px solid gb(102,153,153);
    }
    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
    top:32px; /* overriding essential styles */
    }
    .sf-menu ul ul {
    margin-top:0;
    }
    .sf-menu ul a {
    background:#fafafa;
    border-bottom:none;
    }
    .sf-menu ul a:hover {
    color: #FFF;
    }

    Posted 8 years ago #
  6. elderberry
    Member

    Got the answer here:
    http://forums.themeshaper.com/topic/thematic-menu-css-question

    Posted 8 years ago #
  7. rekopacz
    Member

    Hi need some help, using the latest version of Thematic 0.9.7.7. Trying to style the second level dropdown. I inspected the ul with class sub-menu and see that it has several embedded element styles, one of which is "width: 27em."

    I am trying to change that by half, but it will not let me override it in the style sheet. Are those element styles inserted by function, and can you point me to which function?

    I am going to go and explore it myself, but if there is anything out there that helps explain that, I would appreciate it. Can I simply filter that width style out of the element, and then change it using the sub-menu class in the style sheet?

    Thanks for any help!

    Posted 8 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.