Customise pull down menu

   I have just added a pull down menu to my site and was wondering if there is any way that it can be customised to suit my needs?  I would like to change the colour of the menu background and also make the arrow different.  The reason is that I use two iframes on my site and they both have customised scrollbars, and the pull down just doesn't look right.


LVL 14
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

It would help if you could post some code.

If you found the javascript code somewhere, look in the JS file to see if any variables are commented as being related to menu visuals.
Alternately you could use one of these menu's, the code is easy to understand and you can change colours etc. easily ->
john-formbyAuthor Commented:
It is just a simple pull down menu.  The link to the site is:
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

john-formbyAuthor Commented:
I would just like it to take on the same characteristics as the scrollbar for the news section.
You can change the background colour using <select name="myselect" style="background-color: #EEE;"> where #EEE is the hex value for the color of your choice.

Remember changing the scroll bar attributes are IE only, any Mozilla or Firefox users will not see the difference so there is not a great amount of purpose behind doing so.
Ok you can do it using CSS; look at the example below ->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
select.shortcuts {background-color:#fff;color:#333;}
.shortcuts-section {background-color:#ebebeb;color:#333;}
/* shortcuts */
shortcuts-block {border-bottom:1px dashed #CCCCCC;border-top:1px dashed #CCCCCC}
shortcuts-text  {margin:6px 6px 6px 6px;}

<FORM NAME="shortcuts" ACTION="#">Quick links:

<SELECT CLASS="shortcuts">
<OPTION>---Select a category---</OPTION>
<OPTION CLASS="shortcuts-section" VALUE="abc.html">Audio visual</OPTION>
<OPTION VALUE="abc.html">&raquo; SECTION</OPTION>
<OPTION VALUE="abc.html">&raquo; aaaaaaaaaaaaaa</OPTION>
<OPTION VALUE="abc.html">&raquo; bbbbbbbbbbbb</OPTION>
<OPTION VALUE="abc.html">&raquo; cccccccccccc</OPTION>
<OPTION VALUE="abc.html">&raquo; ddddddddddd</OPTION>
<OPTION VALUE="abc.html">&raquo; eeeeeeeeeeee</OPTION>
<OPTION VALUE="abc.html">&raquo; fffffffffffffff</OPTION>
<OPTION CLASS="shortcuts-section" VALUE="abc.html">SECTION</OPTION>
<OPTION VALUE="abc.html">&raquo; gggggggggggggg</OPTION>
<OPTION VALUE="abc.html">&raquo; hhhhhhhh hhhhhhh</OPTION>
<OPTION VALUE="abc.html">&raquo; iiiiiiii</OPTION>
<OPTION CLASS="shortcuts-section" VALUE="abc.html">SECTION</OPTION>
<OPTION VALUE="abc.html">&raquo; jjjjjjjj jjjj</OPTION>
<OPTION VALUE="abc.html">&raquo; kkkkkkkkk</OPTION>
<OPTION CLASS="shortcuts-section" VALUE="abc.html">SECTION</OPTION>
<OPTION VALUE="abc.html">&raquo; mmmmmmmm</OPTION>
<OPTION VALUE="abc.html">&raquo; nnnnnnnn</OPTION>
<OPTION VALUE="abc.html">&raquo; oo ooooooo</OPTION>
<OPTION VALUE="abc.html">&raquo; pppppp-pppppppp</OPTION>
<OPTION VALUE="abc.html">&raquo; qqqqq qqqqqqqq qqqq</OPTION>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
and Diablo84 is right, you can't get the same effects cross browser
john-formbyAuthor Commented:
I know that it only works in IE.  The reason I want it is cause then it will all look the same in IE, but if it is used in Mozilla, then it will use the default for that and then it will still all folow the same pattern.  I just want it to be standard whatever browser is used.  Don't know if I have explained this very well.

Thanks for the CSS post, I shall have a look at this now :-)

john-formbyAuthor Commented:
I have changed the menu so that it now has a different background colour, but is there any way to change the arrow and border colours so that it looks like the scrollbars.  I have tried using the css scrollbar properties but that doesn't work.  Any suggestions welcome.

AFAIK you can't, as i recall scroll bars in things like text areas inherit their appearence from the main scroll bar but again this is all an IE only factor which is not supported by the standards so its a very hit and miss area.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.