Editor de HTML online

<style type="text/css">
body {margin:0; padding:0;
font-family:Verdana, Arial, sans-serif;
font-size:small;}
#header {
padding:20px;
background:#333;
border-bottom:1px solid #fff;}
#header h1 {
padding:0; margin:0;
color:#ccc;
font-family:Verdana, serif;
font-weight:bold;
font-size:190%;}
#nav {
float:left;
width:100%;
margin:0; padding:0;
list-style:none;
background:#ccc;
border-bottom:1px solid #999;}
#nav li {
float:left; margin:0; padding:0;}
#nav a {
float:left;
display:block;
padding:6px 30px 6px 5px;
text-decoration:none;
font-weight:bold;
font-size:90%;
color:#666;
background:#ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMc_HRadYVkiRvly8-UiTnltvk_sL7cbRg3bnA0KnH-3XOQB6ZmBbDu3JMIqi0eElEJVnhbPSL6yOp_7WpwoAKIP1-SiGKXhfY-txwKEw6WyLQndrCmAAAmnBxbuOASQE2lAAwJxX2JeA/s400/nav_slant.gif)no-repeat top right;
}
#nav #nav-1 a {padding-left:20px;}
#nav a:hover {color:#000;}
</style>

<div id="header">
<h1>Ciudad Blogger</h1>
</div>
<ul id="nav">
<li id="nav-1"><a href="#">Inicio</a></li>
<li id="nav-2"><a href="#">Directorio</a></li>
<li id="nav-3"><a href="#">Contacto</a></li>
<li id="nav-4"><a href="#">Acerca de</a></li>
</ul>