JSFiddle - React, Tailwind, and code Playground
HTML
<div id="topMenuContainerDiv" style="padding-top:9px; font-family:Tahoma; font-size:10.5pt; color:white; letter-spacing:2px;padding-left:0px;border:0px solid white">
<div id="topMenuLinkDiv" style="float:left; width:24px; color:white; height:22px; background-image:url('http://img690.imageshack.us/img690/5588/menubark.jpg'); background-repeat:no-repeat; background-position:center center"></div>
<div id="topMenuLinkDiv" style="float:left; position:relative;color:white; height:22px; padding-top:2px; text-align:center; border:0px solid white; min-width:70px">
Home
</div>
<div id="topMenuLinkDiv" style="float:left; position:relative;width :24px; color:white; height:22px; background-image:url('http://img690.imageshack.us/img690/5588/menubark.jpg'); background-repeat:no-repeat; background-position:center center"></div>
<div id="topMenuLinkDiv" style="float:left; position:relative;color:white; height:22px; padding-top:2px; text-align:center; border-left:0px solid white">
<ul id="nav">
<li>Art hahaoia
<ul>
<li><a href="#">Art Galleries</a></li>
<li><a href="#" class="selected">Commissions</a></li>
</ul>
</li>
</ul>
</div>
<div id="topMenuLinkDiv" style="position:relative;float :left; width:24px; color:white; height:22px; background-image:url('http://img690.imageshack.us/img690/5588/menubark.jpg'); background-repeat:no-repeat; background-position:center center"></div>
<div id="topMenuLinkDiv" style="float:left; position:relative;color:white; height:22px; padding-top:2px; text-align:center; border:0px solid white">
<ul id="nav">
<li>Menu Option 3
<ul>
<li><a href="#">Item 01</a></li>
<li><a href="#" class="selected">Item 02</a></li>
<li><a href="#">Item 03</a></li>
</ul>
</li>
</ul>
...
CSS
body {background-color:black;}
#nav {
margin:0;
padding:0;
list-style:none;
background-color:#070707;
}
#nav li {
float:left;
display:block;
position:relative;
z-index:500;
margin:0 0px;
min-width:70px
}
#nav ul li:hover { background-color:#191919 }
#nav li a {
display:block;
min-height:23px;
text-decoration:none;
text-align:center;
}
#nav ul {
position:absolute;
margin-top:0px;
left:-13px;
display:none;
padding-top:2px;
list-style:none;
}
#nav ul li {
min-width:30px;
float:left;
border-left:1px solid #333333;
border-right:1px solid #333333;
background-color:#070707;
border-top:none;
padding:8px 0px;
}
#nav ul a {
display:block;
height:15px;
letter-spacing:0.5pt;
font-size:9pt;
}
#nav ul a:hover {
text-decoration:underline;
}
JavaScript
$(document).ready(function () {
var longwidth=0;
$("div#topMenuLinkDiv").each(function() {
longwidth += $(this).width();
});
var menuWidth2 = (730-longwidth)/2;
var menuWidth=menuWidth2+"px";
$("div#topMenuContainerDiv").css({"padding-left":menuWidth})
$('ul#nav li').each(function () {
alert($(this).outerWidth(false)); $(this).find('li').width($(this).outerWidth(false)+23);
});
$("ul#nav li li:last-child").css({"border-bottom":"1px solid #333333"})
$("ul#nav li li:last-child").css({"border-bottom-left-radius":"10px"})
$("ul#nav li li:last-child").css({"border-bottom-right-radius":"10px"})
$('#nav li').hover(
function () {
$('ul', this).stop(true,true).slideDown(300);
},
function () {
$('ul', this).stop(true,true).slideUp(400);
}
);
});