Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    32
    Thanks
    15
    Thanked 0 Times in 0 Posts

    CSS + JS pull down menu problem

    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.

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

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,206
    Thanks
    23
    Thanked 605 Times in 604 Posts
    This was done real fast. Your gonna have to work with it, but it shows you what you need:

    Code:
    <!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>

  • Users who have thanked sunfighter for this post:

    Jimbolgs (11-24-2011)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •