Css with table

I would like to learn if there is way with only css to use table dropdown menu.

You need to be more specific, what kind of table? is the dropdown a table or is the whole thing a table?

usually i use javascipt for menu ! i do not like table and also google !

Most drop down menus can be accomplished with just CSS, it keeps things more simple.

Drop down menu like this example

<table class="clock" width="500px" style="background-color:#c0c0c0">
<tr>
<td >
<a href="#">Select time</a><br />
<table class="menu clock" id="time" width="120" style="background-color:#c0c0c0">
<tr>
<td class="menu clock">
<a href="#">
<input name="sivamtime" type="radio" id="a1" checked="checked" "></input>
<span>18</span>
</a>
</td>
</tr>
<tr>
<td class="menu clock">
<a href="#">
<input name="sivamtime" type="radio" id="b2" "></input>
<span>10</span>
</a>
</td>
</tr>

You can do that without a table like so:


<a href="#" class="timedrop">Select time
<ul>
<li><input name="sivamtime" type="radio" value="11" /><span>11</span></li>
<li><input name="sivamtime" type="radio" value="10" /><span>10</span></li>
</ul>
</a>


With the following CSS:

.timedrop {position:relative}
.timedrop ul{display:hidden}
.timedrop:hover ul{display:block;position:absolute;list-style:none}


You might need to work out the positioning though to line it up.

If you're looking for a table-less, css drop down menu have a look at this on htmldog (http://www.htmldog.com/articles/suckerfish/dropdowns/). No javascript (except for IE6 support).

I change it but always is open.
<ul>
<li><span><a href="#" class="timedrop">Select time</a></span>
<ul class="menu clock" style="background-color:#c0c0c0">

<li class="menu clock"><a href="#">
<input name="sivamtime" type="radio" id="a1" checked="checked" ></input>
<span>10</span>
</a></li>


<li class="menu clock"><a href="#">
<input name="sivamtime" type="radio" id="b2" ></input>
<span>18</span>
</a></li>

If I use this in css it display in the same place with svg animation but works.Thanks.
#nav > li { list-style-type:none; float:left; display:block; margin:0px 10px;
position:relative; padding:10px; width:100px;}
#nav > li:hover ul { display:block; }
#nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; }

#nav li ul { margin:0px; padding:0px; display:none;}
#nav li ul li { list-style-type:none; margin:10px 0 0 0;}
#nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none;}
#nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;}
#nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }

Finally ,I use this but I would like to display horizontally.Thanks
#nav > li:hover ul { display:inline; }
#nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; }

#nav li ul { margin:0px; padding:0px; display:none;}
#nav li ul li { list-style-type:none; margin:10px 0 0 0;}
#nav li ul li a { display:inline; padding:5px 10px; color:#A2E200; text-decoration:none;}
#nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;}
#nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }