css - 下拉问题下带有渐变的CSS角度菜单

Question

我有一个倾斜的菜单，它下面有一个渐变，一直延伸到上边缘。我还有一个子导航，它具有不同的渐变，在主导航的渐变下方运行。一切看起来都不错，但是当您尝试滚动以从子菜单下拉菜单中进行选择时，它不会让您进入主菜单上的下一个项目。我知道这是一个 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>

score 0 · Accepted Answer

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

这为所有未悬停的菜单项提供z-index-101。这意味着当一个悬停时，它不再具有z-index-101 使其位于子菜单上方，但其他未悬停的仍将位于子菜单下方，并且不能从那里悬停。

它解决了问题，而且看起来仍然很棒。

那个菜单看起来棒极了；）

score 0 · Accepted Answer

两种解决方案：

更好的一个：

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

另一个：

JSF中。

我将#cssmenu > ul, #cssmenu > ul li,设置#cssmenu > ul li a为 all havewidth: 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;
}

在这里忍受我：我将子导航设置为 610px，li并将a顶级导航设置为，90px除非它悬停，然后设置为610px.

之前的问题是顶级导航与子导航重叠，因为它们都设置得太宽了

但是由于 css-transformations 它的动画从 90px 到 610px 的增长；

score 0 · Accepted Answer

I fixed it by making the background graphics transparant where the colored gradient lies. So it looks like it is behind but is in reality on top. Thanks for your help!

css - 下拉问题下带有渐变的CSS角度菜单

3 回答 3

Related

Reference