Как сделать без перескакивания?

Question

[smoklew]

jsfiddle.net/fw81ctzm
При наведении на ЛДСП , всё меню перескакивает вниз, как это исправить? В чём ошибка?
Извиняюсь, только начинаю верстать...

Answer 1

[A K]

Вот так jsfiddle.net/Symphony/fw81ctzm/1

ul li div {
    position: absolute;
}

Comments

[smoklew]

в jsfiddle всё окей, но на локалке между вторым и третьим элементом нет отступа(впритык друг к другу), хотя все остальные имеют отступ как в jsfiddle, с чем это может быть связано?

Answer 2

[Сергей Зеленский]

самое простое что можно сделать

.wrapper
{
width: 1000px;
margin: 200px auto;
}
.slider 
{
    width:900px;
margin: inherit;
display: inline-block;
    position:absolute;
}
#p1
{

padding: 3px 30px;
font-size: 15px;
background: #706f7f;
color: #fff;
border-radius: 4px;
position: relative;

}
.slider li
{
display: inline-block;
}
#p1:hover
{
background: #1ea95b;
}
#p1:before
{
content: url(img/menu.png);
position: absolute;
left: 0;
top: 0;
display: none;
}
#p1:hover:before
{
display: block;
}
#submenu li
{
display: inline-block;
margin-left: 20.5px;
}
#submenu li:nth-child(2)
{
font-weight: 900;
}
#submenu
{
margin-top: 11px;
padding: 2px 7px 2px 2px;
border-radius-left: 10px;
border-radius:4px;
color: #fff;
background: #1ea95b;
position:absolute;
    top:30px;
display: none;
}

#p1:hover ~ #submenu
{
    display: block;
}

Comments

[smoklew]

в jsfiddle всё окей, но на локалке между вторым и третьим элементом нет отступа(впритык друг к другу), хотя все остальные имеют отступ как в jsfiddle, с чем это может быть связано?