Подменю UL-LI появляется, когда моя мышь проходит над местом, где она должна появиться.

Извините за мой плохой английский. После нескольких часов попыток мое подменю UL/LI finaly появляется с переходом, но теперь у меня проблема. Когда мои мобы попадают под кнопку, появляется подменю.

→ здесь скрипка, только красная кнопка имеет подменю. Чтобы увидеть проблему, наведите указатель мыши на красную кнопку.

http://jsfiddle.net/AXLgx/2/

Здесь код:

    nav
    {
        height: 71px;
        width:1106px;
        margin-left: auto;
        margin-right: auto;
    }

    #horizontalmenu ul {
        padding:0px; 
        margin: 0px;
        list-style:none;
    }

    #horizontalmenu li {
        float:left; 
        width: 90px;
        height: 55px;
        position:relative; 

        display: inline-block;


        padding: 0px;
        margin: 0px;
    }

    #horizontalmenu li ul {
        width: 88px;
        padding:0px; 
        margin: 0px;
        opacity: 0;
        /*display:none;*/
        position:absolute;
        background:gray;
        border-left: 1px #2a2a2a solid; 
        border-right: 1px #2a2a2a solid; 
        border-bottom: 1px #2a2a2a solid; 
        transition: all .6s;

    }

    #horizontalmenu li:hover ul {



        display:block;
        width: 88px;
        height:auto; 
        /*width:90px;*/

        opacity: 0.9;



    }       




    #horizontalmenu li ul li{

        float: none; 
        position: static; 
        height: 40px; 
        line-height: 40px; 
        background: none; 
        padding: 2px;
        clear:both;
        text-align: center;
        width:88px;




    }
    #horizontalmenu li ul li a{


        /*display: block; PTET ICI */

        height: 40px; 
        font-size:12px;

        color: white;
        text-decoration: none;
        width:88px;



    }

    #horizontalmenu li:hover ul li { 

        width:88px;
        display: inline-block;
        padding: 2px;
        height: 40px; 
        line-height: 40px; 
        border-bottom: 2px #9f9f9f dotted;
        text-align: center;


    }

    #horizontalmenu li ul li:hover {

        background: #2a2a2a;

    }

    #horizontalmenu li ul li:hover a
    {

        position: static;
        height: 40px;
        display: inline-block;

    }

HTML 

<nav align="center">
    <span class="milieunav"><div class="horizontalmenu" id="horizontalmenu"><!--

    --><ul class="ulnav" id="menu"><li>

    <a href="#" class="b-accueil"></a></li><li class="libook">
        <a href="#" class="b-book"></a><!--
            --><ul class="sub-menu"><!--
                --><li><a href="#">Introduction</a></li><!--
                --><li><a href="#">Devenir Spades</a></li><!--
                --><li><a href="#">Regles et lois</a></li><!--
                --><li><a href="#">Grades</a></li><!--
                --><li><a href="#">Histoire</a></li><!--
            --></ul><!--
            --></li><li>
        <a href="#" class="b-commun"></a>
        </li><li>
        <a href="#" class="b-activite"></a>
        </li><li>
        <a href="#" class="b-bigben"></a>
        </li><li>
        <a href="#" class="b-bulle"></a>
        </li></ul><!--

    --></div></span><!--








    </nav>