Изменение высоты Div при поплавке

Question

У меня есть два div и один из них будет перемещаться влево (первый). Но я понял, что это изменение высоты и ширины, и я не хочу этого. В чем проблема? Вот мой код с JS используется для плавающей DIV:

function batch() { 
 
    var projects = ["Batch Script Tutorial", "Manage your PC", "Yahoo joke"]; 
 
    var text = ""; 
 
    var i; 
 
    for (i = 0; i < projects.length; i++) { 
 
    text += projects[i] + "<br>"; 
 
    } 
 
    document.getElementById("batch").style.float = "left"; 
 
    document.getElementById("showbatch").innerHTML = text; 
 
}

.project { 
 
    background-color: #5318a0; 
 
    border-top-right-radius: 15px; 
 
    border-bottom-left-radius: 15px; 
 
    box-shadow: 2px 2px 3px black; 
 
    color: #efedf2; 
 
    font-family: helvetica, sans-serif; 
 
    font-size: 20px; 
 
    font-weight: normal; 
 
    padding: 5px 7px; 
 
    text-align: left; 
 
} 
 
.project:hover { 
 
    background-color: #8358ba; 
 
    border-radius: 2px; 
 
    box-shadow: 2px 2px 3px black; 
 
    color: #efedf2; 
 
    font-family: helvetica, sans-serif; 
 
    font-size: 20px; 
 
    font-weight: normal; 
 
    padding: 5px 7px; 
 
    text-align: left 
 
} 
 
.project:active { 
 
    background-color: #462076; 
 
    border-radius: 2px; 
 
    box-shadow: 2px 2px 1px white; 
 
    color: #efedf2; 
 
    font-family: helvetica, sans-serif; 
 
    font-size: 20px; 
 
    font-weight: normal; 
 
    padding: 5px 7px; 
 
    text-align: left 
 
}

<div><span class="project" id="batch" onclick="batch()">Projects</span> 
 
</div> 
 
<div id="showbatch" style="display:inline-block"></div>

Answer 1

HTML:

<span class="project" id="batch">Projects</span> 
<span id="showbatch" style="display:none; vertical-align:top;"> 
<ul> 
    <li>Batch Script Tutorial</li> 
    <li>Manage your PC</li> 
    <li>Yahoo joke</li> 
</ul> 
</span> 

JS:

$('#batch').click(function(){ 
    $('#showbatch').css('display', 'inline-block'); 
}) 

Fiddle