JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="nav">
<li><a href="#">ABOUT</a></li>
<li><a href="#" class="selected">MAJORS</a>
<ul>
<li> <form name="form" id="form">
<select name="jumpMenu" id="jumpMenu" onChange="MM_jumpMenu('parent',this,0)">
<option>item1</option>
<option>item2</option>
<option>item3</option>
<option>item4</option>
<option>item5</option>
</select>
</form></li>
<li><a href="#">Digital Media</a></li>
<li><a href="#">Digital Video</a> </li>
<li><a href="#">Digital Media</a></li>
</ul>
</li>
</ul>
CSS
ul{margin-top:5px; margin-right:0px; }
li{ float:left; padding-right:10px; padding-left:20px; border-right:1px solid #333; height:23px; padding-top:12px;}
#nav li {display:block; position:relative;}
/* this is the parent menu */
#nav li a {display:block;}
/* submenu, it's hidden by default */
#nav ul {position:absolute; left:0; top:25px;display:none; margin:10px 0 0 -1px; padding:0; list-style:none;}
#nav ul li {width:180px;height:15px;float:left;font-size:11px; font-weight:normal; text-transform:capitalize;padding-top:3px; line-height: 14px;opacity:.95;}
#nav ul li.nobg { background:none;}
#nav ul li.last {padding-bottom:8px;}
#nav ul li.headline { color:#eee;}
/* display block will make the link fill the whole area of LI */
#nav ul a { display:block; }
/* we should always avoid using hack like this */
/* should put it into separate file : ) */
*html #nav ul {margin:0 0 0 -2px;}
JavaScript
$(document).ready(function () {
$('#nav li').hover(
function () {
//show its submenu
$('ul', this).slideDown(100);
},
function () {
//hide its submenu
$('ul', this).slideUp(100);
}
);
});