CSS-меню под углом с выпадающим меню

Question

У меня есть угловое меню с градиентом, который продолжается вплоть до верхнего края. У меня также есть subnav, у которого есть другой градиент, который бежит под градиентом главной навигации. Все выглядит правильно, но когда вы пытаетесь перевернуться, чтобы выбрать из выпадающего подменю, он не пропустит вас и перейдет к следующему пункту в главном меню. Я знаю, что это проблема z-индекса, но я не могу понять, как заставить его выглядеть и функционировать правильно.

Заранее спасибо за любой свет, который вы можете пролить на эту проблему!!!

У меня есть это на jsfiddle: http://jsfiddle.net/jollyrogerd/EwFHY/3/

CSS:

    #cssmenu > ul {
    list-style: none;
    margin: -95px 0 0 0;
    padding: 0;
    line-height: 1;
    float: left;
    display:inline;
}
#cssmenu > ul {
    display: block;
    position: relative;
    width: 610px;
    -webkit-transform: rotate(-24deg);
    -moz-transform: rotate(-24deg);
    -o-transform:rotate(-24deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
#cssmenu > ul li {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 610px;
}
#cssmenu > ul li a {
    display: block;
    position: relative;
    margin: 0;
    padding: 8px 20px;
    width: 610px;
    font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    letter-spacing: .05em;
    color: #939598;
    text-decoration: none;
    text-transform: lowercase;
    font-size: 13px;
    font-weight: 300;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
