我已经开发了一个下拉中的CSS菜单,但它似乎没有在Safari可以工作,但在其他浏览器的作品,可能有人看到一个问题的代码?
它是使用简单的CSS shoulden't会造成任何问题
#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;
}