YoSmudge/dropdown.css

## dropdown.css
/*Add cursor to the spans and labels*/

form .mycssdropdown li label, form .mycssdropdown li label span{
	cursor:pointer;
}

/*By default, hide the spans*/
form .mycssdropdown li label span{
	display:none;
}

/*All the spans should show when hovered*/
form .mycssdropdown:hover li label span{
	display:block;
}

/*Otherwise, only the selected span should display*/
form .mycssdropdown li label input:checked+span{
	display:block;
	font-weight:bold;
}

## index.html
<!DOCTYPE html>
<html>
    <link type="text/css" rel="stylesheet" href="./style.css" />
    <link type="text/css" rel="stylesheet" href="./dropdown.css" />
    <title>Pure HTML/CSS Dropdown Select Menu</title>

    <p>Example of a pure CSS dropdown list using HTML radio buttons for use in a form
    <p>Haven't tested browser compabability so YMMV
    <p>P.S. this is all wonderful valid HTML5 and CSS3 (which is nice)

    <form action="./test.php" method="post">
        <ul class="mycssdropdown">
            <li>
                <label>
                    <input type="radio" name="avalue" value="option a" checked="checked" />
                    <span>Option A</span>
                </label>
            <li>
                <label>
                    <input type="radio" name="avalue" value="option b" />
                    <span>Option B</span>
                </label>
        </ul>
        <br/>
        <input type="submit" />
    </form>

    <p>To read more see <a href="http://rmg.io/wordpress/?p=4">the blog post</a>

## pretty.css
/*
	Make it pretty with Bootstrap
*/

/*As before, hide the radio buttons and style the ul*/
form .mycssdropdown li label input{
	display:none;
	width:0;
	height:0;
	margin:0;
	padding:0;
	position:absolute;
}

form .mycssdropdown{
	list-style-type:none;
	margin:0;
}

form .mycssdropdown li label span{
	color:#FFFFFF;
	cursor:pointer;
}

/*When the dropdown isn't showing, display the elements inline and show the caret*/
form .mycssdropdown li, form .mycssdropdown li label{
	display:inline;
}

/*When it is showing, hide the caret and display as block*/
form .mycssdropdown:hover li{
	display:block;
}

form .mycssdropdown:hover li span.caret{
	display:none;
}

/*Now hide all the elements except checked*/
form .mycssdropdown li label span{
	display:none;
}

form .mycssdropdown li label input:checked+span{
	display:inline;
}

/*But show them on hover*/
form .mycssdropdown:hover li label span{
	display:inline;
}

/*And highlight the selected one*/
form .mycssdropdown:hover li label input:checked+span{
	font-weight:bold;
}

## pretty.html
<!DOCTYPE html>
<html>
    <link type="text/css" rel="stylesheet" href="./pretty.css" />
	<link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />

    <title>Pure HTML/CSS Dropdown Select Menu</title>

	<div class="container">
		<p>Pretty example using Bootstrap

		<form action="./test.php" method="post">
			<ul class="btn btn-primary  mycssdropdown">
				<li>
					<label>
						<input type="radio" name="avalue" value="option a" checked="checked" />
						<span>Option A</span>
					</label>
				<li>
					<label>
						<input type="radio" name="avalue" value="option b" />
						<span>Option B</span>
					</label>
				<li>
					<span class="caret"></span>
			</ul>
			<br/>
			<input type="submit" />
		</form>

		<p>To read more see <a href="http://rmg.io/wordpress/?p=4">the blog post</a>
	</div>

## style.css
/*
  CSS for dropdown
*/

/*First, do some styling on the UL*/

form .mycssdropdown{
	background-color:#DDD;
	border:solid 1px #000;
	border-radius:10px;
	display:inline-block;
	list-style-type:none;
	margin:0;
	padding:5px;
}

/*Now we need to remove the actual radio buttons, the label will serve as the click area*/

form .mycssdropdown li label input{
	display:none;
	width:0;
	height:0;
	margin:0;
	padding:0;
	position:absolute;
}

## test.php
<?php
$Value = htmlentities($_POST['avalue']);
echo "You selected {$Value}!";
	/Add cursor to the spans and labels/

	form .mycssdropdown li label, form .mycssdropdown li label span{
	cursor:pointer;
	}

	/By default, hide the spans/
	form .mycssdropdown li label span{
	display:none;
	}

	/All the spans should show when hovered/
	form .mycssdropdown:hover li label span{
	display:block;
	}

	/Otherwise, only the selected span should display/
	form .mycssdropdown li label input:checked+span{
	display:block;
	font-weight:bold;
	}
	<!DOCTYPE html>
	<html>
	<link type="text/css" rel="stylesheet" href="./style.css" />
	<link type="text/css" rel="stylesheet" href="./dropdown.css" />
	<title>Pure HTML/CSS Dropdown Select Menu</title>

	<p>Example of a pure CSS dropdown list using HTML radio buttons for use in a form
	<p>Haven't tested browser compabability so YMMV
	<p>P.S. this is all wonderful valid HTML5 and CSS3 (which is nice)

	<form action="./test.php" method="post">
	<ul class="mycssdropdown">
	<li>
	<label>
	<input type="radio" name="avalue" value="option a" checked="checked" />
	<span>Option A</span>
	</label>
	<li>
	<label>
	<input type="radio" name="avalue" value="option b" />
	<span>Option B</span>
	</label>
	</ul>
	<br/>
	<input type="submit" />
	</form>

	<p>To read more see <a href="http://rmg.io/wordpress/?p=4">the blog post</a>
	/*
	Make it pretty with Bootstrap
	*/

	/As before, hide the radio buttons and style the ul/
	form .mycssdropdown li label input{
	display:none;
	width:0;
	height:0;
	margin:0;
	padding:0;
	position:absolute;
	}

	form .mycssdropdown{
	list-style-type:none;
	margin:0;
	}

	form .mycssdropdown li label span{
	color:#FFFFFF;
	cursor:pointer;
	}

	/When the dropdown isn't showing, display the elements inline and show the caret/
	form .mycssdropdown li, form .mycssdropdown li label{
	display:inline;
	}

	/When it is showing, hide the caret and display as block/
	form .mycssdropdown:hover li{
	display:block;
	}

	form .mycssdropdown:hover li span.caret{
	display:none;
	}

	/Now hide all the elements except checked/
	form .mycssdropdown li label span{
	display:none;
	}

	form .mycssdropdown li label input:checked+span{
	display:inline;
	}

	/But show them on hover/
	form .mycssdropdown:hover li label span{
	display:inline;
	}

	/And highlight the selected one/
	form .mycssdropdown:hover li label input:checked+span{
	font-weight:bold;
	}
	/*
	CSS for dropdown
	*/

	/First, do some styling on the UL/

	form .mycssdropdown{
	background-color:#DDD;
	border:solid 1px #000;
	border-radius:10px;
	display:inline-block;
	list-style-type:none;
	margin:0;
	padding:5px;
	}

	/Now we need to remove the actual radio buttons, the label will serve as the click area/

	form .mycssdropdown li label input{
	display:none;
	width:0;
	height:0;
	margin:0;
	padding:0;
	position:absolute;
	}
	<?php
	$Value = htmlentities($_POST['avalue']);
	echo "You selected {$Value}!";