center the DIV when parent have 100% width

by Kheema Pandey

HTML

<div class="menu">
  <center>
    <ul id="navigation">
      <li class="dropdown">
        <a href="#">Dropdown</a>
        <ul class="sub_navigation">
          <li><a href="#">Sub Navigation 1</a></li>
          <li><a href="#">Sub Navigation 2</a></li>
          <li><a href="#">Sub Navigation 3</a></li>
        </ul>
      </li>
      <li class="dropdown"><a href="#">Dropdown</a>
        <ul class="sub_navigation">
          <li><a href="#">Sub Navigation 1</a></li>
          <li><a href="#">Sub Navigation 2</a></li>
          <li><a href="#">Sub Navigation 3</a></li>
        </ul>
      </li>
    </ul>
  </center>
</div>

CSS

.menu {
    position:fixed;
    top:90px;
    border:1px solid gray;
    width:100%;
}
ul {
    margin:0;
    padding:0;
    list-style-type:none;
    min-width:200px;
}

ul#navigation {
    float:left;
}

ul#navigation li {
    float:left;
    border:1px black solid;
    min-width:200px;
}

ul.sub_navigation {
    position:absolute;
    display:none;
}

ul.sub_navigation li {
    clear:both;
}

a,a:active,a:visited {
    display:block;
    padding:10px;
}