2
我在CSS中開發了一個下拉菜單，但它似乎並沒有在Safari中工作，但在任何其他瀏覽器上都能正常工作，任何人都可以在代碼中看到問題？下拉不能在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;
}
移除UL＃導航李方括號一個 – SVS
提交你的html＆css在www.jsfiddle.net – SVS
你聲明css不應該導致問題，但是它是導致這個問題的原因：1）你已經獲得ul＃navigation ul的聲明在聲明之後被隱藏使其可見（所以隱藏的聲明覆蓋可見的聲明），所以這是一個問題。 2）你不會爲ul＃navigation ul聲明頂部/左邊，3）使用'left'屬性顯示/隱藏列表可能比'visiblity'屬性更好：要隱藏，'left ：-999em;'，顯示，'left：0;' –