JQuery/CSS: div positions

Question

I've a #hidden div appears when you hover a #HoverMe div, unhover it and it hides again. The #hidden have its sub-div which act like a dropdownlist. #hiddenuses position: absolute;.How do I force #hidden div to appear next to #HowerMe, and let its sub-div(inside #hidden div) appear under?

how it's like now:

                          ------------     
                         |  #HoverMe   |                            
                          ------------    
  ---------
 | #hidden |
 | --------|
 | car.name|        
 |---------|
 | car.name|  
  ---------

How I want

                      ------------     ---------
                     |  #HoverMe   |  | #hidden |                           
                      ------------    | --------|
                                      | car.name|        
                                      |---------|
                                      | car.name|  
                                       ---------

My code: I use my #HoverMe-div to show #hidden-div that have a list of content I want to show.

<div style="position: relative">
     <div id="HoverMe" >
         This owner own @Html.DisplayFor(model => model.TotCar) cars in total
     </div>              

     <div id="hidden" style="position: absolute; background-color: black"> //<------- hidden
         @foreach (var car in Model.Car) { 
             <div>@car.Name</div> 
          }
    </div>
 </div>

Answer 1

What do you think about this: https://jsfiddle.net/Lnw832L3/

HTML:

<div id="hoverBox">
    <p>
        Hover me!
    </p>
    <div id="hiddenBox">
        This is hidden.
        <div id="insideHiddenBox">
            This is another container inside the hidden box.
        </div>
    </div>
</div>

CSS:

#hoverBox p {
    background: red;
    width: 100px;
    float: left;
    margin: 0;
}

#hoverBox:hover #hiddenBox {
    display: block !important;
}

#hiddenBox {
    background: yellow;
    width: 100px;
    float: left;
    display: none;
}

#insideHiddenBox {
    background: orange;
    width: 100px;
}

Answer 2

If the position of the popup has to be absolute, you could add eventlisteners in javascript to position the element. Something like:

<div>
    <div id="HoverMe" style="width: 100px; background: green">
        Car
    </div>
    <div id="hidden" style="position: absolute; background-color: lightgray; display: none">
        <div>Car Info 1</div>
        <div>Car Info 2</div>
        <div>Car Info 3</div>
    </div>
</div>

<script>
    var hoverEle = document.getElementById("HoverMe");
    var popupEle = document.getElementById("hidden");

    hoverEle.addEventListener('mouseover', function () {
        var hoverRect = hoverEle.getBoundingClientRect(); // get the position of the hover element
        popupEle.style.left = (hoverRect.right + 16) + "px";
        popupEle.style.top = hoverRect.top + "px";
        popupEle.style.display = "block";

    }, false);

    hoverEle.addEventListener('mouseout', function () {
        popupEle.style.display = "none";
    }, false);
</script>