CODEWITHSUNDEEP
cssdrop-down-menu
user3100533
user3100533

Reputation: 505

How can I keep CSS style select for menu item clicked

This is my HTML Code for menu

<div style="visibility:visible; color: #FFF; top:125px; width:100%; height:40px; position:absolute; display:block;background:#2B63B3;">
<ul id="trans-nav">
   <li><a href="#">Home</a></li>
   <li><a href="#">About us</a></li>
   <li><a href="#">Academic</a>
     <ul>
        <li> <a href="#">Sub Menu 1</a> </li>
        <li> <a href="#">Sub Menu 2</a> </li>
        <li> <a href="#">Sub Menu 3</a> </li>
     </ul>
   </li>
   <li><a href="#">Administration</a></li>
   <li><a href="#">Miscellanous</a>
     <ul>
       <li> <a href="#">Sub Menu 1</a> </li>
       <li> <a href="#">Sub Menu 2</a> </li>
     </ul>
   </li>
</ul>
</div>

This the CSS code for menu

#trans-nav { list-style-type: none; height: 40px; padding: 0px 15px; margin: 0px; }
#trans-nav li { float: left; width:110px; position: relative; padding: 0px; line-height: 40px; background: #2B63B3; text-align:center; }
#trans-nav li a { display: block; padding: 0 15px; color: #fff; text-decoration: none; }
#trans-nav li a:hover { color: #97B7E6; }
#trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #2B63B3; list-style-type: none; padding: 0; margin: 0;  z-index:1;}
#trans-nav li:hover ul { opacity: 1; }
#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#trans-nav li:hover ul li { height: 30px; line-height: 30px; }
#trans-nav li ul li a { background: #2B63B3; }
#trans-nav li ul li a:hover { background: #2B63B3; }

When I hover on any menu item color gets changed and when I click on item it navigates to the page but the the color of the text revert back to white. I want to keep the changed color till any other menu item is not clicked.

Any advice, suggestion or guidance is appreciable.

Thanking you all in advance

Upvotes: 0

Views: 315

Answers (1)

Andrew Ice
Andrew Ice

Reputation: 841

You can add a '.current' class to the anchor tag, via javascript. And give it those styles.

(Or if your nav is seperate on all pages just add it to the current pages nav, no need for js.)

Upvotes: 1

Related Questions