Menu angolato CSS con gradiente in corrispondenza del numero a discesa

Question

Ho un menu ad angolo che presenta una sfumatura al di sotto che continua fino al bordo superiore. Ho anche una sottotabella con una sfumatura diversa che scorre sotto il gradiente del navigatore principale. Tutto sembra a posto, ma quando provi a scorrere verso il basso per selezionare dal menu secondario, non ti lascerà e passerà alla voce successiva nel menu principale. So che questo è un problema di z-index, ma non riesco a capire come farlo sembrare e funzionare correttamente.

Grazie in anticipo per qualsiasi luce, puoi risolvere questo problema !!!

ce l'ho su 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

due soluzioni:

migliore:

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

Un altro:

JSFiddle.

ho impostato #cssmenu > ul, #cssmenu > ul li, #cssmenu > ul li a a tutti ho width: 90px; invece di width: 610px;

E poi ho aggiunto questi due:

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

Orso con me qui: sto impostando la subnav li e a per essere 610px e impostare il livello di navigazione superiore su 90px a meno che non sia al passaggio del mouse, quindi è impostato su 610px.

Il problema prima era che la navigazione di livello superiore è stata sovrapposta alla subnav, perché erano tutti insieme a quella troppo largo

Ma a causa di CSS-trasformazioni E 'animare la crescita da 90px a 610px;

Answer 2

L'ho risolto rendendo la grafica di sfondo trasparente in cui si trova il gradiente colorato. Quindi sembra che sia dietro, ma in realtà è in cima. Grazie per l'aiuto!

Answer 3

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

Questo dà tutte le voci di menu che non sono aleggiavano un z-index di -101. Il che significa che quando si è al passaggio del mouse non ha più uno z-index di -101 che lo rende sopra il sottomenu, ma gli altri che non sono aleggiati saranno ancora al di sotto del sottomenu e non possono essere spostati da lì.

Risolve il problema e sembra ancora fantastico.

Quel menu sembra fantastico;)