При наведении на блок с выпадающим списком другие блоки меняют положение, надо чтобы другие не двигались вообще.
.tag{
display: inline-block;
}
.tag>ul>li
{
color: white;
display: inline-block;
width: 100px;
height:50px;
background:darkred;
transition: 1s all;
}
.tag:hover>ul>li
{
border-top-right-radius: 10px;
background:red;
}
.tag>ul>li>ul>li{
color: white;
background:darkblue;
height: 20px;
width: 50px;
display: none;
}
.tag>ul:hover>li>ul>li{
display: block;
}
<meta charset="UTF-8" />
<body id="WebBody"><div id="lang">
<span class="tag HTML"><ul>
<li>HTML
<ul>
<li class="drop">HTML5</li>
</ul>
</li>
</ul></span><span class="tag CSS"><ul>
<li>CSS3
<ul>
<li class="drop">CSS</li>
</ul>
</li>
</ul></span><span class="tag JS"><ul>
<li>JavaScript
<ul>
<li class="drop">jQuery</li>
</ul>
</li>
</ul>
</span>
</div>
</body>