JSFiddle - React, Tailwind, and code Playground
HTML
<div class="menu_footer">
<ul>
<li><a href="/index.html">Создание сайта</a></li>
<li><a href="portfolio/index.html">Портфолио</a></li>
<li><a href="service/index.html">Доп. услуги</a></li>
<li><a href="seo/index.html">Продвижение</a></li>
<li><a href="#">Заказать</a></li>
<li><a href="about/index.html">О студии</a></li>
<li><a href="contacts/index.html">Контакты</a></li>
</ul>
</div>
<div class="footer_box">
<div class="copyright">
<ul>
<li>1998-2012</li>
<li>© "Название"</li>
<li>Все права защищены.</li>
<li>Электронная почта: <a href='mailto:[email protected]' onclick="yaCounter4495861.reachGoal('mailclick'); return true;">[email protected]</a></li>
</ul>
</div>
<div class="support">
<ul>
<li>Тех.поддержка Пн-Сб с 9.00 до 23.00</li>
<li>Skype: <a title="Позвонить" href="skype:domen.com?call">Domen.com</a></li>
<li>ICQ: 812520</li>
<li>Электронная почта: <a href='mailto:[email protected]' onclick="yaCounter4495861.reachGoal('mailclick'); return true;">[email protected]</a></li>
</ul>
</div>
<div class="payment">
<img src="images/oplata.png" alt="Доступны наличная и безналичная формы оплаты, а также оплата пластиковыми картами." title="Доступны наличная и безналичная формы оплаты, а также оплата пластиковыми картами."/>
</div>
<div class='contacts'>
<address class='contacts_adress'>
<div class='section'>
<ul class='tabs'>
<li class='current'>Москва</li>
<li>Новосибирск</li>
<li>Краснодар</li>
</ul>
<div class='tab_box visible'>улица Ленинская слобода, дом 19, стр. 1<br />+7 (495) 123-45-67 <br /><a href='contact/map/#novosibirsk' title=''>Схема проезда </a></div>
<div class='tab_box'>улица Красный проспект, дом 79/1 <br/>+7 (383) 123-15-67 <br/><a href='contact/map/#moscow' title=''>Схема проезда </a></div>
<div class='tab_box'>Название улицы <br/>+7 (918) 123-45-67</div>
</div>
</address>
</div>
</div>
CSS
<!-- Меню подвал -->
.menu_footer {
width:1038px;
margin:0px 296px auto;
color:#fffca0;
font-size:16px;
line-height:18px;
font-style:italic;
}
.menu_footer:after {
content:"";
clear:both;
display:block;
}
.menu_footer ul {
margin:0;
padding:10px 10px 10px 40px;
list-style:none;
}
.menu_footer ul li:first-child {
padding:0 0px 0 0;
background:none;
}
.menu_footer ul li {
float:left;
padding:0 1px 0 57px;
background:url(../images/divider2.gif) no-repeat 0 4px;
}
.menu_footer ul li a {color:#000000;}
.menu_footer ul li a:hover {
color:#fffca0;
text-decoration:none;
}
<!-- Меню подвал -->
<!-- Копирайты -->
.copyright
{
float: left;
margin:20px 296px auto;
}
.copyright li
{
background: none;
color: #727679;
font: 11px verdana;
padding:0;
list-style-type: none;
}
<!-- Копирайты -->
<!-- Тех. поддержка -->
.support
{
float: left;
margin:20px -290px auto;
}
.support li
{
background: none;
color: #727679;
font: 11px verdana;
padding:0;
list-style-type: none;
}
<!-- Тех. поддержка -->
<!-- Оплата -->
.payment
{
float: left;
padding:40px 0 0 30px;
}
<!-- Оплата -->
.contacts
{
padding:20px 0 0 23px;
float: left;
}
.contacts_adress
{
font: 11px verdana;
color:#606060;
padding:0;
margin: 0;
line-height:18px;
}
.section
{
position: relative;
float: left;
width: 260px;
}
ul.tabs
{
padding: 0;
}
ul.tabs li.current
{
background: none;
font-weight: bold;
cursor: pointer;
color: #D10065;
padding: 0;
display: inline;
}
ul.tabs li
{
background: none;
font-weight: bold;
cursor: pointer;
color: #606060;
padding: 0;
display: inline;
margin-right: 15px;
}
.tab_box
{
display: none;
margin: -10px 0;
}
.tab_box.visible
{
display: block;
margin: -10px 0;
}
.contacts_adress .tab_box a
{
color: #606060;
text-decoration: underline;
}
.contacts_adress .tab_box a:hover
{
color: #606060;
text-decoration: none;
}
.footer_box
{
}