Menu orizzontale con liste ul e li, mostra gli elementi uno sotto l'altro.

Come da titolo, ho un menu orizzontale con le liste centrato. Ogni tanto si vede bene, altre volte si vede come se list-style: none; non ci sia...

Ecco due screen:

http://www.postimage.org/gxvBGPJ.jpg http://www.postimage.org/gxvBJjS.jpg

Questo è il codice che utilizzo:

Codice:

---

ul.menu_header {
        padding: 0;
        margin: 0 auto;
        list-style: none;
        list-style-type: none;
        display: table;
}

ul.menu_header li {
        float: left;
        list-style: none;
        list-style-type: none;
        margin: 3px;
}

.menu div.menu_drop_content {
        position: relative;
}

.menu div.menu_drop div.menu_drop_content_link, .menu div.menu_drop div.menu_drop_content_search, .menu div.menu_drop div.menu_drop_content_topic {
        visibility: hidden;
        position: absolute;
        height: 0;
        text-align: left;
}

.menu div.menu_drop div.menu_drop_content table {
        position: absolute;
        top: 0;
        left: 0;
        border-collapse: collapse;
}

.menu div.menu_drop div.menu_drop_content a.drop_link {
        background-color: #474d52;
        border: 1px solid #52575c;
        text-decoration: none;
        font-weight: bold;
        color: #9fa5ac;
        line-height: 30px;
        padding: 5px;
}

.menu:hover div.menu_drop div.menu_drop_content a.drop_link, .menu div.menu_drop div.menu_drop_content a.drop_link .drop_link:hover {
        text-decoration: none;
        color: white;
        background-color: #52575c;
        padding-bottom: 10px;
        border-bottom: 2px solid #52575c;
}

.menu div.menu_drop div.menu_drop_content div.list_links {
        background-color: #52575c;
        padding: 5px;
}

.menu div.menu_drop div.menu_drop_content div.list_links a {
        border-bottom: 1px solid #4c5155;
        text-decoration: none;
        color: #9fa5ac;
        display: block;
        padding-top: 5px;
        padding-bottom: 5px;
}

.menu div.menu_drop div.menu_drop_content div.list_links a:hover {
        color: white;
}

.menu div.menu_drop div.menu_drop_content img.menu_drop_arrow_up {
        height: 3px;
        width: 180px;
}

.menu div.menu_drop div.menu_drop_content:hover div.menu_drop_content_link,
.menu div.menu_drop a:hover div.menu_drop_content_link,
.menu div.menu_drop menu_drop_arrow_up :hover div.menu_drop_content_link {
        visibility: visible;
}

.menu div.menu_drop div.menu_drop_content:hover div.menu_drop_content_search,
.menu div.menu_drop a:hover div.menu_drop_content_search,
.menu div.menu_drop menu_drop_arrow_up :hover div.menu_drop_content_search {
        visibility: visible;
        width: auto;
}

.menu div.menu_drop div.menu_drop_content:hover div.menu_drop_content_topic,
.menu div.menu_drop a:hover div.menu_drop_content_topic,
.menu div.menu_drop menu_drop_arrow_up :hover div.menu_drop_content_topic {
        visibility: visible;
}

---

Questo è il sorgente:

Codice HTML:

---

<ul class="menu_header">
        <!-- BEGIN header_row -->
        <li>
                <div class="menu">
                        <div class="menu_drop">
                                <div class="menu_drop_content">
                                        <a href="#" class="drop_link">{header_row.CAT_ICON} {header_row.CAT_ITEM}</a>
                                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                                                <div class="menu_drop_content_link">
                                                        <img class="menu_drop_arrow_up" src="{SPACER}" />
                                                        <div class="list_links">
                                                                        <!-- BEGIN menu -->{header_row.menu.MENU_URL}<!-- END menu -->
                                                        </div>
                                                </div>
                                        <!--[if lte IE 6]></td></tr></table><![endif]-->
                                </div>
                        </div>
                </div>
        </li>
        <!-- END header_row -->
</ul>

---

Ho notato il problema solo ocn Mozilla Firefox, mentre con IE, Chrome, Opera tutto è sempre regolare :roll:


Grazie in anticipo ragazzi :wink: