Drop down list using CSS
Can any one told me that how can i format the drop down list using CSS
-
-
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 -
just put things like this into the input drop down, and all the options that follow.
just experiment with that kinda stuffCode:style="background: black; color: red; text-decoration; none; border: 1px solid red;"
search google for more things you can add,
hope i could helpComment
-
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:
Ronald :cool:Comment
-
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>Comment
-
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
Originally posted by jitu78Comment
-
If you're looking for a CSS drop-down menu a simple version would be like this:
HTML:
This will nest a list within an item of the parent list so we can show it using CSSCode:<ul> <li>Menu Link 1</li> <li>Menu Link 2</li> <li class="menu-parent">Menu Link 3 <ul class="menu-child"> <li>Sub Menu Link 1</li> <li>Sub Menu Link 2</li> <li>Sub Menu Link 3</li> </ul> </li> </ul>
CSS:
This is very basic and does not include any actual styling just the css required for it to function.Code:.menu-parent{ position:relative; //This sets the list element as the reference point for any childs position } .menu-child{ display:none; //This will hide the submenu at first position:absolute; //This will make the position fixed relative to the parent top:-6px; //vertical offset from the top of the parent element left:0px; //horizontal offset from the parent element z-index:10; //This will make sure the submenu is on top of whatever is around it } .menu-parent:hover .menu-child{ display:block; //Show the submenu when you hover over a parent }Comment
Comment