Wordpress Menü Problem

Dobble89

Hallo zusammen,

vorab möchte ich erwähnen das ich HTML Grundkenntnisse habe.

Ich bastle gerade an meiner Wordpress Seite. Ich habe einen Wunsch, ich möchte das mein
Menü wie folgt aussieht:

http://www.script-tutorials.com/demos/272/index.html

(nur die Optik würde ich haben wollen. Die Funktionen sollten von Wordpress bleiben.)

Mein Menü sieht momentan wie folgt aus:

http://www.erkanp.com/screenshot_menu.jpg

Ich versuche schon wie verzweifeln die menüs zu trennen, also so wie bei dem Demo.
In etwa so: I Startseite I Store I Kontakt I

die Linien in der Mitte würden mir reichen.

Ich habe auch schon Tutorials ausprobiert. Aber kein erfolg
Ich vergesse glaube ich immer irgendwas. Sobald ich am Code rumbastle verschiebt sich alles

das ist mein STYLSHEET CODE für das Menü (style.css):

CSS

/*------------------------------ MENU ------------------------------*/

    #secondarymenu-container {
        height:119px;
        padding-top:6px;
        position:relative;
        z-index:11;
    }
    #secondarymenu {
        float:right;
        margin-right:20px;
        margin-top:40px;
    }
    #secondarymenu a {
        text-decoration:none;
        padding:15px 9px;
        display:block;
        color:#979797;
    }
    #secondarymenu a:hover{
        color:#4b8e9a;




  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  transition: all 0.3s linear;
    }
    #header-block {
        position:relative;
        padding-top:47px;
    }
    #mainmenu-container {
        height:59px;
        position:absolute;
        top:0;
        z-index:10;
        background:url(images/menu.png) center top no-repeat;
        width:100%;
    }
    #mainmenu li a {
        text-align:center;
        display:block;
        text-decoration:none;
        padding:18px 20px;
        font-size:15px;
        color:#ffffff;
    }




    #mainmenu li {
        position:relative;
    }
    #mainmenu li a:hover{
        color:#4b8e9a;




  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  transition: all 0.3s linear;
    }








    
    #header #mainmenu li ul {
        top:51px;
    }
    #header li ul {
        top:35px;
    }
    #header li ul .inner {
        background:#ededed;
        padding:0;
    }
    #header ul.children li, #header .sub-menu li {
        padding:0 !important;
        margin:0 !important;
        height:25px;
        line-height:25px;
    }
    #header ul.children li a, .sub-menu li a {
        color:#7e4da9 !important;
        padding:0 !important;
        background:none;
        height:25px;
        line-height:25px;
    }
    #header ul.children li a:hover, .sub-menu li a:hover {
        background:#f1f1f1;
        color:#e28510 !important;
        border:none !important;
        box-shadow:none !important;
    }

Alles anzeigen

Hat jemand vielleicht noch Ideen wie man das macht?

Danke schonmal voraus!

explanator

Der grafische Trenner zwischen den Tasten ergibt sich durch einen optischen Trick. Es werden rechts und links bei den Li-Elementen die Border gesetzt. Diese fehlen bei dir.
Damit die linke Kante beim ersten Element nicht sichtbar ist. wird dem ersten Listenelement mit der Pseudoklasse first-Child die Kante(Border) wieder mit ausgeblendet mit Border:0;

Das gleiche erfolgt dann auch beim letzten Listenelement für die Rechte Kante. Die durch das last-child ausgewählte Element erhält border:0;

Siehe dir doch noch mal ganz genau das CSS an und versuche nachzuvollziehen welche Regel sich auf welches Element bezieht.

Für dich wichtig ist hier #nav li und #nav > li:first-child, sowie #nav > li:last-child
http://www.script-tutorials.com/demos/272/css/menu.css

Tags