CodeAve.com/CSS - Drop Down Menu Formats

CodeAve.com - CSS - Miscellaneous

ASP
JavaScript
CSS
·Basics
·Page Display
·Text Display
·Script Writers
·Contents
·What's New?
HTML
Maps
Links
Mail List
Search
Sitemap

Drop Down Menu Formats

Drop down menus are incredibly useful, however without any formatting they will be displayed as wide as the amount of text in the largest option entry. This can become problematic if you have a lot to put in a drop down menu and not a lot of space for the menu itself. Below we offer four slightly different drop down menu examples. The first is a generic drop down menu without any formatting. The second is a drop down menu where only the width has been altered (thus truncating all of the text to the right at a certain point.) The third is an example of a drop down where the font face is declared as well as a font size and lastly a drop down utilizing both a width and font commands

•View the Output

•Text View

•Print View

•Mail this Link

<html>
<title>CodeAve.com/CSS - Drop Down Formats</title>
<body bgcolor="#FFFFFF">

<select size="1" name="u_month">
<option value="">Regular Drop Down</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>

<select name=u_month style="width:60px">
<option value="">Drop Down Width</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>

<select name=u_month style="font-size:10px;font-family:Arial">
<option value="">Drop Down Font</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>

<select name=u_month style="font-size:10px;font-family:Arial;width:60px">
<option value="">Drop Down Width and Font</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>

</center>

</body>
</html>