ich bin absoluter neuling. hier im forum und auch was html und css angeht. aber step by step habe ich eine kleine seite erstellt.
nun gibts aber ein problem beim einbinden des jQuery Multi Level CSS Menu #2´s.
das menü ist weder zentriert, noch werden die drop-downlisten richtig angezeigt. mit einem abstand, der nicht sein sollte und unterhalb des grafik-sliders.
ich weiss nicht mehr weiter. vielleicht kann sich einer der profis erbarmen und mir weiterhelfen: http://www.abenteuerthailand.de
Baue alles was mit Javascript zu tun hat wieder aus. Das brauchst du nicht. Wenn jemand ohne Javascript unterwegs ist, dann kann er das Menü nicht benutzen.
Google kann Javascript Links nicht folgen und du verschenkst dir die Chance auf Besucher.
Menü in reinem CSS erstellen.
Slider ausbauen, erstens lenkt er ab und zweitens zeigt er nur den Himmel von deinen Bildern. So gross ist dein Bild tatsächlich, von dem man nur den Himmel sieht -> http://www.abenteuerthailand.de/images/flexslider04.jpg
Des weiteren verschenkst du Platz, bis man endlich an die wichtigen Informationen kommt muss man runterscrollen, dass nervt.
Ich weiss das Slider extrem Hipp sind, aber leider werden sie auch von vielen Leuten als Werbung wahrgenommen, wie Tests gezeigt haben, mache lieber eine Schöne Fotogalerie wo man sich die Bilder im Vollbildmodus ansehen kann, das bringt wesentlich mehr.
Ansonsten finde ich den Ansatz schon mal gelungen. Klar und deutlich, keine verspielten Farben, aufs Wesentliche reduziert, passt(bis auf den Slider)
danke erstmal hierfür. die bilder in dem slider müssen noch angepasst werden. der slider ist sowieso nur für die startseite gedacht - auf den folgeseiten wird noch schlichter gearbeitet 
aber zurück zum menü. ich habe das javascript gelöscht. jetzt besteht aber ein weiteres problem: er zeigt die arrows, sprich die pfeile (nach unten und nach rechts) die ein drop-down anzeigen sollen, nicht mehr an. rein prinzipiell zeigt er jetzt gar kein drop-down-menü mehr an ...
muss ich da zusätzlich in dem .css-sheet etwas ändern? oder ist das mit den pfeilen einfach so ein "effekt", der nur mit javascript erzielt werden kann?
dieses javascript-menü gibt es übrigens hier: http://www.dynamicdrive.com/style/csslibra…vel_css_menu_2/
html:
<div align="center" style="width:900px; height:60px; margin:auto; margin-bottom:10px">
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="suedthailand.html" title="Von Koh Samui bis Phuket">Südthailand</a>
<ul>
<li><a href="thailand-wetter.htm">Koh Samui</a>
<ul>
<li><a href="#">Sehenswürdigkeiten</a></li>
<li><a href="#">Strände</a></li>
<li><a href="#">Hotels & Resorts</a></li>
</ul>css-code:
.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}
.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}
* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}
.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 180px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}Habe eine Vorlage von mir genommen und die mal für dich angepasst.
Musst du nur noch bei dir einbauen.
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* ungeordnete Liste */
.menu {
margin-left:50%;
}
.menu ul{
list-style-type: none; /* Listenpunkte entfernen */
padding: 0; /* Innenabstände entfernen */
margin: 0; /* Aussenabstände entfernen */
font-family: verdana, sans-serif; /* Schrift setzen, wenn gewünscht */
margin-left: -50%;
}
/* Listenelemente */
.menu li{
float: left; /* Alle nach Links schieben */
position: relative; /* relativ positionieren für das Untermenü */
z-index: 100; /* Über andere Elemente erscheinen lassen */
}
/* Links in Listenelementen */
.menu a, .menu:visited {
display: block; /* Als Blockelement formatieren */
font-size: .9em; /* Schriftgrösse bestimmen */
min-width: 8em; /* Breite vorgeben */
padding: 5px 10px 5px 10px; /* Innenabstand Rand zur Schrift oben, rechts, unten, links */
color: white; /* Schriftfarbe */
background: black; /* Hintergrundfarbe */
text-decoration: none; /* Unterstrich bei Links entfernen */
margin-right: 1px; /* Abstand zum nächten Menüpunkt festlegen */
text-align: center; /* Schrift zentrieren */
line-height: 1.5em; /* Zeilenhöhe setzen, falls abweichend */
}
/* Mauszeiger über Links*/
.menu a:hover{
color: yellow; /* Schriftfarbe ändern */
}
/* Untermenüpunkte */
.menu ul ul {
position: absolute; /* absolut positionieren */
min-width: 8em; /* Breite festlegen */
left: -9999px;
/* aus sichtbaren Bereich schieben */
}
/* Mauszeiger über Links im Untermenü */
.menu ul li:hover ul,
.menu ul a:hover ul{
left: 61px; /* Untermenü einblenden */
top: 1.9em;
}
.menu ul li a.sub:after { /* Der Pfeil nach unten zeigend */
display: inline-block;
content:" ";
width: 0px;
height: 0px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid white;
margin-left: 10px;
}
</style>
</head>
<body>
<div style="width:900px; height:60px; margin:0 auto; margin-bottom:10px">
<div class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a class="sub" href="suedthailand.html" title="Von Koh Samui bis Phuket">Südthailand</a>
<ul>
<li><a href="thailand-wetter.htm">Koh Samui</a></li>
</ul>
<li><a href="#">Sehenswürdigkeiten</a></li>
<li><a href="#">Strände</a></li>
<li><a href="#">Hotels & Resorts</a></li>
</ul>
</div>
</body>
</html>