teckn1caLity Posted September 22, 2009 Share Posted September 22, 2009 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> Quote Link to comment https://forums.phpfreaks.com/topic/175162-active-menu-button/ Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.