Jump to content

Active Menu Button


teckn1caLity

Recommended Posts

I'm not 100% sure what category this actually goes in so move it if necessary. Here is an image of the hover effect of the button (http://i36.tinypic.com/25zqiom.jpg). How can I make it so the button is automatically pressed down when you are viewing the respective page? The css is below. Any help is appreciated.

 

 

/*Credits: CSSplay */
/*URL: http://www.cssplay.co.uk/menus/pro_drop2 */
.preload2 {background: url(http://thesidetracked.com/wp-content/themes/unsleepable/images/button4.gif); float: left;}
.menu2 {
padding:0 0 0 32px; 
margin:0; 
list-style:none; 
height:40px;
background:#fff url(http://thesidetracked.com/wp-content/themes/unsleepable/images/button1a.gif) repeat-x; 
position: relative;
font-family:arial, verdana, sans-serif; 
}
.menu2 li.top {display:block; float:left; position:relative;}
.menu2 li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu2 li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:40px;}
.menu2 li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(http://thesidetracked.com/wp-content/themes/unsleepable/images/down.gif) no-repeat right top;}
.menu2 li a.top_link:hover {color:#fff; background: url(http://thesidetracked.com/wp-content/themes/unsleepable/images/button4.gif) no-repeat;}
.menu2 li a.top_link:hover span {background:url(http://thesidetracked.com/wp-content/themes/unsleepable/images/button4.gif) no-repeat right top;}
.menu2 li a.top_link:hover span.down {background:url(http://thesidetracked.com/wp-content/themes/unsleepable/images/button4a.gif) no-repeat right top;}

.menu2 li:hover > a.top_link {color:#fff; background: url(http://thesidetracked.com/wp-content/themes/unsleepable/images/button4.gif) no-repeat;}
.menu2 li:hover > a.top_link span {background:url(http://thesidetracked.com/wp-content/themes/unsleepable/images/button4.gif) no-repeat right top;}
.menu2 li:hover > a.top_link span.down {background:url(http://thesidetracked.com/wp-content/themes/unsleepable/images/button4a.gif) no-repeat right top;}


.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

.menu2 a:hover {visibility:visible;}
.menu2 li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
.menu2 ul, 
.menu2 :hover ul ul, 
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu2 :hover ul.sub {left:2px; top:40px; background: #fff; padding:3px 0; border:1px solid #8dc63f; white-space:nowrap; width:93px; height:auto;}
.menu2 :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub li a {display:block; font-size:11px; height:20px; width:87px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu2 :hover ul.sub li a.fly {background:#fff url(http://thesidetracked.com/wp-content/themes/unsleepable/images/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub li a:hover {background:#8dc63f; color:#fff;}
.menu2 :hover ul.sub li a.fly:hover {background:#8dc63f url(http://thesidetracked.com/wp-content/themes/unsleepable/images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#8dc63f url(http://thesidetracked.com/wp-content/themes/unsleepable/images/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 

.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid #8dc63f; white-space:nowrap; width:93px; z-index:200; height:auto;}
</style>
</head>

<body>
<span class="preload2"></span>

<ul class="menu2">
<li class="top"><a href="http://thesidetracked.com" id="home" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="http://thesidetracked.com/tapes" id="Tapes" class="top_link"><span class="top_link">Tapes</span>
<li class="top"><a href="http://thesidetracked.com/features" id="features" class="top_link"><span>Features</span>
<li class="top"><a href="http://thesidetracked.com/forums" id="forums" class="top_link"><span>Forums</span>
<li class="top"><a href="http://thesidetracked.com/contact" id="contact" class="top_link"><span>Contact</span>
</a></li>
</ul>
</div>
</div>	
</head>
</body>

 

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.