JSFiddle - React, Tailwind, and code Playground

by ferz

HTML

<!DOCTYPE HTML>
<html>
<head>
<base href="http://www.top-smex.ru">
    <meta charset="UTF-8">
    <title>Lorem ipsum dolor sit amet, theophile atque leno caelum ut libertatem</title>
    <link rel="stylesheet" href="n.css">
   </head>
<body>
    <header>
        <a href=" http://www.top-smex.ru "><img src="  http://s0.tchkcdn.com/glamur/g_200810/img_news_list/d7c0d541bf2d3f42afe9e0859c4f21ac.jpg  "></a>
<nav>









<ul id="nav">
       <li><a href="#" title="">коллекции</a>
      <ul class="sub">
         <li><a href="#" title="">Одежда для будущих и кормящих мам весна-лето 2012</a></li>
         <li><a href="#" title="">Одежда для беременных женщин зима-весна-лето 2012</a></li>
         <li><a href="#" title="">Одежда для кормящих мам зима-весна-лето 2012</a></li>
         <li><a href="#" title="">Май-слинги</a></li>
         <li><a href="#" title="">Фаст-слинги</a></li>
         <li><a href="#" title="">Слинги с кольцами</a></li>
         <li><a href="#" title="">Верхняя одежда для беременных и слингомам</a></li>
      </ul>
       </li>
</ul>







</nav>
</header>
<div id="content">
    <section>
    Lorem ipsum dolor sit amet, theophile atque leno caelum ut libertatem accipies Antiochus ac iuro
    Lorem ipsum dolor sit amet, theophile atque leno caelum ut libertatem accipies Antiochus ac iuro
    Lorem ipsum dolor sit amet, theophile atque leno caelum ut libertatem accipies Antiochus ac iuro
    Lorem ipsum dolor sit amet, theophile atque leno caelum ut libertatem accipies Antiochus ac iuro
    Lorem ipsum dolor sit amet, theophile atque leno caelum ut libertatem accipies Antiochus ac iuro
    </section>
    <section>
    Lorem ipsum dolor sit amet, theophile atque leno caelum ut libertatem accipies Antiochus ac iuro
    Lorem ipsum dolor sit amet, theophile atque leno caelum ut libertatem accipies Antiochus ac iuro
    Lorem ipsum dolor sit amet, theophile atque leno caelum ut libertatem accipies Antiochus ac iuro
    Lorem ipsum dolor sit amet,...

CSS

header a img
{
width: 100%;
position: relative;
min-width: 530px;
max-height: 200px;
min-height: 150px;
}
body{margin: 0;}
div#content
{
position: relative;
width: 70%;
min-width: 400px;
display: inline-block;
}
section
{
margin: 1%;
}
nav
{
min-width: 530px;
 position: absolute;
 margin-top: -29px;
}
aside 
{
background: #000fff;
position: absolute;
display: inline-block;
width: 30%;
}
footer
{
background: #000;
width: 100%;
left: 0%;
bottom: 0%;
position: fixed;
color: #fff;
text-align: center;
}







////////////////////////////////////////////////////////////////////////////////////////////



































ul#nav {
    list-style: none;
    padding: 0;
    margin: 0;
}


ul#nav li a {
    display: block;
    font-weight: bold;
    padding: 2px 10px;
    background:#f9f9f9;
}

ul#nav li a:hover{
    background:#888;
    color:#fff;
    }
    
li {
    float: left;
    position: relative;
    width: 300px;
    text-align: center;
    margin-right:5px;
    border:1px solid #ccc;

}

ul#nav li.current a{
    background:#ddd;
    }

ul#nav li.current a:hover{
position: absolute;
    background:#888;
    }

li ul {
    display: none;
    position:absolute;
    width:100px;
    top: 18px;
    left: 0;
    font-weight: normal;
    padding: 1px 0 10px 0;
    margin-left:-1px;
    z-index: 200;
}

ul#nav li ul.sub li{
    border-width:0 1px 1px 1px!important;
}

ul#nav li ul.sub li a{
    font-weight: normal!important;    
}
li>ul {
position: absolute;
    top: auto;
    left: auto;
}

li:hover ul, li.over ul {
    display: block;
}