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:
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
Grazie in anticipo ragazzi