Question

I have this HTML:

<div class="info"> 
     Some Text Boom A <a  onclick="menu('id1');">Link</a> | More text
     <a onclick="menu('id2');">Another Link</a> | more text
     <ul id="id1" class="submenu"> 
       <li><a href="dfhdfh">A1</a></li> 
       <li><a href="aetjetjsd">A2 This is Long</a></li> 
       <li><a href="etetueb">A3</a></li> 
     </ul> 
    <ul id="id2" class="submenu"> 
       <li><a href="dfhdfh">B1</a></li> 
       <li><a href="aetjetjsd">B2</a></li> 
       <li><a href="etetueb">B3</a></li> 
     </ul> 
  </div> 

JavaScript:

function menu(id) { 
    var myLayer = document.getElementById(id); 
    if (myLayer.style.display == "none" || myLayer.style.display == "") { 
        myLayer.style.display = "block"; 
    } else { 
        myLayer.style.display = "none"; 
    } 
} 

CSS:

.info ul.submenu 
{ 
border: solid 1px #000; 
border-top: none; 
background-color: #fff; 
position: relative; 
top: 4px; 
width: 150px; 
padding: 6px 0px 0px 0px; 
z-index: 2; 
display: none; 
} 

.info ul.submenu li 
{ 
display: block; 
border: none; 
border-top: solid 1px #00ff00; 
} 

.info ul.submenu li a 
{ 
display: block; 
padding: 6px 0px 6px 4px; 
color: #ff0000; 
} 

.info ul.submenu li a:hover 
{ 
background: #0000ff; 
} 

This is how I want it to look when I click on the first link:

---------------------------------------------------------------------
Text Boom A [Link] | More Text [Another Link] | more text
---------------------------------------------------------------------
Stuff that i| A1              |iv is still shown. Text that is
underneath t| A2 This is Long |own. Text that is underneath the div 
is still sho| A3              |

This kind of works now, except for the A1,A2,A3 popup is always aligned to the far left under. How do I fix my CSS and/or HTML to achieve this effect?

Answer 1

You will have to manually set the left style for the ul element.

In javascript:

function menu(eSrc, id) { 
    var myLayer = document.getElementById(id); 
    if (myLayer.style.display == "none" || myLayer.style.display == "") { 
        myLayer.style.display = "block";
        myLayer.style.left = eSrc.offsetLeft + "px";
        myLayer.style.top = (eSrc.offsetTop + eSrc.offsetHeight) + "px";
    } else {
        myLayer.style.display = "none";
    }
}

Then, the HTML would be:

<div class="info"> 
    Some Text Boom A <a onclick="menu(this, 'id1');">Link</a> | More text
    <a onclick="menu(this, 'id2');">Another Link</a> | more text
    <ul id="id1" class="submenu">
        <li><a href="dfhdfh">A1</a></li> 
        <li><a href="aetjetjsd">A2 This is Long</a></li> 
        <li><a href="etetueb">A3</a></li> 
    </ul>
    <ul id="id2" class="submenu">
        <li><a href="dfhdfh">B1</a></li>
        <li><a href="aetjetjsd">B2</a></li>
        <li><a href="etetueb">B3</a></li>
    </ul>
</div> 

You have to pass a “reference” element so that you know where to position the element.

Also, for this to work, change position:relative; to position:absolute; in your CSS.