breakthrough design

Oftentimes, you find yourself creating dynamic CSS driven menus, embedded within lists. (See every site in our portfolio). The key to this is usually the following structure (simplified):


<ul>
<li><a href="somepage.html">Home</a><li>
<>ul>


The Problem
The problem is found when setting your <a> link as

display:block

, you’ll see that although it visually renders properly within IE, and mozilla firefox, opera, etc – you will notice that IE doesn’t allow you to click anywhere within the link? What? You say?

The solution
The solution is to set a position:relative on the <a>. Like so:


<style>
a {display:block; position:relative}
</style>


Enjoy!

UPDATE: The Final Code

The final CSS we used looked like this:

.dropdown {position:absolute; _width:250px; min-width:248px; z-index:9;}

.dropdown ul {margin:0px; padding:0px;}

.dropdown li {margin:0px;  _padding-bottom:1px;     /** This prevents the extra padding **/ display:block; position:relative /** This allows for block layout **/}

.dropdown a {display:block;position:relative;margin:0px;padding:4px 20px 4px 20px;}

.dropdown a:hover {background-color:#6c0125;}