Probleme mit Menü Reiter

Hallo, habe folgendes Problem. Ich habe auf meiner WP Seite ein Navigationsmenü (Reiter). Wenn die Seite aufgerufen wird, sind für eine Sekunde alle Menüpunkte der Navigation zu sehen. Dies empfinde ich als sehr störend. Hier die Seite: http://www.praxisklinik-mkg.de. Ich habe das Menü mittels der Menü- bzw. Seitenfunktion erstellt. Lediglich die Farbe habe ich im CSS geändert. Kann mir jemand helfen? Ich weiß nicht, wo meine Fehler liegt.

Viele Grüße, daffyduckbp

Habe es gerade mit Chrome und Safari erneut probiert. Anscheinend hängt es aber u.a. von Internetgeschwindigkeit ab. Aber auch bei schneller Übertragung sind die Menüpunkte kurz alle "aufgeklappt" (orange).

Zitat von koslowski

Man kann das Submenü doch viel einfacher mit position:absolute und left:-9999px ausblenden und bei hover mit left:auto wieder einblenden. ;)

Hallo, könnten Sie auf Ihre Lösung nocheinmal genauer eingehen? Ich bin was CSS und HTML angeht ein absoluter Anfänger. Dies ist die erste Homepage die erstelle. Vielen Dank und viele Grüße, daffyduckbp

Habe mal den Bereich für die Menüführung im CSS rauskopiert. Liegt hier vielleicht der Fehler?

}
.header .logo img {
margin:15px 0 20px 0;
}
.menu_wrapper {
margin-bottom:20px;
}
#menu {
position:relative;
z-index:999;
}
#menu li {
list-style-type:none;
margin-left:0;
}

#menu li a {
font-size:15px;
margin:0;
margin-left:20px;
position:relative;
float:left;
color: #000;
text-align:center;
text-decoration:none;
padding:8px;
}
#menu li.current-menu-item a, #menu li.current-menu-parent a, #menu li.current_page_parent a, #menu li a.selected, #menu li a:hover {
color:#e97913;
}
#menu li.current-menu-item a, #menu li.current_page_item a{
color:#e97913;
}
#menu li.current-menu-item a:hover, #menu li.current-menu-parent a:hover, #menu li.current_page_parent a:hover, #menu li a:hover.selected {
text-decoration:none;
}
#menu .ddsmoothmenu {
margin:0;
margin-right: 16px;
list-style:none;
float:right;
position:relative;
z-index:1000;
margin-top:40px;
/* margin-left:60px;*/
}
#menu .ddsmoothmenu li li a:hover {
/*border-radius:0 5px 0 0;
-moz-border-radius:0 5px 0 0;
-khtml-border-radius:0 5px 0 0;
-webkit-border-top-right-radius:5px;
*/
}
#menu .ddsmoothmenu li > ul li > ul {
margin-top:1px;
margin-left:2px;
}
/*Top level list items*/
#menu .ddsmoothmenu li {
margin:0 !important;
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
#menu .ddsmoothmenu li li {
font-size:12px;
margin:0;
padding:0;
}
#menu .ddsmoothmenu li li a {
width: 130px;
height:auto;
float:none;
display: block;
text-align:left;
text-shadow:none;
margin:0;
padding:10px 20px;
padding-left: 25px;
text-decoration: none;
position:relative;
font-size:14px;
border:none;
}
#menu .ddsmoothmenu li li a:after {
width:100%;
content: '';
position:absolute;
left:-9999px;
top:0;
}
#menu .ddsmoothmenu li li li li:last-child a, #menu .ddsmoothmenu li li li li:last-child a:after {
border-top:none;
}
#menu .ddsmoothmenu li li:last-child a:after {
width:100%;
content: '';
position:absolute;
left:-9999px;
bottom:0;
}
* html #menu .ddsmoothmenu li li a { /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;

}
#menu .ddsmoothmenu li li a:link, #menu .ddsmoothmenu li li a:visited {
color: #000;
}
#menu .ddsmoothmenu li li a.selected, #menu .ddsmoothmenu li li a:hover {
color: #000;
}
/*1st sub level menu*/
#menu .ddsmoothmenu li ul {
margin-top:-1px;
padding-top: 10px;
padding-bottom: 10px;
margin-left:28px;
position: absolute;
left: -9999px;
border: 1px solid #efefef;
background:#e97913;
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
/*Sub level menu list items (undo style from Top level List Items)*/
#menu .ddsmoothmenu li ul li {
display: list-item;
float: none;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu {
height: 1%;
}
.downarrowclass {
display:block;
position: absolute;
width:4px;
height:7px;
overflow:hidden;
top: 16px;
right:-3px;
background: url('images/menu-blt.png') no-repeat;
}
.rightarrowclass {
display:block;
width:4px;
height:7px;
position: absolute;
margin-top:-3px;
top: 50%;
right: 8px;
background: url('images/menu-blt.png') no-repeat;
}
.ddshadow {
width:0;
height:0;
position: absolute;
left: 0;
top: 0;
display:none;
}