Simplet problem med länkar html/css

#navigation {width:150px; font-size:16px;}

#navigation {width:150px; font-size:16px; font-family: sans-serif; font-weight:bold;}
#navigation ul {margin:0px; padding:0px; background-color:#00232f;}
#navigation ul li {
height:25px;
line-height:25px;
list-style:none;
padding-left:10px;
color:#FFF;
cursor:pointer;
text-decoration: 0;
}
#navigation ul li:hover {color: #dd013f; position:relative;}
#navigation ul li:a {color :#FFF; border: 0px; text-decoration:none;}

<div id="navigation">
<ul>
<li><a href="hej.html">• Startsida</a></li>
<li><a href="hej.html">• Tid</a></li>
</ul>
</div>

Tror du har missförstått det med hur HTML och CSS hänger ihop. Med följande CSS-rad:
#navigation ul { ... }
anger man vad som ska hända med elementet ul. Ett element är alltså en tagg i HTML som börjar med ett sånt här tecken: <

Till exempel <ul> och <a> är element. Det du vill i det här fallet är att sätta stil på elementet <a>. Men du har skrivit #navigation ul li:a vilket alltså är CSS för elementet <li>, inte elementet <a>.

Prova att istället skriva CSS (du ville ändra color och text-decoration) för #navigation ul li a på det här sättet:
#navigation ul li a { color: #fff; text-decoration: none; }

Det finns för övrigt ingen giltig CSS som ser ut som li:a utan det du menar var nog att ange en alternativ stil för länken när man hovrar (för muspekaren) över den. Det gör man med a:hover (uttalas "havver", med kort a).