CSS-меню с градиентом в раскрывающемся списке

Question

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

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

Я его на 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

Два решения:

Лучше один:

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; 
} 

медведь со мной здесь: я устанавливаю subnav li и a должен быть 610px, и установление верхнего уровня nav должно быть 90px, если оно не зависает, тогда оно установлено на 610px.

Проблемы до того, что верхний уровень навигация была перекрытие subnav, потому что они все готовы к тому, что слишком широкого

Но из-за CSS-преобразования это анимировать рост от 90 пикселей до 610px;

Answer 2

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

Answer 3

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

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

Он исправляет проблему, и она по-прежнему выглядит потрясающе.

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