Menu
how would i get the blue backgrund to be pushed over to the inside of the border when you hover and also break that in to another box right under the main nav so the top of the blue div with dashed border would go right below research resources, services, About the Lib. grey div….
[CODE]window.onload = initAll;
function initAll() {
var allLinks = document.getElementsByTagName(“a”);
for (var i=0; i<allLinks.length; i++) {
if (allLinks[i].className.indexOf(“menuLink”) > -1) {
allLinks[i].onclick = function() {return false;}
allLinks[i].onmouseover = toggleMenu;
}
}
}
function toggleMenu() {
var startMenu = this.href.lastIndexOf(“/”)+1;
var stopMenu = this.href.lastIndexOf(“.”);
var thisMenuName = this.href.substring(startMenu,stopMenu);
document.getElementById(thisMenuName).style.display = “block”;
this.parentNode.className = thisMenuName;
this.parentNode.onmouseout = toggleDivOff;
this.parentNode.onmouseover = toggleDivOn;
}
function toggleDivOn() {
document.getElementById(this.className).style.display = “block”;
}
function toggleDivOff() {
document.getElementById(this.className).style.display = “none”;
}
[CODE]
<head>
<link rel=”stylesheet” rev=”stylesheet” href=”script01.css” />
<script type=”text/javascript” language=”Javascript” src=”script01.js”>
</script>
</head>
<body>
<div class=”mainMenu”>
<a href=”menu1.htm” class=”menuLink”>Research Resources</a>
<ul class=”menu” id=”menu1″>
<li><a href=”#”>Library Catalog</a></li>
<li><a href=”#”>Library Databases A-Z</a></li>
<li><a href=”#”>Resources by Subject</a></li>
<li><a href=”#”>Find Articles</a></li>
<li><a href=”#”>Find Books</a></li>
<li><a href=”#”>Find Journals</a></li>
<li><a href=”#”>Find News & Newspapers</a></li>
</ul>
</div>
<div class=”mainMenu”>
<a href=”menu2.htm” class=”menuLink”>Services</a>
<ul class=”menu” id=”menu2″>
<li><a href=”#”>Borrow & Renew</a></li>
<li><a href=”#”>Reserves</a></li>
<li><a href=”#”>Interlibrary Loan</a></li>
<li><a href=”#”>Services for Distance Learners</a></li>
<li><a href=”#”>Services for Faculty</a></li>
</ul>
</div>
<div class=”mainMenu”>
<a href=”menu3.html” class=”menuLink”>About the Libraries
</a>
<ul class=”menu” id=”menu3″>
<li><a href=”#”>Locations & Hours</a></li>
<li><a href=”#”>Collections</a></li>
<li><a href=”#”>Special Collections & Archives</a></li>
<li><a href=”#”>Events, Exhibits & Publications</a></li>
<li><a href=”#”>Departments & Staff</a></li>
<li><a href=”#”>Spaces & Places</a></li>
<li><a href=”#”>Support the Libraries</a></li>
</ul>
</div>
</body>
</html>
[CODE]body {
background-color: white;
color: black;
}
div {
margin:3px;
width: 200px;
background-color:#33CCFF;
float: left;
text-align:center;
padding:-2px;
}
div .menuLink {
width: 200px;
background-color: grey;
float: left;
text-align:center;
padding:2px;
}
ul.menu {
position:relative;
left:50px;
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border:2px dashed black;
}
ul.menu li {
font: “Times New Roman”, helvetica, sans-serif;
padding-left: 10px;
text-align:left;
font-size:14px;
}
a.menuLink, li a {
text-decoration: none;
color: black;
}
a.menuLink {
font-size: 16px;
font-weight: bold;
}
li a:hover {
background-color: #060;
color: white;
}