tabbed content with dropdown menu with jquery
<p>I am trying to crate a page with tabbed content. Couple of tabs have dropdown menus. I am creating this with li without href. Highlighting the li elements when I hover on them is happening only in the first instance after loading of the page. After that the page is behaving differently - not rendering the highlighting on hovering. Can any body suggest any remedy?</p>

<p>the codes are as follows:
HTML:</p>

<pre><code>&lt;ul class="tabs"&gt;
    &lt;li data-content="first" class="tab-link"&gt;First Tab&lt;/li&gt;
    &lt;li class="submenu-container"&gt; First Dropdown
        &lt;ul class="dropdown"&gt;
            &lt;li data-content="second" class="tab-link"&gt;Second Tab&lt;/li&gt;
            &lt;li data-content="third" class="tab-link"&gt;Third Tab&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class="submenu-container"&gt; Second Dropdown
        &lt;ul class="dropdown"&gt;
            &lt;li data-content="fourth" class="tab-link"&gt;Fourth Tab&lt;/li&gt;
            &lt;li data-content="fifth" class="tab-link"&gt;Fifth Tab&lt;/li&gt;
            &lt;li data-content="sixth" class="tab-link"&gt;Sixth Tab&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li data-content="seventh" class="tab-link"&gt;Seventh Tab&lt;/li&gt;
&lt;/ul&gt;

&lt;br&gt;
&lt;br&gt;
&lt;br&gt;
&lt;br&gt;

&lt;div class="selected" id="first"&gt;Contents of First Tab&lt;/div&gt;
&lt;div class="hidden" id="second"&gt;Contents of Second Tab&lt;/div&gt;
&lt;div class="hidden" id="third"&gt;Contents of Third Tab&lt;/div&gt;
&lt;div class="hidden" id="fourth"&gt;Contents of Fourth Tab&lt;/div&gt;
&lt;div class="hidden" id="fifth"&gt;Contents of Fifth Tab&lt;/div&gt;
&lt;div class="hidden" id="sixth"&gt;Contents of Sixth Tab&lt;/div&gt;
&lt;div class="hidden" id="seventh"&gt;Contents of Seventh Tab&lt;/div&gt;

&lt;script type="text/javascript"&gt;

    //$('li[data-content="first"').css({'background-color':'lightgrey'});    //This line keeps the first tab highlighted when the page is being loded 

    $(document).ready(function() {

    $('li[data-content="first"').css({'background-color':'lightgrey','margin-bottom' : '-2px'}); //This line keeps the first tab highlighted when the page is being loded 



    $('li').on('click', function(e) {

        //////first few lines control the change of color of the selected tab///////

        //removing the previous selected menu state
        $('li').css({'background-color':'#b2b2ff'});

         //is this element from the second level menu?
        if($(this).closest('ul').hasClass('dropdown')){
             $(this).parents('li').css({'background-color':'lightgrey' ,'margin-bottom' : '-2px'});


        //this is a parent element
        }else{
             $(this).css({'background-color':'lightgrey' ,'margin-bottom' : '-2px'});
        }

        /////////////code for controlling change of color of selected tab ends here ///////
        ///////////////////////////////////////////////////////////////////////////////////

        if ($(this).hasClass('submenu-container')) { //prevents any action when any of the top level menus having submenus is clicked
            e.preventDefault();
            return false;
        }

        if ($(this).parents().find('li').hasClass('submenu-container')){ //selects appropriate div element having content 
                                                                         //relevant to the menu selected    

            var data_content = $(this).attr('data-content');

                $('div').each(function(){
                        if($(this).attr('id') == data_content) {
                            $(this).addClass('selected');
                            }
                        else 
                            {
                            $(this).removeClass('selected');
                            $(this).addClass('hidden');
                        }

                    });

                e.preventDefault();
                return false;
            }

    }); //End $('li').on('click')

}); //End $(document).ready()
</code></pre>

<p></p>

<p>and the CSS is:</p>

<pre><code>.tabs {
list-style-type: none;
margin-bottom: 0;
}

.tabs &gt; li {
float: left;
margin: 1px;
height: 40px;
text-align: center;
line-height: 250%;
padding: 7px;
background-color: #b2b2ff;
}

.tabs &gt; li:hover {
background-color:#e5e5ff;
}

.dropdown {
display: none;
}

.tabs &gt;li:hover &gt; ul.dropdown {
list-style-type: none;
top: 7px;
left: -47px;    
position: relative;
display: block;
}

.tabs &gt;li:hover &gt; ul &gt; li {
background-color: #b2b2ff;
z-index: 100;
padding: 7px;
}

ul.dropdown &gt; li:hover {
background-color:#e5e5ff;
}


div {
padding: 100px;
}

.hidden {

clear: both;
display: none;

}

.selected {
clear: both;
display: block;
margin-top: -20px;
padding-left: 50px;
z-index: 0;
background-color: lightgrey;
height: 500px;
}
</code></pre>

<p>Thanks everyone.</p>