Как исправить меню навигации в Firefox и Internet Explorer?

В Firefox меню навигации появляется под областью, в которой оно должно находиться. В Internet Explorer раскрывающееся меню не работает. Он отлично работает в Chrome и Opera. Я использовал visibility:hidden и visibility:visible для подменю.

Вот как это выглядит в Firefox: http://i.imgur.com/bQbKvhw.png

Вот как это должно выглядеть: http://i.imgur.com/LKip7Dv.png Меню проходит по всему экрану.

Вот HTML:

<div id="header">
        <img src="jawapa-logo.png" id="logo" height="60px" width="60px;">
        <ul>
          <li>
            <a href="index.html">
              Home
            </a>
          </li>
          <li>
            <a>
              My Projects &#9663;
            </a>
            <ul>
              <li>
                <a href="upside-down-text.html">
                  Upside Down Text
                </a>
              </li>
              <li>
                <a href="random-number.html">
                  Random Number
                </a>
              </li>
              <li>
                <a href="code-editor.html">
                  Code Editor
                </a>
              </li>
              <li>
                <a href="templates.html">
                  Website Templates
                </a>
              </li>
              <li>
                <a href="snake-game.html">
                  Snake Game
                </a>
              </li>
              <li>
                <a>
                  Random &#9657;
                </a>
                <ul>
                  <li>
                    <a href="matrix.html">
                      Matrix
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <a href="contact.html">
              Contact
            </a>
          </li>
          <li>
            <a href="about.html">
              About
            </a>
          </li>
        </ul>
      </div>

Вот CSS:

#logo {
  margin-right:20px;
}

#header {
  height:65px;
  line-height:65px;
  background-color:#222222;
  margin-top:0px;
  padding-left:20px;
  padding-right:20px;
  border-bottom:3px solid #28B899;
}

#header a {
  color:#999999;
  text-decoration:none;
  display:block;
  text-align:center;
}

#header a:hover {
}

#header ul {
  list-style:none;
  display:inline-table;
  padding:0;
  margin:0;
  position:absolute;
}

#header ul li {
  display:inline;
  position:relative;
  background-color:transparent;
  width:150px;
  float:left;
  padding:0;
  margin:0;
  text-align:left;
  min-width:200px;
}

#header ul li:hover {
  background-color:#111111;
}

#header ul ul {
  visibility:hidden;
  position:absolute;
}

#header ul ul li {
  background-color:#333333;
  min-width:200px;
  text-align:left;
}

#header ul ul li:hover {
  background-color:#222222;
}

#header ul li:hover > ul {
  visibility:visible;
  position:relative;
}

#header ul ul ul {
  visibility:hidden;
  position:absolute;
}

#header ul ul li:hover > ul {
  visibility:visible;
  position:absolute;
  left:100%;
  top:0;
  border-bottom:none;
}