Problem mit Drop-Down Menu

KlarMann · 7 August 2013

Hallo liebe Leute,

ich bin Paul und brauche eure Hilfe in einer Java (?) /HTML Frage. Ich mache eigentlich hauptsächlich SEO. Bin aber bei einem aktuellen Projekt auch etwas in die HTML/Java Schiene geraten. Nun habe ich den Code für ein Drop-Down Menü von einem anderen Projekt bekommen. Leider sind wie auf dem Bild zu erkennen zwei Pfeile hinter der Beschriftung. Und die sollen weg :)

Hier die komplette CSS-Datei, sollte aber ja erst ab dem Punkt "Navigation" wichtig werden:

Code:

*{ margin: 0; padding: 0; }*
body { font-family:  Verdana, Tahoma, sans-serif; line-height: 1.3em; background: #D0D4D4; color: #444; }
.em {line-height: 1.1em; font-size: 0.70em}
.em2 {line-height: 1.3em;}
.color a {        color: #444;   background: inherit; text-decoration: none; }
.color a:hover { color: #808080; background: inherit; }


a {        color: #fff;        background: inherit; text-decoration: none; }
a:hover { color: #808080; background: inherit; }
a.current { color: #808080; }
p { margin: 0 0 15px 0; }
h1 { color: #66A9CC; font-family: Verdana, sans-serif; font-size: 1.1em; margin: 0 0 12px; }
h1 a { color: #fff; background: inherit; }
h1 a:hover { color: #E4FFD3; background: inherit; }
h2 { color: #66A9CC; font-family: Verdana, sans-serif; font-size: 1.1em; margin: 0 0 12px; }
h3 { color: #66A9CC; background: #fff; padding: 3px 10px; margin: 0 0 15px; }
h7 {color: #66A9CC; font-family: 'Dancing Script', cursive; font-size: 2.3em}


#header { margin: 20px 0 0 0}
#headerlink{
display:block;
width:780px;
height:225px;
margin: 20px 0 0 0;
border:none;
}

#content { width: 780px; margin: -5px auto 20px; background: #fff; padding: 0px; }



.text {float:left;
   margin:0 15px 0 0;}
.karte {float:left;
   margin:0 0 0 0;}



/*** NAVIGATION ***/
#navi {

background:url(../Bilder/navbar.png) no-repeat;
    width: 100%;
    height: 40px;
    padding-top: 8px;
    padding-left: 70px;
    margin: 0px auto;
    text-shadow:grey 1.5px 1px ;
    }

.sf-menu a:link { font-family:  Verdana, sans-serif; font-size: 0.95em; color: #ffffff; }

.sf-menu, .sf-menu * {
        margin:        0px;
        padding: 0px;
        padding-right: 10px;
        list-style: none;
}
.sf-menu {
        line-height: 20px;
}

.sf-menu ul {
        position: absolute;
        width: 10em; /* left offset of submenus need to match (see below) */
}

.sf-menu ul li {
        width: 500px;
}

.sf-menu li:hover {
        visibility: inherit; /* fixes IE7 'sticky bug' */
}

.sf-menu li {
        float: left;
        position: relative;
         
}

.sf-menu li li a {
        cursor: pointer; padding: 5px 20px; line-height: 32px; background:url(../Bilder/navbar.png);  color: #fff; border: 0px; border-left: 2px; border-style: solid; border-color: #000;
}

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
        left: 0;
        top: 33px; /* match top ul list item height */
        z-index: 99;        
}


.sf-menu li li a:focus, .sf-menu li li a:hover, .sf-menu li li a:active {
       background: #ffffff;
        border: 0px;
        border-left: 2px;
        border-style: solid;
        border-color: #000;
        padding-left: 10px;
        color: #666666;
      
      
}
  

    
                
                
   .links {
float: left;
margin-right: 10px;
}              

.studios_west {
    width: 108%;
    height: auto;
    min-height: 670px;
    margin-left:20px;
    border: 0px;
    border-bottom: 1px solid;
    border-color: #f1f1f1;
}

.studios_ost {
    width: 105%;
    height: auto;
    min-height: 480px;
    margin-left:20px;
    border: 0px;
    border-bottom: 1px solid;
    border-color: #f1f1f1;
}

.studios_hh {
    width: 105%;
    height: auto;
    min-height: 340px;
    margin-left:20px;
    border: 0px;
    border-bottom: 1px solid;
    border-color: #f1f1f1;
}

.studios_niedersachsen {
    width: 105%;
    height: auto;
    min-height: 360px;
    margin-left:20px;
    border: 0px;
    border-bottom: 1px solid;
    border-color: #f1f1f1;
}



.studios_spalte {
    width: 31.5%;
    height: auto;
    padding-bottom: 2px;
    float: left;
}




.table {
    display: table;
    float: left;
    }

 .table_zwei {
    display: table;
    float: right;
    width: 150px;
    }

 .table_drei {
    display: table;
    float: right;
    width: 120px;
    }


.first  { font-size: .9em;  float: center; width: 800px; margin: 0 30px 10px 10px; }
.second { font-size: .9em;  float: center; width: 925px; margin: 0 30px 10px 10px; }
.third { font-size: .9em;  float: left; width: 210px; margin: 0 20px 10px 20px; }
.third1 { font-size: .9em;  float: left; width: 100px; margin: 0 20px 10px 20px; }
.thirdtwo { font-size: .9em;  float: left; width: 340px; margin: 0 0px 0px 0px; margin-top: 15px;}
.thirdthree { font-size: .9em;  float: left; width: 210px; margin: 0 5px 5px 30px; }
.four { font-size: .9em;  float: center; width: 750px; margin: 0 30px 10px 10px; }
.ueberuns { font-size: .9em;  float: left; width: 320px; margin: 0 10px 10px 45px; }
.kontakt { font-size: .9em;  float: left; width: 320px; margin: 0 20px 10px 20px; }
.behandlung { font-size: .9em;  float: left; width: 320px; margin: 0 10px 10px 20px; }
.kosten { font-size: .9em;  float: left; width: 320px; margin: 0 10px 20px 45px; }
.seven { font-size: .9em;  float: left; width: 80px; margin: 0 70px 10px 10px; }
.eight { font-size: .9em;  float: left; width: 320px; margin: 0 10px 10px 10px; }
.last { float: right; margin: 0 10px 10px 0; }
.more { border-top: 1px solid #eee; padding: 5px 0 0 0; }

Und hier der Teil aus HTML

PHP:

<div id="navi"><ul class="sf-menu">
                               
                        
                        <li><a href="ueber-uns.html">&Uuml;ber uns</a></li>
                        
                        <li>
                        <a href="">&Uuml;ber die Behandlung</a>
                        <ul>
                        <li><a href="dauerhafte-haarentfernung.html">Dauerhafte Haarentfernung</a></li>
                           <li><a href="hautverjuengung.html">Hautverj&uuml;ngung     &nbsp;     &nbsp;     &nbsp;     &nbsp;     &nbsp;     &nbsp;     &nbsp;     &nbsp; </a></li>
                        <li><a href="pigmentbehandlung.html">Pigmentbehandlung     &nbsp;     &nbsp;     &nbsp;     &nbsp;     &nbsp; </a></li>
                        <li><a href="gefaessbehandlung.html">Gef&auml;&szlig;behandlung     &nbsp;     &nbsp;     &nbsp;     &nbsp;     &nbsp;     &nbsp;     &nbsp; </a></li>
                        </ul>
                        </li>
                        
                        <li><a href="kosten-dauerhafte-haarentfernung.html">Preise/Leistungen</a></li>
                        <li><a href="partnerstudios.html">Standorte</a></li>
                        <li><a id="last" href="kontakt.html">Kontakt</a></li>

                    </ul>
                
                </div>

Also, nun habe ich drei Fragen:
1. Wie gehen die Pfeile weg?
2. Kann ich die Geschwindigkeit für das Öffnen des Menüs beeinflussen?
3. Wie kann ich außerdem die Größe der Drop-Down-Buttons auf eine gemeinsame Größe bringen. Jetzt habe ich ja diese Leerzeichen   benutzt. Das ist aber nicht optimal.

Kann mir da jemand helfen?

)

Danke und Grüße!

threadi · 8 August 2013

Anhand des Quellcodes hier kann man das nicht sehen. Hast Du auch einen Link parat?

KlarMann · 8 August 2013

Habe ich per PN geschickt. Danke.

Banana_Jones · 8 August 2013

KlarMann schrieb:
Habe ich per PN geschickt. Danke.

Das hilft möglichen anderen Helfern natürlich herzlich wenig...

KlarMann · 8 August 2013

Banana_Jones schrieb:
Das hilft möglichen anderen Helfern natürlich herzlich wenig...

Das stimmt :roll:
http://www.möhring-epilux.de/test/index.html

Cheffchen · 9 August 2013

Hallo,

nun schreibe ich doch mal.

also Java nö, sondern das ist Javascript bzw. jqeury.
Das Menü ist Superfish
das » bekommst per css am einfachsten weg.

.sf-sub-indicator{display:none}

Cheffchen

KlarMann · 12 August 2013

Vielen Dank. Das hat geklappt. ;)
Wie kann ich nun die Geschwindigkeit des "Öffnens" ändern? Ist das überhaupt möglich? Also sobald der Mauszeiger darüberfährt soll sich das Menü öffnen. Zur Zeit dauert das ja noch etwas.

bdt600 · 12 August 2013

Aua! Siehe [Invalid] Markup Validation of http://www.xn--mhring-epilux-imb.de/test/index.html - W3C Markup Validator

Cheffchen · 12 August 2013

Hallo,

such mal in der HTML nach

jQuery('ul.sf-menu').superfish();

fürge mal das ein

jQuery('ul.sf-menu').superfish({delay: 200});

kannst ja mit der zahl dann spielen.

Cheffchen

Problem mit Drop-Down Menu

KlarMann

Neues Mitglied

threadi

Moderator

KlarMann

Neues Mitglied

Banana_Jones

Aktives Mitglied

KlarMann

Neues Mitglied

Cheffchen

Senior HTML'ler

KlarMann

Neues Mitglied

bdt600

Guest

Cheffchen

Senior HTML'ler

Neueste Beiträge