Horizontales Menu

[djihad]

Hallo!

Ich bin relativ neu in der Materie und möchte eine einfache Homepage gestalten. Dazu möchte ich aus einer Vorlage (siehe Anhang) ein horizontales Menu mit HTML und CSS realisieren.
Allerdings steh ich auf dem Schlauch. Auf den farbigen Elementen sollen später die Unterseiten angezeigt werden. Wie kann ich die farbigen Elemente realisieren?

Mein HTML-Code:

 <ul class="menu"> 
 <li id="menu1">BLOG </li>   
 <li id="submenu1"></li>
 <li id="menu2"> MUSIC </li>     
 <li id="submenu2"></li>
 <li id="menu3"> CONTACT </li>  
 <li id="submenu3"></li> 
 </ul>

Mein CSS-Code:

.menu {
    height:3em;
    margin-left:0.5em;
    margin-bottom: 0.5em;
    display:inline;
    padding: 10px 0 10px 0;
}

#menu1 { 
color:#639;
display:inline;
  }

#menu2 { 
color: #0C6;  
display:inline;
  }
#menu3 { 
color: #36F;  
display:inline;
  }
#submenu1 { 
  color:#FFF; 
  background-color: #639;
  width:15em;
  display:inline;
  min-width:15em;
  }
#submenu2 { 
  color:#FFF; 
  background-color:#0C6;
  width:15em;
  display:inline;
  }
#submenu3 
{ 
  color:#FFF; 
  background-color:#36F;
  width:15em;
  display:inline;
  }

 

[spaceCookie]

Normalerweise werden Untermenüs in den <li>'s des Hauptmenüs untergebracht.

<ul id="menu">    
    <li>        
        <a href="#">Punkt 1</a>        
        <ul>            
            <li>Sub 1</li>            
            <li>Sub 2</li>        
        </ul>    
    </li>    
    <li><a href="#">Punkt 2</a></li>    
    <li>        
        <a href="#">Punkt 3</a>        
        <ul>            
            <li>Sub 1</li>        
        </ul>    
    </li>            
</ul>

Mit CSS dann noch anständig formatieren:

/* Eigenschaften für das Main Menü */


ul#menu{
    list-style: none;
}


ul#menu li{
    float: left;
    width: 150px;
    background: #a0a0a0;
    margin-right: 1px;
}


/* Eigenschaften für das Submenü */


ul#menu li ul{
    position: absolute;
    display: none;
}


ul#menu li ul li{
    clear: both;
    background: #ff0000;
    margin-top: 2px;
}


/* Anzeigen des Submenüs beim hovern auf entsprechenden Punkt im Main Menu */


ul#menu li:hover ul{
    display: block;
}