How do I disable hover for a link ? I'm using li:hover

Question

I'm trying to disable the hover functionality for a menu.
I want it to be enabled only under certain conditions.
I've tried using $(".ulColor").removeClass('hover');, but that hasn't worked
The CSS code for enabling the hover is :

li:hover ul, li.over ul { display: block; }

Here is the HTML DIV inside which the menu resides -

<div id="pColorSelectorDiv" class="parentOfAll">  
    <ul id="colorNav" class="ulColor">  
        <li id="liColorNav" ><a id="colorSelected" class="firstAnchorChild">Colors</a>  
            <ul id="ulColorChild" class="ulColor">  
                <li><a id="bkgColor-1" class="bkgColor-1 anchorClass" name="colorPallete" onclick="colorPicked('1');">COLOR</a></li>  
                <li><a id="bkgColor-2" class="bkgColor-2 anchorClass" name="colorPallete" onclick="colorPicked('2');">COLOR</a></li>   
               <li><a id="bkgColor-3" class="bkgColor-3 anchorClass" name="colorPallete" onclick="colorPicked('3');">COLOR</a></li>   
           </ul>  
        </li>  
    </ul>  
</div>

Here is the rest of the CSS code :

div[id="pColorSelectorDiv"] ul {
margin: 0;
padding: 0;
list-style: none;
width: 50px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

div[id="pColorSelectorDiv"] ul li {
position: relative;
}

.firstAnchorChild{
display: block;
text-decoration: none;
color: #777;
background: White; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
cursor: pointer;
}

li ul {
position: absolute;
left: 49px; /* Set 1px less than menu width */
top: 0;
display: none;
background: White;
}

/* Styles for Menu Items */
.anchorClass{
display: block;
text-decoration: none;
color: #777;
background: White; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
cursor: pointer;
}

.bkgColor-1 {background: #00FFFF; color: #00FFFF;}
.bkgColor-2 {background: #0000FF; color: #0000FF;}
.bkgColor-3 {background: #7FFF00; color: #7FFF00;}

Answer 1

I think you want

li.hover:hover ul { display: block; }

instead of

li:hover ul, li.over ul { display: block; }

Now this style will affect ul only when li is hovered and has hover class.

A simplified example.

PS You might also benefit from using 'code sample' button on edit form (the one with zeroes and ones) to format your code. Among other things, it'll preserve indentation (and thus increase readability). The key combination is ctrl+K. I've edited one of your code samples to demonstrate it.