下拉不能在Safari下工作
问题描述:
我已经在CSS中开发了一个下拉菜单,但它似乎并不工作在Safari,但工作在其他浏览器,任何人都可以看到代码中的问题。
I have developed a drop down menu in CSS, but it doesn't seem to be working in Safari, yet works on every other browser, could anybody see an issue in the code?
它使用简单的CSS,不会导致任何问题
It is using simple CSS that shoulden't be causing any issues
#nav {
position:relative;
margin:0 auto;
}
ul#navigation {
}
ul#navigation li {
display:inline;
float:left;
position:relative;
}
ul#navigation li a {
]}
ul#navigation li a:hover {
}
ul#navigation li:hover > a {
}
/* Drop-Down Navigation */
ul#navigation li:hover > ul
{
visibility:visible;
opacity:1;
}
ul#navigation ul, ul#navigation ul li ul {
list-style: none;
margin: 0;
padding: 0;
visibility:hidden;
position: absolute;
z-index: 99999;
width:180px;
background-image: linear-gradient(bottom, rgb(64,119,149) 28%, rgb(64,119,149) 32%, rgb(83,153,186) 85%);
background-image: -o-linear-gradient(bottom, rgb(64,119,149) 28%, rgb(64,119,149) 32%, rgb(83,153,186) 85%);
background-image: -moz-linear-gradient(bottom, rgb(64,119,149) 28%, rgb(64,119,149) 32%, rgb(83,153,186) 85%);
background-image: -webkit-linear-gradient(bottom, rgb(64,119,149) 28%, rgb(64,119,149) 32%, rgb(83,153,186) 85%);
background-image: -ms-linear-gradient(bottom, rgb(64,119,149) 28%, rgb(64,119,149) 32%, rgb(83,153,186) 85%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.28, rgb(64,119,149)),
color-stop(0.32, rgb(64,119,149)),
color-stop(0.85, rgb(83,153,186))
);
box-shadow:1px 1px 3px #ccc;
opacity:0;
-webkit-transition:opacity 0.2s linear, visibility 0.2s linear;
-moz-transition:opacity 0.2s linear, visibility 0.2s linear;
-o-transition:opacity 0.2s linear, visibility 0.2s linear;
transition:opacity 0.2s linear, visibility 0.2s linear;
}
ul#navigation ul {
top: 43px;
left: 1px;
}
ul#navigation ul li ul {
top: 0;
left: 181px;
}
ul#navigation ul li {
clear:both;
width:100%;
border:0 none;
}
ul#navigation ul li a {
background:none;
padding:7px 15px;
color:#ffffff;
text-decoration:none;
display:inline-block;
border:0 none;
float:left;
clear:both;
width:150px;
font-size: 12px;
font-family: Tahoma;
}
ul#navigation ul li a:hover {
background:none;
padding:7px 15px;
color:#ffffff;
text-decoration:none;
display:inline-block;
border:0 none;
float:left;
clear:both;
width:150px;
font-size: 14px;
font-family: Tahoma;
}
ul#navigation li a.first {
border-left: 0 none;
}
ul#navigation li a.last {
border-right: 0 none;
}
答
尝试重置css您还可以执行以下操作: http://meyerweb.com/eric/tools/css/reset/
Try to reset the css before you do anything else: http://meyerweb.com/eric/tools/css/reset/