#cssmenu > ul li.home>a:hover, #cssmenu > ul li.home:hover>a {
    color: #fff;
    background: #a2d062;
    background: -webkit-linear-gradient(bottom, #6e9b31, #a2d062);
    background: -ms-linear-gradient(bottom, #6e9b31, #a2d062);
    background: -moz-linear-gradient(bottom, #6e9b31, #a2d062);
    background: -o-linear-gradient(bottom, #6e9b31, #a2d062);
    border-color: transparent;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
#cssmenu > ul li.productsrev>a:hover, #cssmenu > ul li.productsrev:hover>a {
    color: #fff;
    background: #61c46e;
    background: -webkit-linear-gradient(bottom, #2b8a39, #61c46e);
    background: -ms-linear-gradient(bottom, #2b8a39, #61c46e);
    background: -moz-linear-gradient(bottom, #2b8a39, #61c46e);
    background: -o-linear-gradient(bottom, #2b8a39, #61c46e);
    border-color: transparent;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
#cssmenu > ul li.about>a:hover, #cssmenu > ul li.about:hover>a {
    color: #fff;
    background: #459cc7;
    background: -webkit-linear-gradient(bottom, #025e8e, #459cc7);
    background: -ms-linear-gradient(bottom, #025e8e, #459cc7);
    background: -moz-linear-gradient(bottom, #025e8e, #459cc7);
    background: -o-linear-gradient(bottom, #025e8e, #459cc7);
    border-color: transparent;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
#cssmenu > ul li.customers>a:hover, #cssmenu > ul li.customers:hover>a {
    color: #fff;
    background: #2e6dab;
    background: -webkit-linear-gradient(bottom, #09427a, #2e6dab);
    background: -ms-linear-gradient(bottom, #09427a, #2e6dab);
    background: -moz-linear-gradient(bottom, #09427a, #2e6dab);
    background: -o-linear-gradient(bottom, #09427a, #2e6dab);
    border-color: transparent;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
#cssmenu > ul li.contacts>a:hover, #cssmenu > ul li.contacts:hover>a {
    color: #fff;
    background: #6852a4;
    background: -webkit-linear-gradient(bottom, #3d2975, #6852a4);
    background: -ms-linear-gradient(bottom, #3d2975, #6852a4);
    background: -moz-linear-gradient(bottom, #3d2975, #6852a4);
    background: -o-linear-gradient(bottom, #3d2975, #6852a4);
    border-color: transparent;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
#cssmenu > ul ul {
    position: absolute;
    left: 120px;
    top: -9999px;
    padding-left: 0px;
    padding-top: 40px;
    opacity: 0;
    z-index: 1;
}
#cssmenu > ul ul.bgsubproducts { 
    background-image: url(http://dev.unnaturallygeisha.com/fellowrobots/wp-content/uploads/2013/02/square-gradient.png);
    background-repeat:no-repeat;
    overflow: visible;
    height: 200px;
    margin-top:-40px;
    margin-left: 0px;
    z-index:-100;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
}
#cssmenu > ul ul.bgsubabout { 
    background-image: url(http://dev.unnaturallygeisha.com/fellowrobots/wp-content/uploads/2013/02/square-gradient.png);
    background-repeat:no-repeat;
    overflow: visible;
    height: 200px;
    margin-top:-40px;
    margin-left: 0px;
    z-index:-100;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
}
#cssmenu > ul ul.bgsubcustomers { 
    background-image: url(http://dev.unnaturallygeisha.com/fellowrobots/wp-content/uploads/2013/02/square-gradient.png);
    background-repeat:no-repeat;
    overflow: visible;
    height: 200px;
    margin-top:-40px;
    margin-left: 0px;
    z-index:-100;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
}
#cssmenu > ul ul li a {
    color: #5d6064;
    background: transparent;
    z-index:1000;
}
#cssmenu > ul ul li.subproducts:hover>a {
    color: #2b8a39;
    background: transparent;
}
.subproducts {
    z-index:1000;
}
#cssmenu > ul ul li.subabout:hover>a {
    color: #025e8e;
    background: transparent;
}
#cssmenu > ul ul li.subcustomers:hover>a {
    color: #09427a;
    background: transparent;
}
 #cssmenu > ul li:hover>ul {
    top: 30px;
    opacity: 1;
}

HTML:

<div id='cssmenu'>
<ul>
    <li class='home'><a href="#" title="Link 1">home</a>

    </li>
    <li class='productsrev'> <a href="#" title="Link 3">products</a>

        <ul class="bgsubproducts">
            <li class='subproducts'><a href="#" title="Link 1">helo</a>

            </li>
</ul>
</li>
<li class='about'><a href="#" title="Link 3">about</a>

    <ul
    class="bgsubproducts">
        <li class='subabout'><a href="#1" title="Link 1">what's a telepresence robot?</a>

        </li>
        <li class='subabout'><a href="#1" title="Link 1">our team</a>

        </li>
        <li class='subabout'><a href="#1" title="Link 1">our robots</a>

        </li>
        <li class='subabout'><a href="#1" title="Link 1">our partners</a>

        </li>
        </ul>
</li>
<li class='customers'><a href="#4" title="Link 4">customers</a>

    <ul class="bgsubproducts">
        <li class='subcustomers'><a href="#1" title="Link 1">driving control panel</a>

        </li>
        <li class='subcustomers'><a href="#1" title="Link 1">instructions</a>

        </li>
        <li class='subcustomers'><a href="#1" title="Link 1">&nbsp;&nbsp;&nbsp;&nbsp; setting up your robot</a>

        </li>
        <li class='subcustomers'><a href="#1" title="Link 1">&nbsp;&nbsp;&nbsp;&nbsp; driving instructions</a>

        </li>
    </ul>
</li>
<li class='contacts'><a href="#" title="Link 5">contacts</a>

</li>
</ul>

Answer 1

Я исправил это, сделав фоновую графику прозрачной, где лежит цветной градиент. Похоже, что он позади, но на самом деле на высоте. Спасибо за вашу помощь!

Answer 2

#cssmenu > ul li:not(:hover) {
    z-index: -101;
}

Это дает все пункты меню, которые не зависли z-index -101. Это означает, что когда кто-то завис, у него больше нет z-index -101, что делает его выше подменю, но остальные, которые не отображаются, все равно будут ниже подменю и не могут быть выведены оттуда.

Это решает проблему и все равно выглядит потрясающе.

Это меню выглядит потрясающе;)

Answer 3

Два решения:

Лучше один:

JSFiddle

#cssmenu > ul > li.home:hover a,
#cssmenu > ul > li.productsrev:hover a,
#cssmenu > ul > li.about:hover a,
#cssmenu > ul > li.customers:hover a,
#cssmenu > ul > li.contact:hover a {
    z-index:501;
}
#cssmenu > ul > li.home > ul,
#cssmenu > ul > li.productsrev > ul,
#cssmenu > ul > li.about > ul,
#cssmenu > ul > li.customers > ul
#cssmenu > ul > li.contact > ul{
    z-index:500;
}

Другой:

JSFiddle.

Я поставил #cssmenu > ul, #cssmenu > ul li, #cssmenu > ul li a чтобы все имели width: 90px; вместо width: 610px;

А потом я добавил эти два:

#cssmenu > ul li ul li,
#cssmenu > ul li ul li a,
#cssmenu > ul >li:hover,
#cssmenu > ul >li:hover > a,
#cssmenu > ul >li > a:hover {
    width:610px;
}

Терпите меня здесь: я устанавливаю субнав li а также a быть 610px, и установить навигацию верхнего уровня, чтобы быть 90px если он не завис, то устанавливается 610px,

Раньше проблема заключалась в том, что навигация верхнего уровня перекрывала субнав, потому что все они были слишком широкими.

Но благодаря css-трансформациям он оживляет рост с 90 до 610 пикселей;