Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2008
    Posts
    48
    Rep Power
    11

    Son of Suckerfish Drop downs


    This method is just awesome, but how on earch does someone get the font color to stay on its hover state?

    http://htmldog.com/articles/suckerfish/dropdowns/

    This should be a sticky and lets solve this problem together. This question is always asked but never answered.
  2. #2
  3. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    A question so simple be stickied? Good luck with support...anyway your answer is simple. Find out the color:; of it....actually I'll show you.

    Imagine you have this

    Code:
    #nav li ul {
       color: #FFF /*White*/
    }
    If you want it to be the exact same color, then simply do this

    Code:
    #nav li ul:active {
      color: #FFF /*White*/
    }
    Take a look at pseudo elements.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2008
    Posts
    48
    Rep Power
    11
    Ahh my friend.. its not that. You misunderstood me.

    Say we have a three level menu.

    right now ONLY the background color stays in the down state once you are at the 3rd level. You can declare the font color but it will not chance. The question is how can you make it change?

    Code:
    <style type="text/css">
    
    body {
    	font: 78%/1.5 arial, helvetica, serif;
    	background: white url(bgbaba.gif);
    	text-align: center;
    	padding: 0;
    	margin: 2em;
    }
    
    #container {
    	width: 36em;
    	background: #F4ECD9;
    	text-align: left;
    	border: 1px solid #eda;
    	margin: 0 auto;
    }
    
    p {
    	background: url(remorabg.gif) center no-repeat;
    	margin: 1em 2em;
    }
    
    p#smurf {
    	background: transparent;
    	font-style: italic;
    	text-align: center;
    	font-weight: bold;
    	color: #7C6240;
    }
    
    #smurf strong {
    	font-size: 1.2em;
    	color: black;
    }
    
    h1 {
    	height: 108px;
    	background: url(perciformes3.gif) bottom center no-repeat;
    	text-indent: -999em;
    	margin: 1em 0 0 0;
    }
    
    #nav, #nav ul {
    	float: left;
    	width: 36em;
    	list-style: none;
    	line-height: 1;
    	background: white;
    	font-weight: bold;
    	padding: 0;
    	border: solid #eda;
    	border-width: 1px 0;
    	margin: 0 0 1em 0;
    }
    
    #nav a {
    	display: block;
    	width: 10em;
    	w\idth: 6em;
    	color: #7C6240;
    	text-decoration: none;
    	padding: 0.25em 2em;
    }
    
    #nav a.daddy {
    	background: url(rightarrow2.gif) center right no-repeat;
    }
    
    #nav li {
    	float: left;
    	padding: 0;
    	width: 10em;
    }
    
    #nav li ul {
    	position: absolute;
    	left: -999em;
    	height: auto;
    	width: 14.4em;
    	w\idth: 13.9em;
    	font-weight: normal;
    	border-width: 0.25em;
    	margin: 0;
    }
    
    #nav li li {
    	padding-right: 1em;
    	width: 13em
    }
    
    #nav li ul a {
    	width: 13em;
    	w\idth: 9em;
    }
    
    #nav li ul ul {
    	margin: -1.75em 0 0 14em;
    }
    
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    	left: -999em;
    }
    
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    	left: auto;
    }
    
    #nav li:hover, #nav li.sfhover {
    	background: #eda;
    }
    
    #content {
    	clear: left;
    }
    
    #content a {
    	color: #7C6240;
    }
    
    #content a:hover {
    	text-decoration: none;
    }
    
    #scaffolding {
    	height: 70px;
    	background: white url(/images/header_bg.gif) no-repeat;
    	border: solid #eda;
    	border-width: 1px 0 0 0;
    	margin: 1em 0 0 0;
    }
    
    #scaffolding a {
    	text-decoration: none;
    	text-indent: -999em;
    	display: block;
    	height: 70px;
    	background: url(/images/hdlogo_flip2.gif) no-repeat;
    	background-position: 181px 0;
    }
    
    #scaffolding a:hover {
    	background-position: 181px -70px;
    }
    Code:
    </style>
    
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    
    sfHover = function() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    //--><!]]></script>
    Code:
    <ul id="nav">
    
    	<li><a href="#">Percoidei</a>
    		<ul>
    			<li><a href="#" class="daddy">Remoras</a>
    
    				<ul>
    					<li><a href="#" class="daddy">Echeneis</a>
    						<ul>
    							<li><a href="#">Sharksucker</a></li>
    							<li><a href="#">Whitefin Sharksucker</a></li>
    						</ul>
    					</li>
    
    					<li><a href="#" class="daddy">Phtheirichthys</a>
    						<ul>
    							<li><a href="#">Slender Suckerfish</a></li>
    						</ul>
    					</li>
    					<li><a href="#" class="daddy">Remora</a>
    						<ul>
    
    							<li><a href="#">Whalesucker</a></li>
    							<li><a href="#">Spearfish remora</a></li>
    							<li><a href="#">Marlinsucker</a></li>
    							<li><a href="#">Remora</a></li>
    							<li><a href="#">Ceylonese remora</a></li>
    						</ul>
    
    					</li>
    					<li><a href="#" class="daddy">Remorina</a>
    						<ul>
    							<li><a href="#">White suckerfish</a></li>
    						</ul>
    					</li>
    					<li><a href="#" class="daddy">Rhombochirus</a>
    
    						<ul>
    							<li><a href="#">R. osteochir</a></li>
    						</ul>
    					</li>
    				</ul>
    			</li>
    			<li><a href="#" class="daddy">Tilefishes</a>
    				<ul>
    
    					<li><a href="#">Caulolatilus</a></li>
    					<li><a href="#">Lopholatilus</a></li>
    					<li><a href="#">Malacanthus</a></li>
    				</ul>
    			</li>
    			<li><a href="#" class="daddy">Bluefishes</a>
    				<ul>
    
    					<li><a href="#">Pomatomus</a></li>
    					<li><a href="#">Scombrops</a></li>
    					<li><a href="#">Sphyraenops</a></li>
    				</ul>
    			</li>
    			<li><a href="#" class="daddy">Tigerfishes</a>
    				<ul>
    
    					<li><a href="#">Amniataba</a></li>
    					<li><a href="#">Bidyanus</a></li>
    					<li><a href="#">Hannia</a></li>
    					<li><a href="#">Hephaestus</a></li>
    					<li><a href="#">Lagusia</a></li>
    					<li><a href="#">Leiopotherapon</a></li>
    
    					<li><a href="#">Mesopristes</a></li>
    					<li><a href="#">Pelates</a></li>
    					<li><a href="#">Pelsartia</a></li>
    					<li><a href="#">Pingalla</a></li>
    					<li><a href="#">Rhyncopelates</a></li>
    					<li><a href="#">Scortum</a></li>
    
    					<li><a href="#">Syncomistes</a></li>
    					<li><a href="#">Terapon</a></li>
    				</ul>
    			</li>
    
    		</ul>
    	</li>
    
    	<li><a href="#">Anabantoidei</a>
    
    		<ul>
    			<li><a href="#" class="daddy">Climbing perches</a>
    				<ul>
    					<li><a href="#">Anabas</a></li>
    					<li><a href="#">Ctenopoma</a></li>
    				</ul>
    			</li>
    
    			<li><a href="#" class="daddy">Labyrinthfishes</a>
    				<ul>
    					<li><a href="#">Belontia</a></li>
    					<li><a href="#">Betta</a></li>
    					<li><a href="#">Colisa</a></li>
    					<li><a href="#">Macropodus</a></li>
    
    					<li><a href="#">Malpulutta</a></li>
    					<li><a href="#">Parosphromenus</a></li>
    					<li><a href="#">Sphaerichthys</a></li>
    					<li><a href="#">Trichogaster</a></li>
    					<li><a href="#">Trichopsis</a></li>
    				</ul>
    
    			</li>
    			<li><a href="#">Kissing gouramis</a></li>
    			<li><a href="#">Pike-heads</a></li>
    			<li><a href="#">Giant gouramis</a></li>
    
    		</ul>
    	</li>
    
    	<li><a href="#">Gobioidei</a>
    		<ul>
    			<li><a href="#">Burrowing gobies</a></li>
    			<li><a href="#">Dartfishes</a></li>
    			<li><a href="#">Eellike gobies</a></li>
    			<li><a href="#">Gobies</a></li>
    
    			<li><a href="#">Loach gobies</a></li>
    			<li><a href="#">Odontobutidae</a></li>
    			<li><a href="#">Sandfishes</a></li>
    			<li><a href="#">Schindleriidae</a></li>
    			<li><a href="#">Sleepers</a></li>
    			<li><a href="#">Xenisthmidae</a></li>
    
    		</ul>
    	</li>
    </ul>
    Last edited by Basilecom; July 9th, 2008 at 05:33 PM.
  6. #4
  7. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Just use the child selector.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2008
    Posts
    48
    Rep Power
    11
    won't work in ie6
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2008
    Posts
    48
    Rep Power
    11
    This is really a huge issue and will be a breakthrough for the CSS community, any thoughts?
  12. #7
  13. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Why not just make a seperate style sheet for IE6 users?
    http://dynamicsitesolutions.com/css/filters/support-chart/

    Found that nifty. The child selector won't work in those so I recommend applying a class/id to the specific level of dropdown and then reference it in CSS to font color of your choice.
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2008
    Posts
    48
    Rep Power
    11
    The whole idea behind son of sucker fish is that it will work in all browsers. No hacks, nothing extra needed. That is key. One way of doing it, and it works every which way. The fix might be in the javascript perhaps? What do the javascript/css experts think?
  16. #9
  17. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2008
    Posts
    48
    Rep Power
    11
    I'll fast foward to the good stuff

    Code:
    #nav li:hover, #nav li.sfhover {
    	background: #eda;
                 color:#fff;
    }
    the background color changes, but not the font. Copy and paste all of the original code from above and then use this change. I added in the font property.
    Last edited by Basilecom; July 10th, 2008 at 08:09 AM.
  20. #11
  21. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Well you really shouldn't worry about IE6 users too much because IE8 is coming out soon thus making IE6 2 generations old. They will probably almost all upgrade so you shouldn't have to worry about them too much.
  22. #12
  23. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2008
    Posts
    48
    Rep Power
    11
    Nonetheless they still have equal standing with ie7 users which is a huge gap, but thats getting a bit off subject. I can't make this work in any browser with keeping the font color the same while hovering over it.
  24. #13
  25. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Didn't you just say only IE6 didn't work? Be more specific because if you went to that link provided you can see what browsers support the child selector. Wasn't you problem only in IE6? Tell us all the browsers that don't work.
  26. #14
  27. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2008
    Posts
    48
    Rep Power
    11
    I meant to say that IE6 can't use ">" sorry. I'll upload the example to my server.
  28. #15
  29. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Yes we know that won't work but that's because that doesn't support the child selector. Why not just assign the dropdown levels an ID/class and then just reference the font color in there? That seems like a fix that would work in all browsers and you wouldn't have to use child selectors.
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo