A few days a go I needed to change default Modularity theme dropdown menu from onclick like functionality to onmouseover like functionality.

It was easy. But, the script they use, it didn't work with IE6: I needed to find another way. Now, it is possible to write such script from scratch, but: if there exists an existing script, why bother.

I couldn't find an existing, simple plugin for Wordpress, so went looking for general purpose frameworks.
I found this: Free CSS Drop-Down Menu Framework. It's free and licensed under the GNU General Public License.

Here is how to add it to your Wordpress theme:

• Download the latest files from their homepage.

• Upload css and js directories to your ftp server, template directory.

• Go to Appearance => Editor => header.php file, add following files before </head> tag:

<link href="<?php bloginfo('template_directory'); ?>/css/dropdown/dropdown.css" media="all" rel="stylesheet" type="text/css" />
<link href="<?php bloginfo('template_directory'); ?>/css/dropdown/dropdown.vertical.css" media="all" rel="stylesheet" type="text/css" />
<link href="<?php bloginfo('template_directory'); ?>/css/dropdown/themes/default/default.css" media="all" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery/jquery.dropdown.js"></script>
<![endif]-->

Note, exact files may vary, depending on the type of drop-down box you want. For exact files find the example for the functionality you want, look at it's source code.

• Go to the place, where you want your drop-down menu to appear. Usually: header.php

• And add the following code:

<ul id= "nav" class= "dropdown dropdown-vertical"> <?php wp_list_pages('title_li='); ?></ul>