Community discussion forum

Back to discussion

CSS Drop down - Avoiding line break with div

Last post was 25 Aug 2009 at 18:18
Tags: css, html, javascript Bristol, United Kingdom
  • 3 months 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.
    Post was edited on 12/08/2009 10:36:47 Report abuse
  • 3 months 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).

Ask a question

Related discussion

Related articles

Quick links

Recent activity

Languages

Web Development

Frameworks & Architecture

Other major sections

Cancel
Want to stay in touch with what's going on? Follow us on twitter!