Horizontales Menü - Unterpunkte zentrieren

[pfump]

Hallo,

und zwar geht es um Folgendes:

Ich habe ein horizontales Menü, welches zentriert angezeigt wird.
Nur leider werden die Unterpunkt nicht zentriert.

Ich habe schon alles Möglicher versucht das hinzukriegen und schon mehrfach
alles zerschossen. Darum seit ihr meine letzte Hoffnung

Hier der Aufbau des Menüs:

<div id="top_navi">
      
<ul id="_topmenu" class="menu">
    <li class="item-101">
        <a href="/heine/">Blog</a>
    </li>
    <li class="item-102 current active deeper parent">
        <a title="architektur" href="/heine/index.php/architektur">Architektur</a>
        <ul>
            <li class="item-105">
                <a href="/heine/index.php/architektur/bauen-fuer-kinder">Bauen für Kinder</a>
            </li>
            <li class="item-106">
                <a href="/heine/index.php/architektur/gesellschaftsbau">Gesellschaftsbau</a>
            </li>
            <li class="item-107">
                <a href="/heine/index.php/architektur/gesundheitsbau">Gesundheitsbau</a>
            </li>
            <li class="item-108">
                <a href="/heine/index.php/architektur/industrie-verwaltung">Industrie &amp; Verwaltung</a>
            </li>
        </ul>
    </li>
    <li class="item-103 parent">
        <a href="/heine/index.php/ingenieurbau">Ingenieurbau</a>
    </li>
    <li class="item-104">
        <a href="/heine/index.php/buero">Büro</a>
    </li>
</ul>

</div>

und hier das css:

div#top_navi{
        position:absolute;
        top:0;
        height:80px;
        background-image:url('../images/logo.png'), url('../images/transparent.png');
        background-repeat: no-repeat, repeat-x;
        background-position: right top, left top;
        background-color: transparent;
        text-align:center;
        /*background:url("../images/logo.png") no-repeat top right, url("../images/transparent.png") repeat scroll 0 0 rgba(0, 0, 0, 0) */
        width:100%;
        z-index:4444;
        clear:both;
}

ul#_topmenu{
    list-style-type:none;
    margin-top:20px;
}

ul#_topmenu li ul{
    position:absolute;
    margin:0 auto;
    list-style-type:none;
}

ul#_topmenu > li{
    display:inline;
    line-height:30px;
    margin-left:25px;
}

ul#_topmenu > li:after{
    content:"•";
    color:#909090;
    margin-left:25px;
}

ul#_topmenu > li:last-child:after{
    content:"" !important;
}

ul#_topmenu > li > ul > li > a{
    font-size:90%;
}

ul#_topmenu > li > ul li{
    display:inline;
    white-space:nowrap;
    line-height:20px;
    margin-left:15px;
}
ul#_topmenu > li > ul > li:after{
    content:"•";
    color:#909090;
    margin-left:15px;
    font-size:80%;
}

ul#_topmenu > li > ul > li:first-child{
    margin-left:0 !important;
}

ul#_topmenu > li > ul > li:last-child:after{
    content:"" !important;
}    

ul#_topmenu li a{
    line-height:25px;
    color:#909090;
}

ul#_topmenu li.active > a{
    color:red;
}

ul#_topmenu li a:hover{
    color:red;
}

Wie bekomme ich die Unterpunkte ebenfalls zentriert?
Anzusehen ist das Ganze hier

[Chriz]

Moin,

also bei mir sind die wie die Hauptmenüpunkt zentriert. Chrome.

[pfump]

Mmh...ist ja komisch.

Habe das Problem aber jetzt lösen können. So sieht das css jetzt aus:

div#top_navi{
        position:relative;
        padding-bottom:5px;
        padding-top:20px;
        min-height:80px;
        background-image:url('../images/logo.png'), url('../images/transparent.png');
        background-repeat: no-repeat, repeat-x;
        background-position: right top, left top;
        background-color: transparent;
        text-align: center;
        width:100%;
        z-index:4444;
        clear:both;
}

ul#_topmenu{
    list-style-type:none;
}

ul#_topmenu li ul{
    position:absolute;
    margin:0 auto;
    list-style-type:none;

}

ul#_topmenu li ul{
    left: 50%;
    margin-left: -630px;
    max-width: 1260px; //der ie macht das natürlich wiedermal nicht-kann man aber auch weglassen
}

ul#_topmenu > li{
    display:inline;
    line-height:30px;
    margin-left:25px;
}

ul#_topmenu > li > ul li{
    display:inline;
    line-height:20px;
    margin-left:15px;
}

Scheint zu klappen

[lottikarotti]

Hallöchen,

da klappt gar nix. Wenn ich mir das mit jsFiddle ansehe, ragen die Unterpunkte links aus dem Viewport heraus.

Edit: Hier mal ein vernünftiger Ansatz ohne sich mit CSS das Bein auszureißen: Unterpunkte zentrieren.

Viele Grüße,
lotti