Навигационные ссылки, работающие в firefox, но не сафари

Question

Я проверил свои ul li, и они, похоже, написаны правильно, но почему-то мои ссылки в моем навигационном меню работают только в firefox, а не в safari.Im довольно новичок в css, Я также извиняюсь, если у меня есть формат ввода кода здесь неправильно, это мой первый запрос. Спасибо!

Это мой HTML

<div id="container"> <a href="index.html"><img id="logo" src="img/yupi.png" width="300" /></a> 

<div id="navigation"> 

<ul> 
<li> <a href="http://www.facebook.com"> Home </a> </li> 
<li> <a href="about.html"> About </a> </li> 
<li> <a href="products.html"> Products </a> </li> 
<li> <a href="contact.html"> Contact </a> </li> 
</ul> 
</div> 
<div class="clear"> 
</div> 
<div id="slideshow"> 
<div class="active"> 
    <img src="img/city1.jpg" alt="Slideshow Image 1" /> 
    </div> 

<div> 
    <img src="img/city2.jpg" alt="Slideshow Image 2" /> 

</div> 

<div> 
    <img src="img/city3.jpg" alt="Slideshow Image 3" /> 

</div> 

<div> 
    <img src="img/city4.jpg" alt="Slideshow Image 4" /> 

</div> 

И это мой CSS

* {margin:0px; 
padding:0px; 
} 
body {background-color:#00457D; 
} 
#container { 
height:1000px; 
width:1100px; 
background-color:#FFF; 
margin:0px auto; 
-moz-box-shadow: 0 0 10px 3px #272727; 
-webkit-box-shadow: 0 0 10px 3px #272727; 
} 
#logo { 
padding-left:20px; 
padding-top:50px; 
} 
#navigation { width:500px; 
font-family:'Josefin Sans', Sans Serif; 
font-size:25px; 
margin-left:690px; 
margin-top:-40px; 
} 
#navigation ul { list-style-type:none; 
} 
#navigation ul li { 
border-right:solid #9C9E9F 1px; 
float:left; 
padding:0px 10px 0px 10px; 
} 
#navigation ul li a { 
text-decoration:none; 
color:#9C9E9F; 
} 
#navigation ul li a:hover { 
color:#00457D; 
} 
#navigation li:last-child { 
border-right:none; 
} 
.clear { clear:both; 
} 
#slideshow { 
position:relative; 
height:450px; 
width:1100px; 
} 
#slideshow DIV { 
position:absolute; 
top:0; 
left:0; 
z-index:8; 
opacity:0.0; 
height: 100%; 
width:100%; 
background-color: #000; 
margin-left:0px; 
margin-top:50px; 
} 
#slideshow DIV.active { 
z-index:10; 
opacity:1.0; 
} 
#slideshow DIV.last-active { 
z-index:9; 
} 
#slideshow DIV IMG { 
height: 450px; 
width:1100px; 
display: block; 
border: 0; 
margin-bottom: 10px; 
} 

Answer 1

Я создал this demo of your site in jsFiddle и открыл его в Сафари. Затем я осмотрел его с помощью инструментов разработчика DOM.

Ваш div под названием #slideshow полностью закрывает ваше меню, тем самым блокируя возможность щелчка по ссылкам.

Answer 2

Обновление a тега соответственно:

#navigation ul li a { 
text-decoration:none; 
color:#9C9E9F; 
display:block; 
} 

по плавающому li вы рушитесь его высоту. Это должно сделать трюк. Вы также можете добавить дополнение к правилу стиля a, чтобы мышь превращалась в указатель не только по тексту.