CSS菜单下拉和Z-Index

时间:2012-05-15 05:52:28

标签: css internet-explorer z-index drop-down-menu

好的,我有两个问题。

注意:CSS将发布在我遇到的两个问题之下。

问题#1 - 我有一个由CSS组成的下拉菜单,但我无法弄清楚如何向它们添加项目符号。当我在Internet Explorer中出于某种原因制作#nav .li {list-style:disc; list-style-position:inside;}时,光盘出现在列表上方,而在Chrome中它们出现在列表的左侧文字叹息 IE

问题#2 - 好的,出于某种原因,在Internet Explorer中(再次)当Z-index与border-radius配对时,他们不想工作。这有什么有效的解决方法吗?我已经尝试过搜索所有内容,IE 9本来应该解决这个问题但是我们都知道,在尝试制作包含任何类型CSS3的网站时,IE总是很痛苦。

导航菜单的CSS代码

/* THE CSS MENU * KEEP COLORS:#1B1B1B, #808080, #282828, #FFD100*/

#nav {float:left;margin:0;padding:0;}
#nav li .sub {list-style-image:disc;list-style-position:inside;}
#nav li a, #nav li {float:left;/*border-radius: 40px 0 / 40px 0;*/}
#nav li {list-style:none;position:relative;z-index:100;}
#nav li a {padding: 8px 1.5em;text-decoration:none;color:white;border-right:1px solid #808080;border-left:1px solid #404040;border-top:1px solid #404040;
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#808080), to(#1B1B1B));
   background: -webkit-linear-gradient(top, #808080, #1B1B1B); 
   background: -moz-linear-gradient(top, #808080, #1B1B1B);
   background: -ms-linear-gradient(top, #808080, #1B1B1B);
   background: -o-linear-gradient(top, #808080, #1B1B1B);
   filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#808080', endColorstr='#1B1B1B'); /* IE6 & IE7 */
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#808080', endColorstr='#1B1B1B')"; /* IE8 */
   box-shadow: inset 3px 3px 15px #404040;
}
#nav li a:hover {background:#282828;color:#FFD100;
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#808080), to(#000));
   background: -webkit-linear-gradient(top, #808080, #000); 
   background: -moz-linear-gradient(top, #808080, #000);
   background: -ms-linear-gradient(top, #808080, #000);
   background: -o-linear-gradient(top, #808080, #000);
   filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#808080', endColorstr='#000000'); /* IE6 & IE7 */
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#808080', endColorstr='#000000')"; /* IE8 */
   box-shadow: inset 3px 3px 15px #000;
}
/* SUBMENU */
#nav li ul {display:none;position:absolute;left:0;top:100%;padding:0;margin:0;}
#nav li:hover > ul {display:block;z-index:100;}
#nav li ul li, #nav li ul li a {float:none;}
#nav li ul li a {width:150px;display:block;}

/* SUB SUB MENU */

#nav li ul li ul {display:none;}
#nav li ul li:hover ul {left:100%;top:0;}

这是两个图像的CSS代码,它们应该有圆角边框但不在IE中

#main-bottom {width:1030px;height:40px;margin:0 auto;position:absolute;z-index:2;left:-20px;bottom:-15px;box-shadow: 0 3px 10px #000;border-top-left-radius:60px;border-top-right-radius:60px;
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1B1B1B), to(#808080));
   background: -webkit-linear-gradient(top, #1B1B1B, #808080); 
   background: -moz-linear-gradient(top, #1B1B1B, #808080);
   background: -ms-linear-gradient(top, #1B1B1B, #808080);
   background: -o-linear-gradient(top, #1B1B1B, #808080);
   filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#1B1B1B', endColorstr='#808080'); /* IE6 & IE7 */
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#1B1B1B', endColorstr='#808080')"; /* IE8 */
}
#post-footer-bottom {width:1030px;height:40px;margin:0 auto;position:relative;z-index:2;top:80px;box-shadow: 0 -3px 10px #000;border-bottom-left-radius:60px;border-bottom-right-radius:60px;
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#808080), to(#1B1B1B));
   background: -webkit-linear-gradient(top, #808080, #1B1B1B); 
   background: -moz-linear-gradient(top, #808080, #1B1B1B);
   background: -ms-linear-gradient(top, #808080, #1B1B1B);
   background: -o-linear-gradient(top, #808080, #1B1B1B);
   filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#808080', endColorstr='#1B1B1B'); /* IE6 & IE7 */
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#808080', endColorstr='#1B1B1B')"; /* IE8 */
}

0 个答案:

没有答案