Thread: Drop down Menu Alignment Issue
Results 1 to 1 of 1
Related
-
Wordpress CSS content alignment issue Forum: CSS Forum
Replies: 0 -
Alignment issue on IE8 Forum: CSS Forum
Replies: 1 -
vertical drop down menu with 'sub drop downs' problem Forum: Javascript Forum
Replies: 2 -
Need some help with alignment issue.... Forum: HTML Forum
Replies: 3 -
Issue With Drop Down Menu On Macs... Forum: Javascript Forum
Replies: 3
-
02-06-2010, 06:45 PM #1
Drop down Menu Alignment Issue
Hi,
I'm trying to create a simply drop down navigation. I just about have it except I cannot get the drop down to align correctly under its appropriate parent. Any advice would be appreciated!
Here is my code:
HTML:
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">About</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Board</a>
<a href="#">Officers</a>
<a href="#">History</a>
</div>
</li>
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Mission</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Boots</a>
<a href="#">Books</a>
<a href="#">Business</a>
<a href="#">Banks</a>
</div>
</li>
<li><a href="news.html">News</a></li>
<li><a href="partnerships.html">Partnerships</a></li>
</ul>
</div>
CSS:
#navigation {
height: 30px;
width:960px;
border-top: solid #000 1px;
border-bottom: solid #000 1px;
background-color: #092B59;
}
#navigation ul {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
line-height: 30px;
white-space: nowrap;
}
#navigation li {
list-style-type: none;
display: inline;
}
#navigation li a {
text-decoration: none;
padding: 7px 10px;
color: #FFF;
}
#navigation li a:link {
color: #FFF;
}
#navigation li a:visited {
color: #CCC;
}
#navigation li a:hover {
color: #FFF;
background-color: #B4C5D9;
}
#navigation div {
display: block;
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #092B59;
}
#navigation div a {
position: relative;
display: block;
margin: 0;
padding: 0px 5px;
width: 75px;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #092B59;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
#navigation div a:hover {
background: #b4c5d9;
color: #FFF;
}
javascript:
<script type="text/javascript">
// Copyright 2006-2007 javascript-array.com
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
</script>
Many thanks,
Karen
Cloudjiffy- PaaS for Developers
10-05-2020, 12:30 AM in Web Hosting Forum