Question

I’ve checked my ul li’s and they seem to be written correctly but for some reason my links in my navigation menu only work in firefox and not in safari.Im fairly new to css, I also apologize if I have the format for inputting code here wrong, this is my first time asking.Thanks!

This is my 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>

And this is my 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

I created this demo of your site in jsFiddle and opened it in Safari. Then I inspected it with the DOM developer tools.

Your div called #slideshow is totally covering your menu, thereby blocking the ability to click the links.