CSS Miss-click helper

HTML

<ul class="menu">
    <div class="inner">
        <li class="item">
            <a href="#1">Item 1</a>
            <ul class="submenu">
                    <li>
                        <a href="#1">Item 1.1</a>
                    </li>
                    <li>
                        <a href="#2">Item 1.2</a>
                    </li>
                    <li>
                        <a href="#3">Item 1.3</a>
                    </li>
                    <li>
                        <a href="#4">Item 1.4</a>
                    </li>
            </ul>
        </li>
        <li class="item">
            <a href="#2">Item 2</a>
            <ul class="submenu">
                    <li>
                        <a href="#1">Item 2.1</a>
                    </li>
                    <li>
                        <a href="#2">Item 2.2</a>
                    </li>
                    <li>
                        <a href="#3">Item 2.3</a>
                    </li>
                    <li>
                        <a href="#4">Item 2.4</a>
                    </li>
            </ul>
        </li>
        <li class="item">
            <a href="#3">Item 3</a>
            <ul class="submenu">
                    <li>
                        <a href="#1">Item 3.1</a>
                    </li>
                    <li>
                        <a href="#2">Item 3.2</a>
                    </li>
                    <li>
                        <a href="#3">Item 3.3</a>
                    </li>
                    <li>
                        <a href="#4">Item 3.4</a>
                    </li>
            </ul>
        </li>
        <li class="item">
            <a href="#4">Item 4</a>
            <ul class="submenu">
                    <li>
                        <a href="#1">Item 4.1</a>
                    </li>
                    <li>
                        <a href="#2">Item 4.2</a>
                    </li>
                    <li>
                        <a...

CSS

* {
    padding: 0;
    margin: 0;
    line-height: 1;
}

li {
    list-style: none;
}

.menu {
    margin: 50px;
}

.menu, .submenu{
    display: block;
    width: 300px;
    position: relative;
}

.menu .item {

}

.submenu{
    position: absolute;
    left: 100%;
    top: 0;
    bottom: 0;
    display: none;
}

.menu a{
    display: block;
    padding: 10px 30px 10px 10px; 
    background: #eee;
    color: #000;
    border-bottom: 1px solid #555;
    position: relative;
}


.item:nth-child(2n) a{ background: #ffcccc; } /*for demo only*/


.menu a:hover{
    background: #f55;
}

.menu .item:hover .submenu{
    display: block;
}

.menu .item > a:before, .menu .item > a:after{
    content: " ";
    position: absolute;
    display: block;
    visibility: hidden;
    background: #0f0;
    opacity:0.7;
    width: 80%;
    height: 100%;
    top: 0;
    right: -10px;
    z-index: 999;
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}

.menu .item > a:before{
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
    bottom: 0%;
    top: auto;
}

.menu .item > a:hover:before,.menu .item > a:hover:after {
    -moz-transition: height 8s linear, top 0.5s linear,bottom 0.5s linear;    
    -webkit-transition: height 8s linear, top 0.5s linear,bottom 0.5s linear;
    transition: height 8s linear, top 0.5s linear,bottom 0.5s linear;
    height: 0px;
    visibility: visible;
    top: 50%;
}

.menu .item > a:hover:before{
    bottom: 50%;
    top: auto;
}