Float stopping links working

Hi, got a weird problem I can’t get my head round. I’m trying to learn some responsive design CSS and HTML, having created fixed sized sites until now.

I’m placing a logo top right, and a UL main menu below left.

For some reason, when I place the logo to the right using float:right in my CSS, the hyperlinks attached to the logo and menu stop showing as links. Float:left has the same problem. If I remove float entirely, it all works fine!

My HTML is

[CODE]<div class=”block_head”>
<div id=”logo”><a href=”index.php” target=”_self”><img src=”images/logo.gif” alt=”LSI Architects” /></a></div>

<ul class=”main_menu”>
<li><a href=”projmenu.php”>PROJECTS</a></li>
<li><a href=”pracmenu.php”>PRACTICE</a></li>
<li><a href=”commmenu.php”>COMMUNITY</a></li>
<li><a href=”contact.php”>CONTACT</a></li>
</ul>
</div>[/CODE]

My CSS is

[CODE].block_head {
text-align: left;
display: block;
margin: 2em 1em;
background: #0f0;
z-index: 1;
}

#logo {
background: #ff0;
position: static;
/*float: left; The problem! */
padding: 1em 0em;
z-index: 7;
}

.block_head ul {
display: block;
clear: both;
font-size: 1.5em;
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
background: #f00;
}

.block_head li { display: inline; }

.block_head li a {
float: left;
padding: 0.5em 2em 0.5em 0em;
color: #888;
font-family: Verdana;
background: #00f;
}[/CODE]

All references talk about z-index but this doesn’t seem to change things either…

Also in #CSS _↴