Menu
i have a pure css dropdown nav. how would i use JS or JQ to force the active pages tab to stay in an active state?
[code=html]<!DOCTYPE html>
<html>
<head>
<title>RapidCharge</title>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>
<style>
* {margin:0;}
html{margin:0;padding:0;height:100%;}
body{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#333;background:url(images/bg_rc.png) repeat-x top center transparent;background-color:#FFF;margin:0;padding:0;}
img{border:none}
#nav{list-style:none;float:right;width:715px;height:52px;margin:0;padding:0;}
#nav li{float:left;padding:0;}
#nav li:hover{position:relative}
#nav a{overflow:hidden;float:left;width:141px;height:52px;text-decoration:none;}
#nav .btn-home{margin-right:2px;background-color:#006600;}
#nav .btn-about{margin-right:2px;background-color:#006600;}
#nav .btn-products{margin-right:2px;background-color:#006600;}
#nav .btn-hiw{margin-right:2px;background-color:#006600;}
#nav .btn-contact{margin-right:2px;background-color:#006600;}
#nav li:hover .btn-home{margin-right:2px;background-color:#009999;}
#nav li:hover .btn-about{margin-right:2px;background-color:#009999;}
#nav li:hover .btn-products{margin-right:2px;background-color:#009999;}
#nav li:hover .btn-hiw{margin-right:2px;background-color:#009999;}
#nav li:hover .btn-contact{background-color:#009999;}
#nav .drop{width:141px;position:absolute;top:52px;left:0;display:none}
#nav .drop ul{border-bottom:1px solid #FFF;background-color:#4b4b4b;list-style:none;position:relative;margin:0;padding:0}
#nav .drop li{float:none;position:static;vertical-align:top;line-height:20px;width:100%;margin:0;padding:0}
#nav .drop li:first-child{background:none;border:none}
#nav .drop li a{color:#FFF;border-top:1px solid #FFF;float:none;display:block;height:auto;overflow:hidden;position:relative;z-index:20;padding:0;background-color:#4b4b4b;}
#nav .drop li:hover a,.rc-nav .drop li a:hover{text-decoration:none;background-color:#6a6a6a;}
#nav .drop li a .text{overflow:hidden;border:none;color:#FFF;cursor:pointer;padding:8px 5px 4px 13px;text-align:left;font-family:Verdana, Arial, Helvetica, sans-serif;}
#nav .drop li:hover .text,.rc-nav .drop li a:hover .text{color:#f98a1f}
#nav li:hover .drop,.rc-nav .drop li span{display:block}
</style>
</head>
<body>
<div class=”rc-nav”>
<ul id=”nav”>
<li>
<span id=”home”><a class=”btn-home” href=”#”></a></span></li>
<li>
<span id=”about”><a class=”btn-about” href=”#”></a></span>
<!–drop–>
<div class=”drop”>
<ul id=”subNav”>
<li><a href=”#”><span style=”cursor:pointer;” class=”text”>Blah Blah</span></a></li>
<li><a href=”#”><span style=”cursor:pointer;” class=”text”>Blah Blah</span></a></li>
</ul>
</div>
</li>
<li>
<span id=”products”><a class=”btn-products” href=”#”></a></span>
<!–drop–>
<div class=”drop”>
<ul id=”subNav”>
<li><a href=”#”><span style=”cursor:pointer;” class=”text”>Blah Blah</span></a></li>
</ul>
</div>
</li>
<li>
<span id=”howitworks”><a class=”btn-hiw” href=”#”></a></span>
<!–drop–>
<div class=”drop”>
<ul id=”subNav”>
<li><a href=”#”><span style=”cursor:pointer;” class=”text”>Blah Blah</span></a></li>
<li><a href=”#”><span style=”cursor:pointer;” class=”text”>Blah Blah</span></a></li>
<li><a href=”#”><span style=”cursor:pointer;” class=”text”>Blah Blah</span></a></li>
</ul>
</div>
</li>
<li>
<span id=”contact”><a class=”btn-contact” href=”#”></a></span>
</li>
</ul>
</div>
</body>
</html>