html.de - Submenu Elemente verschieben sich

by SpiceLab

HTML

<div id="menu">
    <ul>
      <li class="topmenu">
        <a href="">Menü 1</a>
        <ul>
          <li class="submenu"><a href="">Unterpunkt 1.1</a></li>
          <li class="submenu"><a href="">Unterpunkt 1.2</a></li>
        </ul>
      </li>
      <li class="topmenu">
        <a href="">Menü 2</a>
        <ul>
          <li class="submenu"><a href="">Unterpunkt 2.1</a></li>
          <li class="submenu"><a href="">Unterpunkt 2.2</a></li>
        </ul>
      </li>
      <li class="topmenu">
        <a href="">Menü 3</a>
        <ul>
          <li class="submenu"><a href="">Unterpunkt 3.1</a></li>
          <li class="submenu"><a href="">Unterpunkt 3.2</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <hr id="linie">
 
    <div id="infobox">
      <h2 class="titelbox">INFOBOX</h2>
      <p class="textbox">Infotext</p>
    </div>

CSS

#menu {
height: 40px;
    background-color:white;
    color:black;
      margin-left: 30px;
  margin-right: 0px;
 
}
 
#menu ul {
text-align:center;
    list-style-type:none;
  margin:0px;
  padding:0px;
}
 
#menu li.topmenu {
  float:left;
  position:relative
}
.topmenu a {
  float:left;
  width:110px;
  text-align:center;
}
 
.topmenu ul{
  display:none;
}
 
.topmenu a, .submenu a{
  padding:0px 5px;
 
  color:black;
  font-weight:bold;
  text-decoration:none;
  background-color:white;
  margin:0;
      height: 40px;
    line-height:40px;
   
    font-weight:bold;
}
 
.submenu a{
  font-size:12px;
  width:110px;
position:relative;
  clear:both; /* special IE6 */
}
 
#menu a:hover, .topmenu.on a {
  color:white;
  background-color:black;
 
}
 
.topmenu:hover ul {
  position:absolute;
  display:block;
  z-index:500;
  top:40px
}
 

ul.ausruestung li {
    list-style-type:none;
line-height:1,7em;
    display:block;
}
.topmenu ul {
    display:none;
}
.begruß {
    padding-top: 10px;
    padding-left: 40px;
    margin-right: 20px;  
    line-height:20px;
}
h4.unterschriften {
    padding-top: 10px;
    padding-left: 40px;
   
}
p.textbox {
    margin-left:10px;
    margin-right: 10px;
}
 
 
#linie {
  margin-left: 30px;
  margin-right: 30px;  
}
 
 
 
#infobox{
    background-color: red;
    width: 20%;
    height:20%;
    margin-left: 30px;
    margin-right: auto;
float:left;
 
}
#infobox h2 {text-align:center}