Drop down menu

matej.barac · 11-27-2004, 12:57 PM

Hi,

I am trying to make a drop down menu using only CSS. I want to be able to set the width of the menu and don't want the width to be dependant of size of the menu option (width of the phrase). Also, is it possible to control the height of the menu?

This is the XHTML code (I am using 1.0 strict):

<div class="option">
<form name="navigation">
<select name="selectname" SIZE="1">
<option class="">not wide enough</option>
<option class=""></option>
<option class=""></option>
<option class=""></option>
</select>
</form>
</div>

And the CSS part:

div.option
{
position: absolute;
top: 10px;
left: 0px;
width: 520px;
height: 50px;
z-index: 3;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
}

I am trying to avoid Javascript, but if this is not possible with CSS can someone tell how to do it with Javascript?

CreativeLogic · 11-27-2004, 02:00 PM

You're going to have to use some style on the actual select tag for the height and width.

tony84 · 11-27-2004, 02:07 PM

im not sure about css
but as for the javascript:

HTML Code:

<form name="jump">
<select name="menu" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="http://oooo">oooo</option>
<option value="http://iiii">iiii</option>
<option value="http://mmmm">mmmm</option>
</select>
</form>

11-27-2004, 12:57 PM	#1 (permalink)
matej.barac First Time Poster! Join Date: Nov 2004 Posts: 1 2.00 NP$ (Donate)	Drop down menu Hi, I am trying to make a drop down menu using only CSS. I want to be able to set the width of the menu and don't want the width to be dependant of size of the menu option (width of the phrase). Also, is it possible to control the height of the menu? This is the XHTML code (I am using 1.0 strict): <div class="option"> <form name="navigation"> <select name="selectname" SIZE="1"> <option class="">not wide enough</option> <option class=""></option> <option class=""></option> <option class=""></option> </select> </form> </div> And the CSS part: div.option { position: absolute; top: 10px; left: 0px; width: 520px; height: 50px; z-index: 3; font-family: verdana, arial, helvetica, sans-serif; font-size: 10px; } I am trying to avoid Javascript, but if this is not possible with CSS can someone tell how to do it with Javascript?

11-27-2004, 02:00 PM	#2 (permalink)
CreativeLogic NamePros Regular Join Date: Sep 2003 Posts: 894 138.00 NP$ (Donate)	You're going to have to use some style on the actual select tag for the height and width. __________________ Online Time Tracking :)

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)