Question

I want to show a div below the items in the horizontal menu, when I click on an item a div appears below the menu and starts where the item starts.
(I am not asking about how to show the DIV, only how to position it below the menu item)

<ul class="googleTab">
    <li class="active">item1</li>
    <li>item2</li>
    <li>item3</li>
        <li>item4</li>
        <li>item5</li>
</ul>

and the following css to make the style of horizontal menu

ul.googleTab                {
    direction: rtl;
    background: #848383;
    padding:0 5px;
    font-size:13px;
    color:#3366cc;
    overflow:hidden;
    background:-moz-linear-gradient(0% 100% 90deg,#f5f5f5, #ffffff);
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#f5f5f5));
}
ul.googleTab li {
    float:right;
    padding:7px 8px;
    border-top:solid 2px #bad3ea;   
         border-left-width:1px;
      border-left-color:#eee;
      border-left-style:solid;
}
ul.googleTab li.active{
    border-top: solid 3px #1a54e1;
    color:#363636;
    font-weight:bold;

}
ul.googleTab li:hover   {
    background:#e4ebf8;
    cursor:pointer;
}

Answer 1

You could place the item inside a ul inside the li instead of using a div like

<ul>
<li>
<ul><li></li></ul>
</li>
</ul>

then position:absolute; the embedded <ul> and push it off the page to hide then bring back with js and position where you want it with top: and left: