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):
/*------------------------------ 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!