• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Dropdown menü erstellen

J

Joersch

Neues Mitglied
Hallo tut mir lid das ich wieder einer derer bin der euch bittet seine Hausufgaben zu machen. :( bitte das zu entschuldigen

Ich muss bis in 2 Wochen eine webseite für die schule progremiern das grundgerüst steht bin soweit auch zufrieden, habe nur noch das problem mit der menüleiste.


habe es alles einmal hier hochgeladen:
HABE ES UNTEN EINGEFÜGT!!!



Ich habe mir bereits etliche tutorial angesehen zahlreiche Webseiten durchforstet und es bereitses bereits mit:
ul#navi li>ul
{
display: none;
}

ul#navi li:hover>ul
{
display: block;
}



#navi ......


und
#navi li ul ....


versucht doch irgendwie erkent das mein Computer nicht



Ich hoffe das jemand von euch den fehler findet oder mir einfach so sagen kann was ich falsch mache.

Im voraus besten Dank

Jörg
 
Zuletzt bearbeitet:
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Horizontale CSS-Navigation</title>
        <style type="text/css">
            
          /* Generelle Angaben für Farbe, Schriftgröße, etc. */
          body {
            font-family: Verdana;
            font-size: 12px;
            color: black;
          }
          
          /* Zuerst die Listenformatierung aufheben */
          #menu ul {
            list-style: none;
            margin: 0;
            padding: 0;
          }
          
           /* Anschließend alle Listenelemente links nebeneinander anordnen */
          #menu ul li {
            display: block;
            float: left;
          }
          
          /* Die Linkformatierung entfernen */
          #menu ul li a {
            text-decoration: none;
            color: black;
          }
          
          /* Danach das Submenü im Normalzustand unsichtbar stellen */
          #menu ul li ul {
            visibility: hidden;
          }
          
          /* ... und beim Hovern wieder sichtbar machen */
          #menu ul li:hover ul {
            visibility: visible;
          }
          
          /* Zum Schluß die Listenelemente des Submenüs untereinander anordnen */
          #menu ul li ul li {
            clear: both;
          }
        </style>
    </head>
    <body>
        <div id="menu">
           <ul>
               <li>
                   <a href="#">Menüpunkt 1</a>
                  <ul>
                    <li><a href="#">Menüpunkt 1.1</a></li>
                    <li><a href="#">Menüpunkt 1.2</a></li>
                    <li><a href="#">Menüpunkt 1.3</a></li>
                  </ul>
               </li>
               <li>
                   <a href="#">Menüpunkt 2</a>
                 <ul>
                    <li><a href="#">Menüpunkt 2.1</a></li>
                    <li><a href="#">Menüpunkt 2.2</a></li>
                    <li><a href="#">Menüpunkt 2.3</a></li>
                 </ul>
               </li>
           </ul>
        </div>
    </body>
</html>
 
Das hängt sicherlich nicht mit deinem Computer sondern deinem Browser ab. Wenn Du einen Browser nutzt der das nicht unterstützt, dann geht es natürlich auch nicht. Das betrifft heutzutage allerdings nur noch den Internet Explorer 6 und älter. Wenn Du einen aktuellen Browser hast, dann zeig den Quellcode hier. Die Datei wird sich sicherlich niemand runterladen, da wir dich ja nicht kennen - wer weiß was da noch so drinne ist.
 
Tronjer, dein Ansatz überdeckt keinen darunterliegenden Content. Ist das so gewollt?

Gib den li-Elementen zur Verdeutlichung einen Rahmen.
 
@cyberbob hatte navi als id angegeben.

@trojana Danke hast mir seh wetergeholfen hoffe das mein problem jetzt gelöst ist. Ich weds geleich mal testen. Den Css teil kan man ja auch in ein Zweites document schreiben oder?

@threadi Das mein Computer kaum etwas damit zutunhat das es nicht geht ist mir klar liegt an dem browser und an meiner fehlerhaften syntax


soll ich den quellcode mal reinstellen sind eben knap 300 Zeilen ?:?
 
funktioniert irgendiwie noch immer nicht richtig hier mein quellcode:

HTML: 
<!DOCTYPE html>
<html>

