Drop down boxes in HTML editor

Re: Drop down boxes in HTML editor

by jon catuccio -
Number of replies: 0
I have used CSS but you have to paste the entire code in each time you edit (variations of this at CSSplay):

<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_definition4.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#menu {list-style-type:none; margin:40px 0 200px 15px; padding:0;}

#menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:1px; z-index:100;}
#menu li a, #menu li a:visited {text-decoration:none;}

#menu dl {position:absolute; top:0; left:0; width: 150px; margin: 0; padding: 0; background: transparent url(transparency.gif);}
#menu dt {background: #b2ab9b; margin:0;font-size: 1.1em; border-bottom:1px solid #fff; width:150px; float:left;}
#menu dd {display:none; background: transparent; border-bottom:1px solid #cce; clear:left; margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;}

#menu dt a, #menu dt a:visited {display:block; color:#ff8; padding: 5px 5px 5px 20px; width:125px;}
#menu dd a, #menu dd a:visited {background:#b2ab9b; color:#ff8; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:150px;}

#menu li a:hover {border:0;}

#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {width:150px; border-bottom:15px solid #e2dfa8;}
#menu li:hover dt a, #menu li a:hover dt a, #menu dd a:hover {background: #e2dfa8; color:#534;}


</style>


<ul id="menu">
<li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl> <dt><a href="menu/index.html">Modules</a></dt>
<dd><a title="Orientation to Project Based Learning in the Digital Age" href="http://tools.fcit.usf.edu/moodle/course/view.php?id=6">Orientation</a></dd>
<dd><a title="Introduction to Project Based learning" href="http://tools.fcit.usf.edu/moodle/course/view.php?id=9">One</a></dd>
<dd><a title=" Implementing Project Based Learning in curriculum" href="http://tools.fcit.usf.edu/moodle/course/view.php?id=10">Two</a></dd>
<dd><a title=" Idea mapping and thoughtful organization" href="http://tools.fcit.usf.edu/moodle/course/view.php?id=11">Three</a></dd>
<dd><a title="Classroom management in the digital classroom. How to manage and organize your students around one computer in the room, or when working in a lab. You will find some practical suggestions when working on assignments and using a project based learning approach." href="http://tools.fcit.usf.edu/moodle/course/view.php?id=12">Four</a></dd>
<dd><a title="Copyright Issues in the digital classroom" href="http://tools.fcit.usf.edu/moodle/course/view.php?id=13">Five</a></dd>
<dd><a title="Digital tools in the classroom" href="http://tools.fcit.usf.edu/moodle/course/view.php?id=14">Six</a></dd>
<dd><a title="Digital media in the classroom (pt. II)" href="http://tools.fcit.usf.edu/moodle/course/view.php?id=15">Seven</a></dd>
<dd><a title=" Digital Reflections and assessment" href="http://tools.fcit.usf.edu/moodle/course/view.php?id=16">Eight</a></dd>
<dd><a title="Creating project Reflections for dissemination" href="http://tools.fcit.usf.edu/moodle/course/view.php?id=17">Nine</a></dd>
<dd><a title="Project reflection, assessment and evaluation" href="http://tools.fcit.usf.edu/moodle/course/view.php?id=18">Ten</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li>
</ul>

Jon