Styling certain words in a dropdown

HTML & CSS
1

Hi, i have a dropdown menu but require some words to act as headers within the dropdown menu.

i have tried creating li class and putting a h2 tag around the word but it seems there is a parent class overiding certain styles. {see bold line on fourth button code}

the only thing i can do is increase the font size. nothing else seems to work.

here is the html and css

any help would be great

thanks


<body>
		<ul class="sf-menu">
			<li class="current">
           
           <!--first button tab-->
            <li>
				<a href="#">HOME</a>
			</li>
            
            <!--END first button tab-->
            
            <!--SECOND button tab-->
           
           
           
           <li class="current">
				<a href="#">INBOUND MARKETING</a>
				<ul>
					<li  class="bigtext"><a href="#">menu item that</a></li>
					<li class="current"><a href="#">menu item</a>
						<ul>
							<li class="current">
                            <li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
						</ul>
					</li>
					<li>
						<a href="#">menu item</a>
						<ul>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
						</ul>
					</li>
					<li>
						<a href="#">menu item</a>
						<ul>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<!--END SECOND button tab-->
            
            
            
            
            <!--THIRD button tab-->
            <li>
				<a href="#">MARKETING PACKAGES</a>
			</li>	
            
            
            <!--fourth button tab-->
			<li>
				<a href="#">PROJECT SERVICES</a>
				
                
                <ul>
<div class="wrapper_col">
                 <div class="col1"> 
               
					<li  class="bigtext">
					
[B]<li><h2><a href="#">Development Services</a></h2></li>[/B]

							<li><a href="#">Website</a></li>
							<li><a href="#">Commerce Store</a></li>
							<li><a href="#">CRM Integration</a></li>
							<li><a href="#">Landing Pages</a></li>
							<li><a href="#">Lead Nurturing</a></li>
                            <li><a href="#">Email Templates</a></li>
						
                        
					</li>
                  </div>
                    
                  <div class="col2">
					<li class="bigtext">
						<h2>Content Services</h2>
						
							<li><a href="#">Web Copy</a></li>
							<li><a href="#">Blog Writing</a></li>
							<li><a href="#">Video Content</a></li>
							<li><a href="#">Value Add Content</a></li>
							<li><a href="#">Social Media</a></li>
                            <li><a href="#">Call to Action Graphics</a></li>
							<li><a href="#">SEO</a></li>
						
					</li>
	   			</div>
</div>
				</ul>
                
			    </li>
			
         
            
            <li>
				<a href="#">ABOUT US</a>
			</li>
            <li>
				<a href="#">CONTACT US</a>
			</li>
            <li>
				<a href="#">BLOG</a>
			</li>
		</ul>
	</body>
</html>

CSS




/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
	font-family:Helvetica, Arial, sans-serif;
	
}
.sf-menu {
	line-height:	1.0;
	font-size:11px;

	
}

.bigtext{
font-size:12px;
line-height:16px;}

.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			100%; /* 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:			auto;
	top:			2.5em; /* match top ul list item height */
	z-index:		99;
	width:			150px; /* SETS THE WIDTH OF SUB MENU*/
	
}
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:			100%; /* match ul width */
	top:			0;
	width:			100%; /* SETS THE WIDTH OF SUB SUB MENU*/
}
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;
}

/*** DEMO SKIN ***/
.sf-menu {
	float:			left;
	margin-bottom:	1em;
	
	
	
}
.sf-menu a {

	padding: 		.75em 1em;
	text-decoration:none;
	
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#fff;
}
.sf-menu li {
background-image:url(../images/MENU_BACKGROUND.jpg);
}
.sf-menu li li {
	background:		#282828;
	border-top:		1px solid #868686;
}
.sf-menu li li li {
	background:		#282828;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	background:		#494949;
	outline:		0;

}

/*** arrows **/
.sf-menu a.sf-with-ul {
	padding-right: 	2.25em;
	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			.75em;
	top:			1.05em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden;
	background:		url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top:			.8em;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
	
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:	url('../images/shadow.png') no-repeat bottom right;
	padding: 0 8px 9px 0;
	-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
	background: transparent;
}




/**NEW MENU**/
.sub_header{ color:00b5d5; font-size:11px; font-weight:bold;}


    .wrapper_col{width:310px; float:left; background-color:#282828;}
    .col1 { width: 150px; margin-left:10px; float: left; }	
	.col2 { width: 150px !important; float: left; }
	
[B]h2{
font-size:11px;
color:#00b5d5;
}[/B]
2

This is an issue of specificity (which rules prevail over others).

In this case,

.bigtext {
  font-size: 12px;
  line-height: 16px;
}

is being overridden by

h2 {
  color: #00B5D5;
  font-size: 11px;
}

The reason is that an element selector carries more weight than a class selector. So, the simple answer is to modify the first rule to this:

.bigtext [COLOR="Red"]h2[/COLOR] {
  font-size: 12px;
  line-height: 16px;
}

An element selector plus a class selector carry more weight than an element selector on its own.

3

thanks for the reply,
i tried that but the only class that seems to change is the font size. i tried applying color etc and nothing happens.


<li><h2 class="bigtext"><a href="#">Development Services</a></h2></li>

it seems that the color only changes when the <li> and <a> tag arent applied to the word.

thanks

4

How are you applying the color? If I do this with the code you posted, the heading turns red:

.bigtext h2{
font-size:12px;
line-height:16px;
[COLOR="Red"]color: red;[/COLOR]
}

So if that doesn’t work for you, then there must be other styles overriding this that you didn’t post. In that case, post all of your CSS so we can see what’s getting in the way.

5

Hi Ralph, ye i was entering color as you showed. there is something overriding
the color value.

here is my css



/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
	font-family:Helvetica, Arial, sans-serif;
	
}
.sf-menu {
	line-height:	1.0;
	font-size:11px;

	
}

