JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<div id="header">
<ul id="nav">
<li><a href="#">home</a></li>
<li><a href="#">item one</a>
  <ul>
    <li><a href="#">sub item one</a></li>
    <li><a href="#">sub item two</a></li>
    <li><a href="#">sub item three</a></li>
    <li><a href="#">sub item four</a></li>
    <li><a href="#">sub item five</a></li>
    <li><a href="#">sub item six</a></li>
  </ul>
</li>
<li><a href="#">item two</a>
    <ul>
    <li><a href="#">sub item one</a></li>
    <li><a href="#">sub item two</a></li>
  </ul>
</li>
</ul>
</div>
<div id="container">

<h1>Hi. This is a positioned H1</h1>
<p class="intro">This page is just some friendly content to show you just how bad IE really is. You could replace the absolutely positioned H1 above with a <code>&lt;select&gt; &lt;/select&gt;</code> as I do below, a Flash movie, or whatever you like.</p>
<form name="form" id="form">
  <label>To indicate this:</label>
  <select name="foo" id="foo">
    <option value="IE is mean">IE is mean</option>
    <option value="IE sucks">IE sucks</option>
    <option value="Maybe IE8 will be okay">Maybe IE8 will be okay</option>
  </select>
</form>
<object id="pdfshow"  style="background-color:#FFFFFF;" data="http://fzs.sve-mo.ba/sites/default/files/dokumenti-vijesti/sample.pdf" type="application/pdf" width="99.5%" height="550">
</object>

</div>
</div>

CSS

body {
text-align: center;
font: normal 76% Verdana, Arial, Helvetica, sans-serif;
padding: 1em;
line-height: 1.8em;
}
#wrapper {
width: 770px;
margin: 0 auto;
text-align: left;
border: 1px solid #ddd;
padding: 20px 10px;
}

#wrapper #header {
    position: relative;
    z-index: 2;
}

#wrapper #nav {
    clear: both;
    margin: 0 5px;
    padding: 0 5px;
    width: 750px;
    height: 30px;
    list-style: none;
    border-top: 1px solid #335a86;
    border-bottom: 1px solid #335a86;
    text-align: center;
    position: relative;
    z-index: 2;
}
#wrapper #nav li {
    float: left;
    margin: 0;
    padding: 0 0 5px 0;
    border: 0;
    position: relative;
}
#wrapper #nav li a {
    margin: 0;
    padding: 7px 15px;
    display: block;
    text-decoration: none;
    font-size: 1.2em;
}
#wrapper #nav a:link, #wrapper #nav a:visited {
    color: #888;
}
#wrapper #nav a:hover, #wrapper #nav a:focus {
    color: #335a86;
}

#wrapper #nav li ul {
    background-color: #ccc;
    border: 0;
    width: 150px;
    height: auto;
    list-style: none;
    margin: 0;
    padding: 5px 0 10px 0;
    border: 0;
    text-align: left;
    position: absolute;
  display: none;
}
#wrapper #nav li ul li {
    float: none;
    margin: 0;
    line-height: 30px;
    height: 30px;
}
#wrapper #nav li ul a {
    padding: 7px 10px;
    white-space: nowrap;
    display: block;
}
#wrapper #nav li:hover ul {
  display: block;
}

#wrapper #container {
    padding: 10px;
    position: relative;
}
#wrapper h1 {
    position: absolute;
    left: 10px;
    top: 10px;
    height: 60px;
    line-height: 60px;
    vertical-align: middle;
    font-size: 2em;
    background: #335a86;
    color: #fff;
}
#wrapper #container p.intro {
    margin-top: 60px;
}
#wrapper #container p {
    margin: 1em 0;
}
#wrapper #container form {
    padding: 1em 0;
}
#wrapper #container label, #wrapper #container select {
float: left;
display: block;
margin: 0 1em 0 0;
}