PURE CSS dropdown replacement

HTML

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<div class="dropdown">
<div class="toggle"><div></div></div>
<ul>
    <li>
        <input type="radio" name="sex" id="choose" value="" checked>
        <label onclick="" for="choose">choose</label>
    </li>
    <li>
        <input type="radio" name="sex" id="male" value="male">
        <label onclick="" for="male">Male</label>
    </li>
    <li>
        <input type="radio" name="sex" id="female" value="female">
        <label onclick="" for="female">Female</label>
    </li>
    <li>
        <input type="radio" name="sex" id="other" value="other">
        <label onclick="" for="other">Other</label>
    </li>
</ul>
</div>

CSS

body {
    margin:10px;
    font-family:arial;
}

.dropdown {
    width:130px;
    position:relative;
    overflow:visible;
    text-transform:capitalize;
    background-color:#ccc;
    border:1px solid #4C4C4C;
    border-radius:3px;
    height:1.6em;
    padding:2px;
    cursor:pointer;
}

.dropdown ul {
    width:100px;
    min-height:1em;
    overflow:hidden;
    border-radius:3px;
    border:1px solid #4C4C4C;
    margin:2px;
    background-color:#f9f9f7;
    color:#727377;
}

.dropdown ul label {
    display:none;
    background-color:#f9f9f7;
    color:#727377;
    padding:0 4px;
    cursor:pointer;
}

.dropdown ul label:hover {
    background-color:#727377;
    color:#f9f9f7;
}

.dropdown input[type=radio] {
    height:0;
    width:0;
    float:left;
}

.dropdown input[type="radio"]:checked + label {
    display:block;
    background-color:#f9f9f7;
    color:#727377;
}

.dropdown:hover input[type="radio"]:checked + label {
    display:block;
    background-color:#727377;
    color:#f9f9f7;
}

.dropdown:hover label {
    display:block;
}

.dropdown:hover ul {
    -moz-box-shadow:3px 3px 4px #000;
    -webkit-box-shadow:3px 3px 4px #000;
    box-shadow:3px 3px 4px #000;
    -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135,Color='#000000')";
    filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000');
}

.dropdown .toggle{
    position:absolute;
    right:4px;
    top:6px;
    height:15px;
    width:15px;
    border-radius:50%;
    border:1px solid #727377;   
}

.dropdown .toggle div{
   <?php
session_start();
include('../connection.php');
$product=$_GET['product'];
$category=$_GET['category'];
$_SESSION['category']=$category;
$_SESSION['product']=$product;
$link_name='catalog-gallery';
$_SESSION['link_name']=$link_name;
$price1=$_GET['price1'];
$price2=$_GET['price2'];
$_SESSION['price1']=$price1;
$_SESSION['price2']=$price2;
$variable_form_get=$_GET['product'];
$_SESSION['q']='king';
  ...

JavaScript

/*
This is to be a css replacement for the dropdown element.  I really disslike the idea of using javascript for such a intragal part of our web development process.  Altho this adds much more html and css than id like to have, it does show the ability to do this without javascript.            

This is a work in progress and still has a couple bugs in IE7. If you have any ideas please let me know.
*/