<head>
  <title>Meine KM Websiete</title>
  
    <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
  <table border="0" class="table" align="center" width="950" cellpadding="0" cellspacing="0">
    <tr>
      <td colspan="2" class="header"><div id="headertext">Meine sch&ouml;ne<br> neue Website</div></td>
    </tr>
    <tr>
      <td class="topnavi" colspan="2"><a href="#">Kontakt</a> | <a href="#">Impressum</a> | <a href="#">AGB</a></td>
    </tr>
    <tr>
      <td valign="top" class="navibg">
      <div class="naviueberschrift">&Uuml;ber die Honigbienen</div>
      <ul class="menue" id="navi">
          <li><a title="Home" href="geschichte.html">Geschichte</a></li>
          <li><a title="Link 1" href="nutzen.html">Nutzen</a></li>
                   <ul>
          <li><a title="Link 2" href="indirekternutzen">Indirekter Nutzen</a></li>
          <li><a title="Link 3" href="direkternutzen">Direkter Nutzen</a></li>
              <ul>
          <li><a title="Link 3.1" href="honig">Honig</a></li>
          <li><a title="Link 3.2" href="bienenwachs">Bienenwachs</a></li>
          <li><a title="Link 3.3" href="pollen">Pollen</a></li>
          <li><a title="Link 3.4" href="propolis">Propolis/Kittharz</a></li>    
          <li><a title="Link 3.5" href="geleeroyal">Gel&egrave;e Royal</a></li>
          <li><a title="Link 3.6" href="bienengift">Bienengift</a></li>    
              </ul></ul>
          <li><a title="Link 4" href="derbienenstaat">Der Bienenstaat</a></li>
          <li><a title="Link 5" href="anatomiederbiene">Anatomie der Biene</a></li>
              <ul>
          <li><a title="Link 5.1" href="caput">Caput/Kopf</a></li>
          <li><a title="Link 5.2" href="thorax">Thorax/Brust</a></li>
          <li><a title="Link 5.3" href="abdomen">Abdomen/Hinterleib</a></li>
              </ul>
        </ul>

        <div class="naviueberschrift">&Uuml;ber die Imkerei</div>
      <ul class="menue">
          <li><a title="Link 6" href="#">Link 6</a></li>
          <li><a title="Link 7" href="#">Link 7</a></li>
          <li><a title="Link 8" href="#">Link 8</a></li>
          <li><a title="Link 9" href="#">Link 9</a></li>
          <li><a title="Link 10" href="#">Link 10</a></li>
        </ul>
        </td>
      <td class="mainbg" valign="top"><div id="maintext"><h1><i><b>Apis mellifera</b></i> <u>Die Westliche Honigbiene</u></h1>

<p algin="center"> Herzlich Willkommen auf meiner Webseite zur Westlichen Honigbiene. 

       
       
       </div>
</td>
    </tr>
    <tr>
      <td class="topnavi" colspan="2"></td>
    </tr>
</table>

</body>
</html>

CSS:

[CSS]
body {
color: #FFB950;
background-color: #3F3F3F;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10pt;
}

td,tr {
color: #000000;
background-color: #FFFFFF;
font-size: 10pt;
padding: 5px;
}

p {
font-size: 12pt;
padding: 3px;
margin: 0px;
}

/* Nachfolgend die Angaben für die Headergrafik.*/

.table {
padding: 10px auto;
color: #000000;
background-color: #FFFFFF;
border:solid 10px #FFFFFF;
}

.header {
height: 235px;
padding: 10px;
width: 950px;
color: #FFB950;
background-color: #FFFFFF;
background:url(images/header.jpg) no-repeat;
}

#headertext {
color: #FFB950;
background-color: transparent;
font-size: 20pt;
font-family: "Trebuchet MS",verdana,arial,helvetica,sans-serif;
padding-right: 10px;
font-style: italic;
text-align: right;
}

td.topnavi {
height: 29px;
background:url(images/topnavi.jpg);
font-size: 10pt;
color: #FF8000;
background-color: #000000;
font-weight: bold;
font-family: Georgia,"Trebuchet MS",verdana,arial,helvetica,sans-serif;
text-align: center;
background-repeat: repeat-x;
}

/*Formatierung der verschiedenen Überschriften*/

h1 {
color: #4C6535;
background-color: inherit;
font-family: "Century Gothic", Georgia, "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;;
font-size: 18pt;
font-weight: bold;
text-align: center;
margin: 12px 0px 0px 10px;
font-style: italic;
}

h2 {
color: #3F3F3F;
background-color: inherit;
font-family: "Trebuchet MS", Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 14pt;
font-weight: bold;
margin: 12px 0px 2px 10px;
text-align: left;
letter-spacing: 2px;
}

h3 {
color: #5F0000;
background-color: inherit;
font-family: "Trebuchet MS",Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 14pt;
font-weight: bold;
font-style: italic;
margin: 12px 0px 0px 10px;
text-align: center;
}

h4 {
color: #7D4926;
background-color: inherit;
font-family: Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
margin: 12px 0px 2px 10px;
text-align: left;
}

h5 {
color: #000000;
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
margin-left: 10px;
margin-bottom: 2px;
text-align: left;
}

