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>
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>