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.

“Every language has an optimization operator. In C++ that operator is ‘//’”