- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
我有一个 Angular 菜单,它下面有一个渐变,一直延伸到上边缘。我还有一个子导航,它具有在主导航渐变下方运行的不同渐变。一切看起来都不错,但是当您尝试滚动以从子菜单下拉菜单中进行选择时,它不会让您转到主菜单上的下一个元素。我知道这是一个 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"> setting up your robot</a>
</li>
<li class='subcustomers'><a href="#1" title="Link 1"> driving instructions</a>
</li>
</ul>
</li>
<li class='contacts'><a href="#" title="Link 5">contacts</a>
</li>
</ul>
最佳答案
两种解决方案:
更好的一个:
#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 转换,它正在动画地从 90px 增长到 610px;
关于在下拉问题下带有渐变的 CSS Angular 菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15169120/
我使用 jQuery 已经有一段时间了,但我不知道如何从一个渐变渐变到另一个渐变。我一直在用 http://www.colorzilla.com/gradient-editor/对于我的渐变。例如 b
为了使用 jni 帮助程序库运行测试,我将这样的代码添加到 build.gradle 中: def jniLibDir = "xxx" tasks.withType(Test) { syste
我正在从命令行运行 wsimport 以从 WSDL 生成 java 类,如下所示。 wsimport -J-Djavax.xml.accessExternalDTD=all -J-
我们有一个重复使用第3方 war 的项目(如果有人要求,则为shindig-server-2.0.2.war :)。这场 war 目前位于项目根目录中,当前的ant任务将其解压缩到temp文件夹中,进
我有一个边界框,其坐标由(x,y,w,h)给出,其中x和y是框的左上角坐标。我想在盒子外面应用模糊或渐变。如何使用上面的坐标创建蒙版,并使用类似于下图的PIL或cv2在蒙版之外应用此效果? 最佳答案
考虑情况http://codepen.io/anon/pen/JdGYBN 我需要在拖动元素时动态更改卡片“可拖动”的背景颜色。 但是卡片的背景应该根据线条的渐变颜色而变化。 background:
我现在有这种情况:JSFIDDLE 我想实现这种效果,但我希望文本可以在渐变后面选择,并且即使我将鼠标放在文本上也可以滚动文本。 是否有任何解决方法可以使用 javascript 来改变滚动时文本的不
这段代码是我从css graident generator得到的,渐变底部是透明的 background: -moz-linear-gradient(top, rgba(248,246,247,1)
我必须使用 CSS 完成以下图像: 这是一张包含主导航的图像。所以我为此写了一些 CSS(我知道不是正确的颜色代码): #menu-block { background: #730868; b
是否可以使用渐变作为渐变中的一种颜色? 为了我的特定目的,我有一个从左到右的初始渐变: linear-gradient(to right, red, darkgray); 但我希望深灰色部分实际上是从
我这辈子都想不通为什么 transition 属性在我的 CSS 中不起作用。这是代码: #header #menu-top-nav ul li a { -webkit-transition:
我一直在寻找像下图中那样的多组件日期选择器,但在 Github 或其他地方找不到任何东西。 所以我决定做一个。我在实现 CSS 时遇到问题,它在顶部和底部淡出。 我想过在容器中使用:before和:a
我正在寻找与下图等效的 css。我正在使用多个停止点,但很难获得硬停止点 solid 2px white 边框。如果我添加它,它看起来像是一个渐变而不是硬边。任何帮助都会很棒,谢谢! .stripes
我的广告部门给了我一些图像,将其放在网站上的选项卡等。但是我确信这会减慢页面的呈现速度。所以我想我会用 css 来做。然而,经过几次试验,我无法接近以下图像。对于这两张图片,我将不胜感激。 请删除这个
我试图在将鼠标悬停在 div (id="above") 上时更改 body 的背景图像/渐变,我按照他们在另一篇文章 (http://stackoverflow.com/questions/14623
我正在测试所有浏览器的渐变兼容性,我发现渐变在 FireFox 上有不同的效果。请允许我演示测试。 代码 body{
当我使用渐变时,当内容很少时,渐变会重复出现,我该如何防止这种情况发生? http://jsfiddle.net/mcqpP/1/ 我可以尝试使用 html { height: 100%; },但是当
我有一个导航栏,它的背景颜色略深。我想要一个从中心到左右两侧的渐变,以便导航栏最右边和最左边的位达到背景颜色。这可能吗? -->
我在 Firefox 中使用了这个 CSS 线性渐变,但在 Safari 和其他浏览器中似乎无法获得相同的结果。它是联系字段的纸状背景。我试过整个 body 和一个特定的元素,这种风格似乎只适用于 F
我有这行代码 背景:线性渐变(341deg, #8a8a8a 0%, #8a8a8a 31.9%, #000 32.1%, #000 100%); 如您所见,它一半是灰色一半是黑色。有没有办法让它的灰
我是一名优秀的程序员,十分优秀!