Question

I found a menu sample, and want to use it in my site. When mouse enter menu item, its style changes, but when mouse leave menu item, its style is as previous style. User doesn’t see which menu item is selected.
It is css code part:

  .navigation ul#topnav li{
        width:auto;
        float:left;
        padding:0;
        position:relative;
    }
    .navigation ul#topnav li a{
        color:#fff;
        background-color:inherit;
        padding:0 7px;
        text-align:center;
        display:block;
        border-left:5px solid transparent !important;
        border-right:5px solid transparent !important;
        position: relative;
        z-index: 50;
    }
    .navigation ul#topnav li a:hover{
        color:#824d97;
        background-color:inherit;
        background:url(../images/nav-hover-bg.png) repeat-x 0 0 !important;
        border-left:5px solid #6c1b93 !important;
        border-right:5px solid #6c1b93 !important;
    }

I want when mouse leave menu item after click, its style to be shown as hover, and user see which item is selected.

Answer 1

Update your third CSS selector to something like:

.navigation ul#topnav li a:hover, .navigation ul#topnav li a.selected {

…so that those settings apply both to the <a> being hovered over and any <a> with the class “selected”. Or if you want the clicked link to have some variation on the hover styles add .navigation ul#topnav li a.selected { as a separate entry.

Then in your JS code when a link is clicked you add the “selected” class to it and remove the class from any others:

$("#topnav li a").click(function() {
    // whatever else you do on click, then

    $(this).addClass("selected");
    $("#topnav li a").not(this).removeClass("selected");
});

EDIT: Place that code in a $(document).ready() handler or in a script block at the end of the page.

Working demo: http://jsfiddle.net/VFJ7c/

Note: I was assuming (and I think the other answers assumed) that your menu was loading content via Ajax or showing and hiding existing content. If your menu has standard links that reload the entire page then this won’t work and you’ll need to either apply the “selected” class to the appropriate link in your server-side code or otherwise do it on DOM-ready rather than on click.