/* Steuerung der linksseitigen Navigation*/

.naviueberschrift {
color: #4C6535;
background-color: #FFFFFF;
font-family: "Trebuchet MS",verdana,arial,helvetica,sans-serif;
font-size: 16pt;
font-weight: bold;
font-style: italic;
margin: 5px;
padding: 20px 0px 8px 10px;
text-align: left;
line-height: 25px;
}

.menue {
list-style-type:none;
padding: 0px;
margin: 0px 0px 0px 5px;
text-align: left;
}

.menue li a, .menue li a:active, .menue li a:visited {
color: #7D4926;
background-color: #FFFFFF;
width: 190px;
padding: 3px;
margin: 2px;
text-decoration: none;
font-size: 10pt;
font-family: Georgia,"Trebuchet MS",verdana,arial,helvetica,sans-serif;
display: block;
font-weight: bold;
text-indent: 10px;
border-bottom: 1px dotted #5F5F5F;
}

.menue li a:hover {
font-weight: bold;
text-decoration: none;
color: #FF8000;
background-color: #454440;
}

#menuex li ul
{
display: none;
}

/*Steuerung des Haupttextes*/

td.mainbg {
width: 720px;
background:url(images/mainbg.jpg);
background-repeat: repeat-y;
}

#maintext {
width: 720px;
font-size: 10pt;
text-align: justify;
font-family: Tahoma,"Trebuchet MS",verdana,arial,helvetica,sans-serif;
color: #000000;
background-color: transparent;
padding-top: 0px;
}

/*Formatierung der normalen Links*/

a:link, a:visited, a:active {
color:#FF8000;
text-decoration:none;
font-weight:bold;
}

a:hover {
color:#4C6535;
text-decoration:none;
font-weight:bold;
}

[/CSS]
 
Dein HTML-Code für das Menü ist falsch:
HTML: 
<ul class="menue" id="navi">
          <li><a title="Home" href="geschichte.html">Geschichte</a></li>
          <li><a title="Link 1" href="nutzen.html">Nutzen</a></li>
                   <ul>
          <li><a title="Link 2" href="indirekternutzen">Indirekter Nutzen</a></li>
          <li><a title="Link 3" href="direkternutzen">Direkter Nutzen</a></li>
              <ul>

Das letzte <ul> ist falsch. Es muss innerhalb eines <li> stehen. Also bspw. so:

HTML: 
<ul class="menue" id="navi">
          <li><a title="Link 1" href="nutzen.html">Hauptmenü</a>
                   <ul>
                          <li><a title="Link 2" href="indirekternutzen">Untermenü</a></li>
                   </ul>
         </li>
         <li><a title="Link 1" href="nutzen.html">Hauptmenü 2</a></li>
</ul>

Dann sind auch deine CSS-Angaben funktionsfähig.
 
ich wollte eig noch ne unterliste zum direkten nutzen machen hab alles auch ordnungsgemäß am en de Geschlossen

Oder kann man keine unordered list in einer anderen machen?

HTML: 
       <ul class="menue" id="navi">
          <li><a title="Home" href="geschichte.html">Geschichte</a></li>
          <li><a title="Link 1" href="nutzen.html">Nutzen</a></li>
                   <ul>
          <li><a title="Link 2" href="indirekternutzen">Indirekter Nutzen</a></li>
          <li><a title="Link 3" href="direkternutzen">Direkter Nutzen</a></li>
              <ul>
          <li><a title="Link 3.1" href="honig">Honig</a></li>
          <li><a title="Link 3.2" href="bienenwachs">Bienenwachs</a></li>
          <li><a title="Link 3.3" href="pollen">Pollen</a></li>
          <li><a title="Link 3.4" href="propolis">Propolis/Kittharz</a></li>    
          <li><a title="Link 3.5" href="geleeroyal">Gel&egrave;e Royal</a></li>
          <li><a title="Link 3.6" href="bienengift">Bienengift</a></li>    
              </ul></ul>
          <li><a title="Link 4" href="derbienenstaat">Der Bienenstaat</a></li>
          <li><a title="Link 5" href="anatomiederbiene">Anatomie der Biene</a></li>
              <ul>
          <li><a title="Link 5.1" href="caput">Caput/Kopf</a></li>
          <li><a title="Link 5.2" href="thorax">Thorax/Brust</a></li>
          <li><a title="Link 5.3" href="abdomen">Abdomen/Hinterleib</a></li>
              </ul>
        </ul>


Danke für euch für eure schnelle und kompetente hilfe
 
Natürlich geht das und ich habe dir oben bereits ein funktionsfähiges Beispiel geschrieben, was Du nur für dich anpassen musst.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben