Problem mit Java-Dropdown-Menü in HTML

Aktuelle Programmier- und Auszeichnungssprachen HTML / CSS / JavaScript
1

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 :slight_smile:

Hier der Teil aus der CSS

/*** 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: 35px; /* 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;
}

Und hier der Teil aus HTML

<div id="navi"><ul class="sf-menu">
							   
                        
                        <li><a href="ueber-uns.html">Über uns</a></li>
                        
						<li>
						<a href="">Über die Behandlung</a>
						<ul>
        				<li><a href="dauerhafte-haarentfernung.html">Dauerhafte Haarentfernung</a></li>
       					<li><a href="hautverjuengung.html">Hautverjüngung 	  	  	  	  	  	  	  	  </a></li>
        				<li><a href="pigmentbehandlung.html">Pigmentbehandlung 	  	  	  	  	  </a></li>
        				<li><a href="gefaessbehandlung.html">Gefäßbehandlung 	  	  	  	  	  	  	  </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? :o)

Danke und Grüße!

2

Sieht nach dem Zeichen aus, das der Browser automatisch für li-Elemente generiert. (Wundert mich allerdings, dass das kein Punkt ist). Die CSS-Eigentschaft, um das zu beeinflussen, heißt list-style-type. Umfassende Infos gibt’s hier: http://de.selfhtml.org/css/eigenschaften/listen.htm

3

Ja, das weiß ich leider schon.
Deshalb ist es ja auch „none“

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

Es hat glaube ich eher damit zu tun, dass der Nutzer sehen soll, dass es ein Drop-Down Menü gibt. Aber der Kunde möchte das aus Design-Gründen nicht (ich finde es eigentlich recht sinnvoll :frowning: )

4

@Geschwindigkeit: Entweder per Javascript steuern oder per CSS3 Transitions. Da kommt es eben drauf an welchen Browser deine Zielgruppe nutzt.

@Zeichen: Das taucht in dem Code von dir gar nicht auf

@Größe: Stichwort Inlineblock, wenn du moderne Browser ab IE9 anvisierst. Sonst halt das A Element als Block setzen und floaten.

Gibt da viele Möglichkeiten :wink:

5

Ok danke für deine Antwort. Das Zeichen habe ich auch nicht gefunden. Aber irgendwo muss es ja herkommen?! :smiley: Es wird ja auch in allen Browsern angezeigt.

Hier nochmal die komplette CSS-Datei. Vielleicht hilft es ja.

*{ 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; }