Can somebody help me please?
I'm having some problems with my drop down menu.
When I created drop down menu the whole Image bar is going down. Donno how to solve this problem. Here is the link to show the example:
http://www.npg-ltd.com/testing/index3.htm
And
HTML Code:
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>NPG</title>
<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="header"><img src="http://www.webforumz.com/images/npglogo.gif" width="90" height="116" /></div>
<div id="logo">Northern Procurement Group Limited</div>
<div id="banner">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="370" height="80">
<param name="movie" value="banner2.swf" />
<param name="quality" value="high" />
<embed src="banner2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="370" height="80"></embed>
</object>
</div>
<div id="navbar">
<div id="menu">
<dl class="home">
<dt onmouseover="javascript:show();"><a href="#">Home</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:show();"><a href="#">About Us</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:show('smenu3');"><a href="#">Services</a></dt>
<dd id="smenu3">
<ul>
<li><a href="#">Public Sector</a></li>
<li><a href="#">Private Sector</a></li>
<li><a href="#">Schools</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:show('smenu4');"><a href="#">Case Studies</a></dt>
<dd id="smenu4">
<ul>
<li><a href="#">Aims and Objectives</a></li>
<li><a href="#">Tasks </a></li>
<li><a href="#">Aims</a></li>
</ul>
</dd>
</dl>
<dl class="home">
<dt onmouseover="javascript:show();"><a href="#">Other Portfolio</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:show();"><a href="#">Contact Us</a></dt>
</dl>
</div>
<div id="imagebar"><img class="bar" src="http://www.webforumz.com/images/imgbar.jpg" /></div>
</div>
<div id="content">
<div id="secondarycontent">Welcome to Northern Procurement Group Limited </div>
<div id="primarycontent">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="400" height="280">
<param name="movie" value="assets/banner/banner.swf" />
<param name="quality" value="high" />
<embed src="assets/banner/banner.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="280"></embed>
</object></div>
</div>
<div id="footer">Copyright © NPG 2007</div>
</div>
</div>
</body>
</html>
and code for stylesheet:
- Code: Select all
#menu {
background-image: url(images/navback.jpg);
background-repeat: repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
z-index: 100;
clear: both;
width: 780px;
padding-bottom: 2px;
height: 20px;}
dl, dt, dd, ul, li {
list-style-type: none;
margin: 0;
padding: 0;}
#menu dl {
float: left;
width: 10em;}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background-image: url(images/navback.jpg);
background-repeat: repeat-x;}
#menu dd {
display: none;
border: 1px solid #333333;}
#menu li {
text-align: center;
background: #ecf8e4;}
#menu li a {
color: #006600;
text-decoration: none;
font-size: 90%;
display: block;
height: 100%;
border: 0 none;
padding-top: 2px;
padding-bottom: 2px;}
#menu dt a {
color: #FFFFCC;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;}
#menu li a:hover, #menu li a:focus {
color: #333333;
background-color: #FFF;}
#menu dt a:hover, #menu dt a:focus{
color: #ecf8e4;}
#imagebar{
position: relative;
margin-top: -20px;
clear: both;}
Is this something to do about z-index?
many thanks
Francesca
Problems with menu
May 9th, 2007, 16:28
Similar Threads
