...

View Full Version : Css with table



Fot
04-18-2011, 07:54 PM
I would like to learn if there is way with only css to use table dropdown menu.

Wojjie
04-18-2011, 08:31 PM
You need to be more specific, what kind of table? is the dropdown a table or is the whole thing a table?

Wojjie
04-18-2011, 08:38 PM
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.

Fot
04-18-2011, 08:47 PM
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>

Wojjie
04-18-2011, 08:57 PM
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.

SB65
04-18-2011, 09:03 PM
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).

Fot
04-18-2011, 09:09 PM
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>

Fot
04-18-2011, 09:24 PM
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; }

Fot
04-18-2011, 09:48 PM
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; }



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum