JSFiddle - React, Tailwind, and code Playground

by xaliber

HTML

<link rel="stylesheet" href="http://design.uh.edu/~salimuel/rebuildamerica/css/css.css">
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather+Sans:400,700' rel='stylesheet' type='text/css'>

<link rel="stylesheet" type="text/css" href="css/css.css" />

<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
</head>

<body>
<div id="container">
<div id="block">
</div>
<div id="navigation">
	<div id="logo">
	<a href="index.html">Rebuild America</a>
	</div>
    <ul id="nav">

    <li><a href="news.html">News</a></li>

    <li><a href="getinvolved.html">Get Involved</a></li>

    <li><a href="condition.html">Condition</a>

      	<ul>
      		<li><a href="highway.html">Highway</a></li>
      		<li><a href="aviation.html">Aviation</a></li>
      		<li><a href="bridge.html">Bridge</a></li>
      		<li><a href="electricity.html">Electricity</a></li>
      		<li><a href="water.html">Water &amp; Sewage</a></li>
      	</ul>
      	</li>
    
    <li><a href="about.html">About</a>
      	<ul>
      		<li><a href="foundation.html">Foundation</a></li>

      		<li><a href="board.html">Board &amp; Staff</a></li>
      	</ul>
      </li>

  </ul>
  </div>
</div>
 
  <div id="wrapper">
  <p id="hometitle">Rebuilding the American Dream</p>
  <p id="homecontent">US infrastructure was in the era of rapid development in the 1950s. Half a century later the nation's infrastructure is left behind other developed countries.</p>
  <p>
  </div>

<footer>
 <ul>
      <li><span class="email"><a href="mailto:[email protected]">Contact Us</a></li>
      <li>&#124;</li>
      <li><a href="http://www.twitter.com/rebuildamerica">Twitter</a></li>
</ul>
</footer>

</body>
</html>

CSS

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#nav {
    padding: 0;
    padding-top: 7px;
    list-style: none;
    font-weight: bold;
    text-align: right;
    position: relative;
    float: right;
    width: auto; /* ini ngeganti width:100%, jadi gak melebar ke tempat yg ga perlu
                    sekaligus ini membuat supaya dropdown-nya bisa nempel */
    margin-right: 10px; /* mengenai ini, cek :last-child di paling bawah */
}

#nav li {
    display:inline-block;
    margin-right: 10px;
    position: static;
    /* position: relative; // relative-nya dipindah ke #nav.
                            ini position:static nge-disable yg ada di external CSS aja
                            (yg di /~salimuel/ ) */
    float:none; /* nge-disable float yang ada di external CSS sekarang,
                kalo udah gak ada float-nya gak perlu ini */
}

#nav li:hover ul {
    left: 0;
    background: #336699;
    width: 100%; /* supaya dia full width */
}

#nav li:last-child {
 margin-right: 0; /* untuk margin di menu paling kanan, di-define jangan dari li-nya,
                    tapi dari #nav-nya sendiri.
                    ini juga supaya dropdown menu-nya gak tampak aneh
                    bro-tip: kalau menunya di sebelah kanan, lebih baik define margin-nya li
                            margin-left;
                             kalau menunya di sebelah kiri, baru define margin-nya li
                            margin-right
                             karena sisi pojoknya adalah sisi pengatur */   
}