SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: styling certain words in a dropdown

  1. Apr 18, 2011 07:32 #1
    forry1
    forry1 is offline
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    styling certain words in a dropdown

    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

    Code:
    <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">
					
<li><h2><a href="#">Development Services</a></h2></li>

							<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
    Code:
    
/*** 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; }
	
h2{
font-size:11px;
color:#00b5d5;
}
    Reply With Quote Reply With Quote
  2. Apr 18, 2011 07:49 #2
    ralph.m
    ralph.m is online now
    It's all Geek to me silver trophybronze trophy
     SitePoint Award Recipient ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, Australia
    Posts
    19,968
    Mentioned
    216 Post(s)
    Tagged
    2 Thread(s)
    This is an issue of specificity (which rules prevail over others).

    In this case,

    Code:
    .bigtext {
  font-size: 12px;
  line-height: 16px;
}
    is being overridden by

    Code:
    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:

    Code:
    .bigtext h2 {
  font-size: 12px;
  line-height: 16px;
}
    An element selector plus a class selector carry more weight than an element selector on its own.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Try your hand at the new JavaScript Challenge!
    Reply With Quote Reply With Quote
  3. Apr 18, 2011 08:11 #3
    forry1
    forry1 is offline
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <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
    Reply With Quote Reply With Quote
  4. Apr 18, 2011 08:21 #4
    ralph.m
    ralph.m is online now
    It's all Geek to me silver trophybronze trophy
     SitePoint Award Recipient ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, Australia
    Posts
    19,968
    Mentioned
    216 Post(s)
    Tagged
    2 Thread(s)
    How are you applying the color? If I do this with the code you posted, the heading turns red:

    Code:
    .bigtext h2{
font-size:12px;
line-height:16px;
color: red;
}
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Try your hand at the new JavaScript Challenge!
    Reply With Quote Reply With Quote
  5. Apr 19, 2011 01:23 #5
    forry1
    forry1 is offline
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph, ye i was entering color as you showed. there is something overriding
    the color value.

    here is my css

    Code:
    /*** 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; }
    Reply With Quote Reply With Quote
  6. Apr 19, 2011 01:53 #6
    Stomme poes
    Stomme poes is offline
    i want cake and cookies Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    9,996
    Mentioned
    41 Post(s)
    Tagged
    1 Thread(s)
    You might want to fix your HTML first.

    Code:
    		<ul class="sf-menu">
			<li class="current">
           
           <!--first button tab-->
            <li>
				<a href="#">HOME</a>
			</li>
    Is that seriously
    Code:
     
<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.
    Reply With Quote Reply With Quote
  7. Apr 19, 2011 02:36 #7
    forry1
    forry1 is offline
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    .sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
color:	#fff;
}

    thanks
    Reply With Quote Reply With Quote
  8. Apr 19, 2011 03:15 #8
    forry1
    forry1 is offline
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi, i have solved the problem. i put a class on the a tag and it worked

    thanks for your help
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules