...

View Full Version : CSS + JS pull down menu problem



Jimbolgs
11-24-2011, 01:47 PM
Hello, this is not pretty because I've not copied all the styles, but as you'll see, the problem is the menu appears as expected, but disappears unexpectedly. It's ok whilst the cursor is over the padding but not the text.

Any help appreciated.



<html>
<head>
<style>
#thebox {
visibility:hidden;
background-color:#CCC;
width:150px;
border:solid 1px red;
padding:30px;
position:relative;
z-index:2;
top:-16px;
left:50px;
}
</style>
</head>
<body>
<div id="linkbar">
<div id="navcontainer">
<ul>
<li><a href="../index.html" title="Home" class="toplinks">Home</a></li>
</ul>
</div>
<div id="navcontainer">
<ul>
<li onmouseover="document.getElementById('thebox').style.visibility='visible';"><a href="../pages/1bedmain.html" title="1 bedroom properties" class="toplinks">1 bedroom<br />
<span class="linkline">Sleeps 2-4</span></a></li>
</ul>
</div>
</div><!--end link bar-->
<div id="thebox" onmouseout="document.getElementById('thebox').style.visibility='hidden';">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
</body>
</html>

sunfighter
11-24-2011, 04:05 PM
This was done real fast. Your gonna have to work with it, but it shows you what you need:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
#thebox{
visibility:hidden;
background-color:#CCC;
width:150px;
border:solid 1px red;
padding:30px;
position:relative;
z-index:2;
top:-32px;
left:65px;
}
#morebox{
visibility:hidden;
background-color:#CCC;
width:150px;
border:solid 1px red;
padding:30px;
position:relative;
z-index:2;
top:-275px;
left:65px;
}
</style>
</head>
<body>
<div id="linkbar">
<div id="navcontainer">
<ul>
<li><a href="../index.html" title="Home" class="toplinks">Home</a></li>
</ul>
</div>


<a href="../pages/1bedmain.html" title="1 bedroom properties" class="toplinks" onmouseover="document.getElementById('thebox').style.visibility='visible';" onmouseout="document.getElementById('thebox').style.visibility='hidden';">1 bedroom</a><br />
<a href="../pages/2bedmain.html" class="linkline" onmouseover="document.getElementById('morebox').style.visibility='visible';" onmouseout="document.getElementById('morebox').style.visibility='hidden';">Sleeps 2-4</a>



</div><!--end link bar-->
<div id="thebox" onmouseover="document.getElementById('thebox').style.visibility='visible';" onmouseout="document.getElementById('thebox').style.visibility='hidden';">
<p>1 bedroom</p>
<p>1 bedroom</p>
<p>1 bedroom</p>
<p>1 bedroom</p>
<p>1 bedroom</p>
</div>
<div id="morebox" onmouseover="document.getElementById('morebox').style.visibility='visible';" onmouseout="document.getElementById('morebox').style.visibility='hidden';">
<p>Sleeps 2-4</p>
<p>Sleeps 2-4</p>
<p>Sleeps 2-4</p>
<p>Sleeps 2-4</p>
<p>Sleeps 2-4</p>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum