By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,487 Members | 1,074 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,487 IT Pros & Developers. It's quick & easy.

Drop down list using CSS

P: 2
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.
Feb 19 '08 #1
Share this Question
Share on Google+
5 Replies


harshmaul
Expert 100+
P: 490
Have you already made the drop down using css or do you need to know how to do it?
Feb 19 '08 #2

P: 2
Have you already made the drop down using css or do you need to know how to do it?
Hi,
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)
Feb 22 '08 #3

harshmaul
Expert 100+
P: 490
Hi Try this

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"></meta>
  5. <title>css hover</title>
  6. <style type="text/css">
  7. #menu ul .item{display:none;}
  8. #menu ul:hover .item{display:block;}
  9. #menu ul{float:left;list-style:none;}
  10. </style>
  11.  
  12. </head>
  13. <body>
  14. <div id="menu">
  15. <ul>
  16. <li class="top">My affiliates</li>
  17. <li class="item"><a href="http://www.google.com/">google</a></li>
  18. <li class="item"><a href="http://www.thescripts.com/">theScripts</a></li>
  19. </ul>
  20. <ul>
  21. <li class="top">My News Articles</li>
  22. <li class="item"><a href="#">Story 1</a></li>
  23. <li class="item"><a href="#">Story 2</a></li>
  24. <li class="item"><a href="#">Story 1</a></li>
  25. <li class="item"><a href="#">Story 2</a></li>
  26. </ul>
  27. </div>
  28. </body>
  29. </html>
Feb 22 '08 #4

P: 14
try the followng code for adding color for the drop down by using CSS

Expand|Select|Wrap|Line Numbers
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  3. "http://www.w3.org/TR/html4/strict.dtd">
  4.  
  5. <HTML>
  6. <HEAD> <TITLE> CSS Example </TITLE>
  7.  
  8. <style type="text/css">
  9. .altTextField {
  10. background-color: lightblue;
  11. font-family: verdana;
  12. font-size: 09pt;
  13. color: red
  14. height: 5pt
  15. width:6pt
  16. border:0px;
  17. }
  18. </style> 
  19.  
  20. </HEAD>
  21. <BODY>
  22. <FORM name="example" action="" method="POST" >
  23.  
  24. DropDown        :    <SELECT size=1 width=10 name=dropMenu class="altTextField"> 
  25.                 <option value=0>Option-1</option>
  26.                 <option value=1>Option-2</option>
  27.                 <option value=2>Option-3</option>
  28.                         </SELECT>
  29.  
  30. </FORM>
  31. </BODY>
  32. </HTML>
  33.  
  34.  
Feb 23 '08 #5

harshmaul
Expert 100+
P: 490
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!
Feb 23 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.