423,498 Members | 1,175 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 423,498 IT Pros & Developers. It's quick & easy.

Drop down list using CSS

P: 2
Can any one told me that how can i format the drop down list using CSS
May 3 '06 #1
Share this Question
Share on Google+
6 Replies


kestrel
Expert 100+
P: 1,071
format it as in css styles?
let me know what kinda styles you want,
bgcolor
font color
stuff like that

and ill write you up the code
Aug 1 '06 #2

kestrel
Expert 100+
P: 1,071
just put things like this into the input drop down, and all the options that follow.
Expand|Select|Wrap|Line Numbers
  1. style="background: black; color: red; text-decoration; none; border: 1px solid red;"
just experiment with that kinda stuff

search google for more things you can add,


hope i could help
Aug 1 '06 #3

ronverdonk
Expert 2.5K+
P: 4,258
Have a look at Stu Nicholls site, which is dedicated to CSS and usage. Contains tons of free samples, including drop down lists, menu's, layouts, boxes and the lot.

See:
http://www.cssplay.co.uk/menus/index.html

Ronald :cool:
Aug 4 '06 #4

P: 30
Hi,

Make a class for select box, where you can define styles for select box.

See sample code below,
<style>
select.style01 {border:1px solid #A5A5A5; backgorund-color:#D0D0D0}
select.style01 option {border-bottom:1px solid #dadada}
</style>

<html>
<select class="style01">
<option>Menu Item 01</option>
<option>Menu Item 02</option>
</select>
</html>
Aug 29 '06 #5

P: 2
This is one of the typs of dropdowns I Wanted. and works great but I was also needing to know How do I make one like at the top of this page. When scrollbar highlights forums or articles the links popdown.

if that makes any sense




Hi,

Make a class for select box, where you can define styles for select box.

See sample code below,
<style>
select.style01 {border:1px solid #A5A5A5; backgorund-color:#D0D0D0}
select.style01 option {border-bottom:1px solid #dadada}
</style>

<html>
<select class="style01">
<option>Menu Item 01</option>
<option>Menu Item 02</option>
</select>
</html>
Sep 2 '07 #6

P: 7
If you're looking for a CSS drop-down menu a simple version would be like this:

HTML:

Expand|Select|Wrap|Line Numbers
  1.  
  2. <ul>
  3.  
  4.   <li>Menu Link 1</li>
  5.   <li>Menu Link 2</li>
  6.   <li class="menu-parent">Menu Link 3
  7.  
  8.     <ul class="menu-child">
  9.  
  10.       <li>Sub Menu Link 1</li>
  11.       <li>Sub Menu Link 2</li>
  12.       <li>Sub Menu Link 3</li>
  13.  
  14.     </ul>
  15.  
  16.   </li>
  17.  
  18. </ul>
  19.  
  20.  
This will nest a list within an item of the parent list so we can show it using CSS

CSS:

Expand|Select|Wrap|Line Numbers
  1. .menu-parent{
  2.   position:relative; //This sets the list element as the reference point for any childs position
  3. }
  4.  
  5. .menu-child{
  6.   display:none;          //This will hide the submenu at first
  7.   position:absolute;     //This will make the position fixed relative to the parent
  8.   top:-6px;              //vertical offset from the top of the parent element
  9.   left:0px;              //horizontal offset from the parent element
  10.   z-index:10;            //This will make sure the submenu is on top of whatever is around it
  11. }
  12.  
  13. .menu-parent:hover .menu-child{
  14.   display:block; //Show the submenu when you hover over a parent
  15. }
  16.  
  17.  
This is very basic and does not include any actual styling just the css required for it to function.
Oct 23 '11 #7

Post your reply

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