Simple horizontal menu

by Ovi Stof

HTML

<div id="navbar" >
      <ul>
        <li>
          <a href="#" title="">Link 1</a>
          <ul>
            <li><a href="#" title="">Link 1.1</a></li>
            <li><a href="#" title="">Link 1.2</a></li>
            <li><a href="#" title="">Link 1.3</a></li>
          </ul>
        </li>
        <li>
          <a href="#" title="">Link 2</a>
          <ul>
            <li><a href="#" title="">Link 2.1</a></li>
            <li><a href="#" title="">Link 2.2</a></li>
            <li><a href="#" title="">Link 2.3</a></li>
          </ul>
        </li>
        <li>
          <a href="#" title="">Link 3</a>
          <ul>
            <li><a href="#" title="">Link 3.1</a></li>
            <li><a href="#" title="">Link 3.2</a></li>
            <li><a href="#" title="">Link 3.3</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div style="width:100%;border:0px solid red;clear:both;overflow:auto;"></div>
    <p>
    Text de proba
    </p>
   <p>
   Sursa: <a href="https://stackoverflow.com/questions/2678663/css-drop-down-menus-pushing-page-content-down">StackOverflow.com</a>
   </p>

CSS

div#navbar {width:100%; border-bottom:1px solid green;background: #029241;overflow:auto;}	
div#navbar ul li {list-style-type: none!important;}
div#navbar ul, li {
  margin: 0;
  padding: 0;
}
div#navbar ul li a {display:inline-block;color:white; font-family:"Arial Narrow", Arial, sans-serif;padding-left:5px;text-decoration:none;}
div#navbar ul li:hover {background: #ccffcc;}
div#navbar ul li:hover a {color:green}
/* Display parent unordered list items horizontally */
div#navbar ul li {
  float: left;
  list-style: none;       /* Get rid of default Browser styling */
  margin-right: 25px;     /* Add some space between items */
  width:18%;
}
/* Hide inset unordered Lists */
div#navbar  ul li ul {
  display: none;
}
/* Un-Hide inset unordered Lists when parent <li> is hovered over */
div#navbar   ul li:hover ul {
  display: block;
  position: absolute;
  z-index:9999;

}
/* Clear the any element that may be "float: left;" (Essentially moves the item to the next line */
div#navbar ul li:hover ul li {
  clear: left;            
  border-bottom:1px solid green;
  height: 24px;
  padding-top:5px;
  min-width:150px;
  background: #ccffcc;
}
div#navbar ul li:hover ul li a {color:green;}