особенности html и cssне изучены, центрирование блоков делают по разному, можно margin, можно position, внимательно читайте про позиционирование в чем разница между relative и absolute, когда поймете вопросов когда что использовать не будет
.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;
}