Menu pod kątem CSS z gradientem pod listą rozwijaną

Question

Mam pod kątem menu, które ma pod nim gradient, który ciągnie się aż do górnej krawędzi. Mam również subnav, który ma inny gradient, który działa pod głównym gradientem nav. Wszystko wygląda dobrze, ale kiedy spróbujesz przewrócić, aby wybrać z menu podrzędnego, nie pozwoli ci i przejdzie do następnego elementu w menu głównym. Wiem, że jest to kwestia z-index, ale nie wiem, jak sprawić, by wyglądała i działała prawidłowo.

Z góry dziękuję za każde światło, które można rzucić na ten problem !!!

mam go na 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

dwa rozwiązania:

Lepszy jeden:

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

Inny:

JSFiddle.

ustawić #cssmenu > ul, #cssmenu > ul li, #cssmenu > ul li a wszystkim mają width: 90px; zamiast width: 610px;

A potem dodałem te dwa:

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

pokrywa się ze mną tutaj: Mam ustawienie subnav li i a Aby uzyskać 610 pikseli i ustawić najwyższy poziom nawigacji, aby był 90px, chyba że jest zawieszony, to jest ustawiony na 610px.

Problemem było to, że przed top nawigacja poziom został pokrywając subnav, ponieważ wszystkie były ustawione, że zbyt szeroki

Ale ze względu na transformacje CSS to animowanie wzrost od 90px do 610px;

Answer 2

Naprawiłem go, wykonując przezroczystość tła w miejscu, w którym znajduje się kolorowy gradient. Wygląda na to, że jest z tyłu, ale w rzeczywistości jest na wierzchu. Dzięki za pomoc!

Answer 3

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

Daje to wszystkie pozycje menu, które nie są zawieszone a z-index z -101. Oznacza to, że gdy się unosi, nie ma już z-index z -101, co sprawia, że ​​jest powyżej podmenu, ale pozostałe, które nie są zawieszone, nadal będą znajdować się pod podmenu i nie można ich tam ukryć.

Naprawia problem i nadal wygląda niesamowicie.

To menu wygląda niesamowicie;)