Witam programistów, mam problem z ułożeniem jeden obok drugiego 4 opcji menu. Pewnie jest to dość banalny problem ale głowię się nad tym już kilka godzin a chcę ruszyć dalej.
Dodaję również załącznik ze zdjęciem.
HTML
<body>
<div class="wrapper">
<div class="header">
<div class="social">
<div class="socialdivs">
<div class="fb">
<div class="icon-facebook"></div>
</div>
<div class="ig">
<div class="icon-instagram"></div>
</div>
<div class="snapchat">
<div class="icon-snapchat-ghost"></div>
<div class="clear: both"></div>
</div>
</div>
</div>
<div class="logo"> <b><span style="color: #00FF00">Healthly</span></b><span style="color: #5f5f5f">Blog</span></div>
</div>
<div class="menu">
<ol>
<li> <a href="#"><b>Strona główna</b></a></li>
<li> <a href="#"><b>Przepisy</b></a>
<ul>
<li><a href="#">Śniadanie</li>
<li><a href="#">Lunch</li>
<li><a href="#">Obiad</li>
<li><a href="#">kolacja</li>
</ul>
</li>
<li> <a href="#"><b>O mnie</b></a></li>
<li> <a href="#"><b>Kontakt</b></a></li>
</ol>
</div>
CSS
body
{
width: 100%;
background-image: url(restaurant_icons.png);
font-family: 'Raleway', sans-serif;
font-size: 20px;
margin: 0 !important;
}
.wrapper
{
width: 100%;
}
.header
{
width: 100%;
}
.social
{
width: 100%;
background-color: #7e7e7e;
margin-left: auto;
margin-right: auto;
height: 37px;
border-bottom: 1px solid #363636;
border-top: 1px solid #363636;
}
.socialdivs
{
width: 150px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
text-align: center;
}
.fb
{
width: 50px;
float: left;
}
.fb:hover
{
background-color:#3232CD;
}
.ig
{
width: 50px;
float: left;
}
.ig:hover
{
background-color:#FF0000;
}
.snapchat
{
width: 50px;
float: left;
}
.snapchat:hover
{
background-color:#D9D919;
}
.logo
{
width: 450px;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 40px 0;
font-size: 50px;
}
.menu
{
width: 100%;
background-color: #D8BFD8;
padding: 10px 0;
border-bottom: 1px solid #DB70DB;
border-top: 1px solid #DB70DB;
text-align: center;
}
.content
{
width: 1000px;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
margin-bottom: 40px;
}
.footer
{
width: 100%;
background-color: #696969;
text-align: center;
padding: 20px 0;
border-bottom: 1px solid #262626;
border-top: 1px solid #262626;
}
ol
{
padding: 0;
margin: 0;
list-style-type: none;
font-size: 18px;
height: 35px;
line-height: 200%;
display: inline-block;
}
ol a
{
color: #323232;
text-decoration: none;
display: block;
}
ol > li
{
width: 150px;
height: 40px;
float: left;
border-right: 1px dashed #DB70DB;
}
ol > li:first-child
{
border-left: 1px dashed #DB70DB;
}
ol > li:hover
{
background-color: #cc99cc;
}
ol > li > ul
{
list-style-type: none;
padding: 0;
margin: 0;
height: 40px;
display:none;
}
ol > li:hover > ul
{
display: block;
}
ol > li > ul > li
{
background-color: #cc99cc;
position: relative;
z-index: 100;
border-top: 1px dashed #DB70DB;
}
Jestem tu nowy i z góry dziękuję za pomoc :)