|
|
Hello everyone,
I have found a dhtml drop down menu and am having trouble centering it here is the codes that are part of this menu with no references though (The menu works and I use external CSS and JS (JS is linked through the head and so isn't CSS)) My website to check out what it looks like on my site is http://www.kytancw.com/ and I use XHTML 1.0 strict:
HTML:
<!--Beginning Of Navigation Bar Container-->
<div id="navigationBar_container">
<ul id="sddm">
<li>
<a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">
Home
</a>
<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">
HTML Drop Down
</a>
<a href="#">
DHTML Menu
</a>
<a href="#">
JavaScript DropDown
</a>
<a href="#">
Cascading Menu
</a>
<a href="#">
CSS Horizontal Menu
</a>
</div>
</li>
<li>
<a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">
Download
</a>
<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">
ASP Dropdown
</a>
<a href="#">
Pulldown menu
</a>
<a href="#">
AJAX Drop Submenu
</a>
<a href="#">
DIV Cascading Menu
</a>
</div>
</li>
<li>
<a href="#">
Order
</a>
</li>
<li>
<a href="#">
Help
</a>
</li>
<li>
<a href="#">
Contact
</a>
</li>
</ul>
<div id="empty">
</div>
</div>
<!--Ending Of Navigation Bar Container-->
CSS:
#navigationBar_container {
text-align: center;
position: relative;
bottom: 18px;
}
#sddm {
margin: 0;
padding: 0;
z-index: 30;
}
#sddm li {
margin: 0;
padding: 0;
list-style: none;
float: left;
font-weight: bold;
font-size: 11px;
font-family: arial;
}
#sddm li a {
display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 60px;
background-color: #5970b2;
color: #fff;
text-align: center;
text-decoration: none;
}
#sddm li a:hover {
background-color: #49a3ff;
}
#sddm div {
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background-color: #eaebd8;
border: 1px solid #5970b2;
}
#sddm div a {
position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background-color: #eaebd8;
color: #2875de;
font-size: 11px;
font-family: arial;
}
#sddm div a:hover {
background-color: #49a3ff;
color: #fff;
}
#empty {
clear: both;
}
JS:
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function mopen(id)
{
mcancelclosetime();
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
document.onclick = mclose;
|
|
|
|
|
|
|
// |
KytanCW
