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 class="current"><a href="#" title="Home">Home</a></li>
       <li><a href="#" title="Services">Services</a>
      <ul class="sub">
         <li><a href="#" title="Services > Webdesign">Webdesign</a></li>
         <li><a href="#" title="Services > Developement">Development</a></li>
         <li><a href="#" title="Services > Illustration">Illustration</a></li>
         <li><a href="#" title="Services > Search Engine">Search engine</a></li>
         <li><a href="#" title="Services > Wordpress">Wordpress</a></li>
      </ul>
       </li>
       <li><a href="#" title="Blog">Blog</a>
      <ul class="sub" >
         <li><a href="#" title="Services > Themes">Themes</a></li>
         <li><a href="#" title="Services > Plugins">Plugins</a></li>
      </ul>
    </li>
       <li><a href="#" title="Contact">Contact</a></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...

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 {
    //position: absolute;
    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: 100px;
    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;
}

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;
}