Back to discussion

CSS Drop down - Avoiding line break with div

Last post was 25 Aug 2009 at 18:18
html , css , javascript Bristol, United Kingdom
  • 11 years ago

    Hi. This is probably a simple thing for experienced css developers but I'm having trouble finding the answer.

    I want to be able to place a link anywhere on a page, and on clicking that link have a floating div displayed directly below that link, sort of like a drop down menu.

    The trouble I'm having is that I can't use position: absolute; to position the floating div, as I don't know exactly where the link will be. I can't use relative, as that inserts a line break for the div, which I don't want. It's not correct to nest divs within span elements, so I'm confused as to what to use. An example of the sort of html I wish to use is:

    Here is my list of other stuff which should be unaffected by the droppy downy
<a href="#">This is my link</a>
<div class="dropdownDiv"> 
    <ul id="dropdown_item_1">
    	<li>drop 1</li>
    	<li>drop 2</li>
    	<li>drop 3</li>
    </ul>
</div>
type thing which appears right over the middle of it.
    Report abuse
  • 11 years ago

    What about this? Yep, the "trigger" is NOT a link, it's a div. Maybe you give it a try...

    kr, zara

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
   <TITLE>hover test</TITLE>
    	<style>
    		body{
    			font: 11px/15px Tahoma;
    		}
    		.x{
    			position:relative;
    			display: inline;
    			font: 11px/15px Tahoma;
    		}
    		.x .popup{
    			display:none;
    			position: absolute;
    			top:0.5em;
    			left:0.5em;
    			background-color: #f2f2f2;
    			border: 2px solid #c2c2c2;
    			-moz-border-radius: 5px;
    			padding:2px;
    		}
    		.x:hover .popup{
    			display:block;
    		}
    	</style>   
</HEAD>


<BODY>

    some test

    <div class="x">
    	[hove here!]
    	<div class="popup">
    		<a href="#">testlink#1</a>
    		<a href="#">testlink#2</a>
    		<a href="#">testlink#3</a>
    	</div>
    </div>

    comes here.

</BODY>
</HTML>
    Report abuse

Post a reply

Enter your message below

Sign in or Join us (it's free).

JavaScript forum discussion

JavaScript tutorials

Quick links

Recent activity

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Web Development

Developer Jobs

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

Cancel
“It works on my machine.” - Anonymous