CSS Drop down - Avoiding line break with div

html , css , javascript Bristol, United Kingdom
  • 8 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.
    
  • 8 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>
    

Post a reply

Enter your message below

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

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!

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.

“God could create the world in six days because he didn't have to make it compatible with the previous version.”