0

При наведении на блок с выпадающим списком другие блоки меняют положение, надо чтобы другие не двигались вообще.

.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>

1

1 ответ 1

0

Не нужно давать строчному элементу display : block при наведении и не будет ничего "скакать".

.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;
    opacity: 0;
}
.tag>ul:hover>li>ul>li{
opacity: 1;
}
<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>

3
  • Это как фраза с Гарри Поттера, "Ну вот, теперь кость не сломано и рука больше не болит., - Не сломана, теперь кости вообще НЕТ!!!"
    – RifmaMan
    22 июн 2018 в 12:44
  • 1
    Максим Ленский ! Благодарю за комментарий. Поправил! 22 июн 2018 в 13:05
  • @DzianisSadouski вот это можете как вариант добавить - так красивее смотрится : jsfiddle.net/qtfxLpun/10
    – user33274
    22 июн 2018 в 13:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.