Menü-Punkt wird schmaler

Warum machst du einen zweiten Thread auf für das gleiche Problem? (1. https://www.forum-hilfe.de/threads/54725-…iste-verrutscht)

Welche Funktion sollen die Buttons denn erhalten, dass du darauf bestehst es mit Javascript lösen zu wollen?

Weisst du was das für Elemente sind: img, span ?

Die Elemente img und span gehören zur Gruppe der Textelemente. Deren Eigenschaft ist es, dass wenn sie in einem Text eingefügt werden, den Text an der Stelle in Schreibrichtung weiterschieben, so dass deren Inhalt dort eingefügt werden kann.
Genau dieses Verhalten ist bei dir zu beobachten. Der Button bestehend aus Span-Elementen wird geteilt nach dem Bild, der Text erscheint und danach der Rest vom Button, die kleine blaue Randlinie, die dir oben fehlt.

Du hast immer nicht gesagt welche Funktion denn dahinter stehen soll. Entweder es geht mit Javascript weiter oder mit CSS aber dazu ist es notwendig zu wissen was das Ganze am Schluss werden soll.

Nur mit CSS würde ich erst mal nur mit den Buttons anfangen. Ein Tutorial findest du unter http://www.css-spielereien.de/menu_erstellen.php

Wenn du das geschafft hast, musst du die 2. Ebene bauen, also das aufklappen unter dem Button mit deinen Links, aber fang erst mal mit den Buttons an. Javascript fliegt hier natürlich komplett raus, weil unnötig.

Ich sehe nicht, dass du schon etwas davon umgesetzt hast. Mach doch ein Schritt nach dem anderen.

Als nächstes fügst du deinem HTML-Code eine 2. Ebene in der Liste ein, das macht man in dem man eine unsortierte Liste innerhalb eines Listenelementes einfügt:

<ul id="top">                       
    <li><img class="img_set" src="style/img/invis.png" alt="Optionen"></li>                      
    <li><img class="img_menu" src="style/img/invis.png" alt="Menu">     
          <ul>         
              <li><a href="">2. Ebene</a></li>       
              <li><a href="">2.punkt</a></li>     
          </ul>     
     </li>                 
</ul>

Danach gehts ans CSS. dort müssen die Listenelemente in der 1. Ebene die jetzt vorhanden sind als Inlineelemente zu Blockelementen gewandelt werden und danach werden sie mit float:left wieder in Position gebracht. Für die 2. Ebene werden die Listenelemnte ebenfalls als Block angezeigt, da wir sie untereinander haben wollen.
Dann noch etwas Farbe und Länge zugeben und schon haben wir es geschafft.

CSS-Code

#top {
    width: 100%;
    height: 24px;
    background-color: #09F;
    color: #FFF;
    font-size:20px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0px;
    position: fixed;
    border-bottom: solid 2px #333;
}


#top li {
    list-style-type: none;
    background-color: #09F;
    height: 22px;
    width: 100px;
    padding: 1px;
    padding-left: 5px;
    padding-right: 5px;
      display: block;
      float:left;
    border-bottom: solid 2px #333;
}


#top li:hover {
    background-color: #03C;
}
          /* 2. Ebene */
#top li ul {
    display:none; 
}
#top li ul li a{color:white; text-decoration:none;}          
#top li:hover ul {
    display:block; position:relative; top:2px; left:0em; 
    height:auto; width:8em; padding:0;
    overflow:hidden;
} 
#top li:hover ul li{display:block;width:10em; }

Dein HTML-Code ist fehlerhaft, genau beim Menü.

Falsch:

<ul id="top">
    			<li><img class="img_set" src="style/img/invis.png" alt="Optionen"></li>
                <li><img class="img_menu" src="style/img/invis.png" alt="Menu"></li>
                	<ul>         
              			<li>2. Ebene</li>       
              			<li>2.punkt</li>     
          			</ul>  
  			</ul>

Richtig:

<ul id="top">
    			<li><img class="img_set" src="style/img/invis.png" alt="Optionen"></li>
                <li><img class="img_menu" src="style/img/invis.png" alt="Menu">
                	<ul>         
              			<li>2. Ebene</li>       
              			<li>2.punkt</li>     
          			</ul></li>
  			</ul>

Siehst Du den Unterschied? Wenn ja, kannst Du nun auch das Untermenü in Abhängigkeit vom Obermenü stylen.

Du hast den HTML-Code den ich dir gegeben habe verändert.
Die Liste muss genau so aussehen:

<ul id="top">                            
    <li><img class="img_set" src="style/img/invis.png" alt="Optionen"></li>                           
    <li><img class="img_menu" src="style/img/invis.png" alt="Menu">               
        <ul>                        
            <li><a href="">2. Ebene</a></li>                      
            <li><a href="">2.punkt</a></li>               
        </ul>           
   </li>                  
</ul>

Wenn du das li-Element hinter dem 2. Bild schliesst ist das Menü nicht verschachtelt!

Lies mal hier: http://de.selfhtml.org/html/text/listen.htm

Ja kann ich.

#top li {
    list-style-type: none;
    background-color: rgb(0, 153, 255);
    height: 22px;
    width: 22px;
/* war  vorher width: auto;  */
    padding: 1px 5px;
    display: block;
    float: left;
    border-bottom: 2px solid rgb(51, 51, 51);

Du hast eine Liste - ul - ungeordnet in diesem Fall. Die Listenelemente sind deine li.
Lese dich unbedingt mal ein in HTML und CSS. Im Netz gibt es hunderte von Anleitungen, sonst sitzen wir hier nächste Woche noch an deinem Menü.

Da ist kein Button mit einem Dreieck.