How can i overwrite this style of jquery ui

I'm trying to overwrite the style of some element of jquery ui, this is my html

    <div class="menu ui-accordion-header ui-state-default ui-corner-all">
        <label class="formatText" id="lblIndicators">
            Cliente</label>
        <span class="ui-icon ui-icon-triangle-1-e menuIcon" style="float: right"></span>
        <div class="subMenu ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
            <ul class="opt开发者_StackOverflowions">
                <li>
                    <label class="formatText">
                        Ver Cliente</label>
                    <span class="ui-icon ui-icon-triangle-1-s" style="float: right"></span>
                    <div class="subMenuRight ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
                        <ul class="options">
                            <li>Por Nombre</li>
                            <li>Por Año de ingreso</li>
                        </ul>
                    </div>
                </li>
                <li>algo</li>
                <li>cualquier vaina</li>
            </ul>
        </div>
    </div>

note that the div has the follow classes menu ui-accordion-header ui-state-default ui-corner-all now i'm trying to overwrite the classes like this

.menu .ui-state-default
{
    width:120px;
    color: #FFFFFF;
    background: #003E6F;
    float:left;
}

.menu .ui-helper-reset
{
    width:120px;
    color: #FFFFFF;
    background: #003E6F;
    float:left;
}

.menu .ui-accordion-header
{
    width:120px;
    color: #FFFFFF;
    background: #003E6F;
    float:left;
}

.menu .ui-state-hover{
     border-width: 0;
    font-size: 12px;
    color: #003E6F;

}

.subMenu
{
    display:none;
    width:129px;
}

.subMenuRight
{
    display:none;
    width:120px;
    position:absolute;
    left:100%;
    top:0px;
}

Now my problem it's that first element div, doesn't get the override of the class. All the children divs works well. What i'm doing wrong??

This is my live demo

---

For your first CSS declaration, try using this instead:

.menu.ui-state-default, .menu .ui-state-default
{
    width:120px;
    color: #FFFFFF;
    background: #003E6F;
    float:left;
}

In your code, .menu .ui-state-default doesn't apply to the outermost div (<div class="menu ui-accordion-header ui-state-default ui-corner-all">) because that code is targeting elements with the class of ui-state-default within elements with a class of menu.

The first div has both classes so you would also need to use this .menu.ui-state-default to apply the styles to that div.

---

In theory you should just be able to put it into a stylesheet and have it work as long as you're linking your custom styles after wherever the jQuery UI styles are.

---

Your javascript doesn't do anything to change the div class. The main div has class menu, and the functions you bind to its events find the spans inside it and change their class.