Can any one tell me how to add style to drop down menu. Css styles like changing border color, background color , giving alternate color in the options etc.
Drop down list using CSS
Collapse
X
-
Hi,Originally posted by harshmaulHave you already made the drop down using css or do you need to know how to do it?
I want to know how to use it and if possible how can we have multiple levels it it. for e.g.
Section A( as heading)
option 1 (as option under section A)
option 2 (as option under section A)
Section B( as heading)
option 1 (as option under section B)
option 2 (as option under section B)Comment
-
Hi Try this
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"></meta> <title>css hover</title> <style type="text/css"> #menu ul .item{display:none;} #menu ul:hover .item{display:block;} #menu ul{float:left;list-style:none;} </style> </head> <body> <div id="menu"> <ul> <li class="top">My affiliates</li> <li class="item"><a href="http://www.google.com/">google</a></li> <li class="item"><a href="http://www.thescripts.com/">theScripts</a></li> </ul> <ul> <li class="top">My News Articles</li> <li class="item"><a href="#">Story 1</a></li> <li class="item"><a href="#">Story 2</a></li> <li class="item"><a href="#">Story 1</a></li> <li class="item"><a href="#">Story 2</a></li> </ul> </div> </body> </html>Comment
-
try the followng code for adding color for the drop down by using CSS
[CODE=HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD> <TITLE> CSS Example </TITLE>
<style type="text/css">
.altTextField {
background-color: lightblue;
font-family: verdana;
font-size: 09pt;
color: red
height: 5pt
width:6pt
border:0px;
}
</style>
</HEAD>
<BODY>
<FORM name="example" action="" method="POST" >
DropDown : <SELECT size=1 width=10 name=dropMenu class="altTextF ield">
<option value=0>Option-1</option>
<option value=1>Option-2</option>
<option value=2>Option-3</option>
</SELECT>
</FORM>
</BODY>
</HTML>
[/CODE]Comment
-
Hi everybody!
LOL, i just realised that theres more than one type of drop down. Poster please specify which one you want!
the one i wrote is for a menu navigation system, And the one the other poster wrote was for form submission.
Choose you weapon!Comment
Comment