.bigtext h2 {
  font-size: 11px;
  color:red;
}

.bigtext{
font-size:12px;
line-height:16px;}

.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			100%; /* 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:			auto;
	top:			2.5em; /* match top ul list item height */
	z-index:		99;
	width:			150px; /* SETS THE WIDTH OF SUB MENU*/
	
}
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:			100%; /* match ul width */
	top:			0;
	width:			100%; /* SETS THE WIDTH OF SUB SUB MENU*/
}
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;
}

/*** DEMO SKIN ***/
.sf-menu {
	float:			left;
	margin-bottom:	1em;
	
	
	
}
.sf-menu a {

	padding: 		.75em 1em;
	text-decoration:none;
	
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#fff;
}
.sf-menu li {
background-image:url(../images/MENU_BACKGROUND.jpg);
}
.sf-menu li li {
	background:		#282828;
	border-top:		1px solid #868686;
}
.sf-menu li li li {
	background:		#282828;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	background:		#494949;
	outline:		0;

}

/*** arrows **/
.sf-menu a.sf-with-ul {
	padding-right: 	2.25em;
	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			.75em;
	top:			1.05em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden;
	background:		url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top:			.8em;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
	
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:	url('../images/shadow.png') no-repeat bottom right;
	padding: 0 8px 9px 0;
	-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
	background: transparent;
}




/**NEW MENU**/
.sub_header{ color:00b5d5; font-size:11px; font-weight:bold;}


    .wrapper_col{width:310px; float:left; background-color:#282828;}
    .col1 { width: 150px; margin-left:10px; float: left; }	
	.col2 { width: 150px !important; float: left; }
6

You might want to fix your HTML first.


		<ul class="sf-menu">
			<li class="current">
           
           <!--first button tab-->
            <li>
				<a href="#">HOME</a>
			</li>

Is that seriously

 
<ul class="sf-menu">
  <li class="current">
  <li>
    <a href="#">HOME</a>
  </li>
???????

<li class="current">
  <a href="#">INBOUND MARKETING</a>
  <ul>
    <li><a href="#">menu item that</a></li>
    <li class="current"><a href="#">menu item</a>
      <ul>
        <li class="current"> ???????????????????????????????
        <li><a href="#">menu item</a></li>
        <li><a href="#">menu item</a></li>
        <li><a href="#">menu item</a></li>
        <li><a href="#">menu item</a></li>
        <li><a href="#">menu item</a></li>
      </ul>
    </li>
    <li>
      <a href="#">menu item</a>
      <ul>
        <li><a href="#">menu item</a></li>
        <li><a href="#">menu item</a></li>
        <li><a href="#">menu item</a></li>
        <li><a href="#">menu item</a></li>
        <li><a href="#">menu item</a></li>
      </ul>
    </li>
    <li>
      <a href="#">menu item</a>
      <ul>
        <li><a href="#">menu item</a></li>
        <li><a href="#">menu item</a></li>
        <li><a href="#">menu item</a></li>
        <li><a href="#">menu item</a></li>
        <li><a href="#">menu item</a></li>
      </ul>
    </li>
  </ul>
</li>
...

I can see browsers getting confuzled with that code. What’s with the nested li’s? I think it may be technically legal (the specs don’t seem to say a li cannot directly contain yet another li), but it makes no structural sense at all. (Most likely: browsers are seeing the <li class=“current”> as nothing more than an unclosed li and are closing it silently for you… meaning you have an empty, doing-nothing list element. If you have a live page anywhere, I would like to see what Firefox is doing with it.)

Personally I think I would remove all those classes. Unless “current” actually means something, but it looks like it’s being applied to all the lis?? Which one is the current one then? So I’d just chuck them all and style purely from tags, using the class on the main menu.

So to override the h2 {styles;}, it’s simply
.sf-menu li h2 {new styles;}
or even just
.sf-menu h2 {new styles;}

then we don’t have to worry about some other class doing something weird or whatever.

7

Hi, thanks for pointing that out. the html was a bit messy.

i am stil having problems witht he css styles.
I created a style like you said

‘.sf-menu h2’ but it still didnt change the color

then i tried creating a style like below

.sf-menu a.head{
color:#33FF33;
font-size:12px;}

with the html
<li><a class=“head” href=“#”>Development Services</a></li>

the font size changes but the color stays white. i think it may be to do with
the class below which controls all the links in the menu

i have a class


.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
color:	#fff;
}

thanks

8

hi, i have solved the problem. i put a class on the a tag and it worked

thanks for your help