Archief - CSS: Probleempje met CSS menu

Pixie360 · 30 apr 2008

Voor school moet ik een website maken over Lotus Bakeries en daarom heb ik een suckertree menu gebruikt. Maar nu is mijn probleem dat ik in Firefox het menu tezien krijg dat ik wil maar in IE is het compleet fout. Daarom dat ik iemand zijn hulp nodig heb.

Screenshots:
IE: http://img388.imageshack.us/img388/2453/ieuf9.jpg
FF: http://img396.imageshack.us/img396/8752/ffqa1.jpg

index pagina + CSS:
http://www.box.net/shared/1005r0w8ww

menu code:

Code:

<ul id="content_menu">
            <li><a href="#">Over Lotus Bakeries</a>
              <ul>
              <li><a href="#">Corporate Strategy</a></li>
              <li><a href="#">Markten/Verkoop</a></li>
              <li><a href="#">Productievestigingen</a></li>
              <li><a href="#">Corporate History</a></li>
              <li><a href="#">Contact</a></li>
              </ul>
            </li>
            <li><a href="#">Producten</a>
              <ul>
              <li><a href="#">Productgroepen</a></li>
              <li><a href="#">Kwaliteitsbeleid</a></li>
              <li><a href="#">Productieprocessen</a></li>
              </ul>
            </li>
            <li><a href="#">Markten/Landen</a></li>
            <li><a href="#">Investor Relations</a>
             <ul>
              <li><a href="#">Corporate Governance</a>
                  <ul>
                  <li><a href="#">Corporate Governance Charter</a></li>
                  <li><a href="#">Governance in jaarverslag</a></li>
                  <li><a href="#">Raad van Bestuur</a></li>
                  <li><a href="#">Management Groep</a></li>
                  </ul>
              </li>
              <li><a href="#">Financiële gegevens</a></li>
              <li><a href="#">Aandeelhoudersgids</a></li>
              <li><a href="#">Jaarverslagen</a></li>
              <li><a href="#">Pers- en Financiële Berichten</a></li>
              <li><a href="#">Contact</a></li>
              </ul>
            </li>
           
            <li><a href="#">Jobs</a>
              <ul>
              <li><a href="#">HRM</a></li>
              <li><a href="#">Vacatures</a></li>
              <li><a href="#">Studenten</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
            </li>
            <li><a href="#">Archief</a></li>
          </ul>

CSS code:

Code:

.content_menu ul{
   margin: 0;
   padding: 0;
   padding-bottom: 3px;
   list-style-type: none;
   width: 160px; /* Width of Menu Items */
}
   
.content_menu ul li{
   margin: 0px;
   position: relative;
   height: 26px;
   padding-top: 2px;
}
   
/*Sub level menu items */
.content_menu ul li ul{
   position: absolute;
   width: 160px; /*sub menu width*/
   top: 0;
   visibility: hidden;
}

/* Sub level menu links style */
.content_menu ul li a{
   display: table-cell;
   overflow: auto; /*force hasLayout in IE7 */
   color: #9d7334;
   text-decoration: none;
   padding: 1px 5px;
   height: 26px;
   width: 160px;
   background-color: #fdefc9;
   border-left: 3px solid #ead6ab;
   vertical-align: middle;
   text-align: left;
}

.content_menu ul li a:visited{
   color: #9d7334;
}

.content_menu ul li a:hover{
   color: #9d7334;
   background-color: #f7e8c0;
   height: 26px;
   border-left: 3px solid #9d7334;
}
   
/* Holly Hack for IE \*/
* html .content_menu ul li { float: left; height: 1%; }
* html .content_menu ul li a { height: 1%; }
/* End */

Archief - CSS: Probleempje met CSS menu

Pixie360

Legacy Member