CooKie_KO: Problem: Dropdown-Menu gestalten

Hallo liebe Community,

ich bin erst seit einigen Tagen in der Welt von html und css. Bin also absolut noch in der Lernphase, aber bastel parallel zu meinen Lernfortschritten schon an einer Seite rum. Bei meinem Dropdown-menu in der Navigation bin ich aber jetzt auf Probleme gestoßen, zu denen ich keine Lösungen finde. Ich freue mich auch auf eine einzelne Lösung für eins der Probleme, da ich keinen Kurs besuche, keinen Lehrer habe und somit im Internet step-by-step (auch von dir ) lerne.

Meine Probleme sind:

1. Die Unterpunkte des Dropdowns (Link1,2,3 und Link 1.1,1.2,2.1 etc) sollen nur gehovert werden, wenn man mit der Maus auf dem Link ist. Momentan endet das Linkfeld mit der Schrift, gehovert wird aber bis rechts an den Rand. Das heißt man kann rechts von der Schrift mit der Maus hover-effekt auslösen, aber man befindet sich nicht auf dem Link.

2. Es gelang mir nicht wirklich die momentan kleingeschriebenen, gelb markierten Untermenupunkte (Link 1.1,1.2, 2.1 etc) mit Befehlen anzusprechen. Wenn ich den Listpunkten eine ID gab, waren die Befehle an die ID wirkungslos, als Klasse konnte ich ihnen die kleinere Schrift und gelben Hintergrund geben, andere Befehle wie Padding, list-style-type und andere haben aber nicht funktioniert... Ich will im Endeffekt diese Unterpunkte einrücken, ihnen einen list-style-type geben, möglicherweise Schrifttyp ändern, und den Abstand nach oben verringern, damit sie klar als Unterpunkte zu Link1,2,3 erkennbar werden.

3. Abstand zwischen den Unterpunkten (1.1, 1.2 etc) verringern (siehe oben), damit die Liste nicht so ellenlang ist. Ich geh davon aus, dass man das mit margin-top hinkriegt, sobald man die Listenpunkte einzeln ansprechen kann (Problem 2.)

4. Wenn man auf die Übermenupunkte hovert, wird das Hoverfeld innerhalb 200ms geändert, das Dropdownmenu aber kommt sofort. Das soll auch innerhalb 200ms eingeblendet werden. Wenn ich den gleichen Befehl beim ul#navi_main li:hover>ul reinhab, hat es aber nichts geändert.

Ich hoffe ihr könnt mir weiterhelfen, entweder mit dem lösenden Gesamtcode (den kann ich lesen, nachvollziehen und davon lernen) oder mit verbaler Erklärung, dann aber bitte mit den einzelnen Codes. Denn nur "mache das und das dort" (rein verbal) wird mir möglicherweise nicht helfen, wenn ich nicht weiß wie "das und das" geht.

Freu mich schon auf hoffentlich hilfreiche Antworten.
Unten habe ich html und css kopiert.

Hier sollte ein Bild des Dropdown-Menus angezeigt werden.

HTML-Editor-File:

  
<nav id="navigation">  
      <ul id="navi_main">  
        <li class="Startseite"><a href="index.html">Startseite</a>  
        </li>  
        <li class="Inhalt"><a href="content.html">Inhalt</a>  
          <ul class="dropdown_navi">  
            <li><a href="#">Linkziel 1</a></li>  
            <li><a href="#">Linkziel 2</a></li>  
            <li><a href="#">Linkziel 3</a></li>  
          </ul>  
        </li>  
        <li class="Angebot"><a href="offer.html">Angebot</a>  
          <ul class="dropdown_navi">  
            <li><a href="#">Linkziel 1</a></li>  
              <li id="test" class="test"><a href="#">Linkziel 1.1</a></li>  
              <li id="test" class="test"><a href="#">Linkziel 1.2</a></li>  
            <li><a href="#">Linkziel 2</a></li>  
              <li id="test" class="test"><a href="#">Linkziel 2.1</a></li>  
              <li id="test" class="test"><a href="#">Linkziel 2.2</a></li>  
              <li id="test" class="test"><a href="#">Linkziel 2.3</a></li>  
            <li><a href="#">Linkziel 3</a></li>  
              <li id="test" class="test"><a href="#">Linkziel 3.1</a></li>  
              <li id="test" class="test"><a href="#">Linkziel 3.2</a></li>  
          </ul>  
        </li>  
        <li class="about"><a href="about.html">Über mich</a>  
        </li>  
        <li class="kontakt"><a href="contact.html">Kontakt</a>  
        </li>  
      </ul>  
    </nav>  

CSS-File:

  
ul{  
  list-style-type: none;  
}  
  
ul#navi_main{  
  text-align: center;  
  font-weight: bold;  
}  
  
ul#navi_main a{  
  text-decoration: none;  
  color: black;  
}  
  
ul#navi_main a:hover{  
  text-decoration: none;  
}  
  
ul#navi_main li{  
  float: left;  
  position: relative;  
  list-style-type: none;  
  margin-top: 15px;  
  margin-left: 10px;  
  line-height: 30px;  
  -webkit-transition: all 200ms ease-in;  
  -moz-transition: all 200ms ease-in;  
  -ms-transition: all 200ms ease-in;  
  -o-transition: all 200ms ease-in;  
  transition: all 200ms ease-in;  
}  
  
ul#navi_main li.startseite{  
  width: 100px;  
  height: 30px;  
}  
  
ul#navi_main li.inhalt{  
  width: 100px;  
  height: 30px;  
}  
  
ul#navi_main li.angebot{  
  width: 100px;  
  height: 30px;  
}  
  
ul#navi_main li.about{  
  width: 100px;  
  height: 30px;  
}  
  
ul#navi_main li.kontakt{  
  width: 100px;  
  height: 30px;  
}  
  
ul#navi_main li.startseite:hover{  
  width: 100px;  
  height: 30px;  
  background: #BFBFBF;  
  border-radius: 10px;  
  box-shadow: 3px 3px 3px #000000;  
  -webkit-transition: all 200ms ease-in;  
  -moz-transition: all 200ms ease-in;  
  -ms-transition: all 200ms ease-in;  
  -o-transition: all 200ms ease-in;  
  transition: all 200ms ease-in;  
}  
  
ul#navi_main li.inhalt:hover{  
  width: 100px;  
  height: 30px;  
  background: #BFBFBF;  
  border-top-left-radius: 10px;  
  border-top-right-radius: 10px;  
  box-shadow: 3px 3px 3px #000000;  
}  
  
ul#navi_main li.angebot:hover{  
  width: 100px;  
  height: 30px;  
  background: #BFBFBF;  
  border-top-left-radius: 10px;  
  border-top-right-radius: 10px;  
  box-shadow: 3px 3px 3px #000000;  
}  
  
ul#navi_main li.about:hover{  
  width: 100px;  
  height: 30px;  
  background: #BFBFBF;  
  border-radius: 10px;  
  box-shadow: 3px 3px 3px #000000;  
}  
  
ul#navi_main li.kontakt:hover{  
  width: 100px;  
  height: 30px;  
  background: #BFBFBF;  
  border-radius: 10px;  
  box-shadow: 3px 3px 3px #000000;  
}  
  
ul#navi_main li ul.dropdown_navi{  
  background: #BFBFBF;  
  position: absolute;  
  left: 0;  
  top: 30px;  
  width: 150px;  
  padding: 0px;  
  border-top-right-radius: 10px;  
  border-bottom-left-radius: 10px;  
  border-bottom-right-radius: 10px;  
  box-shadow: 3px 3px 3px #000000;  
}  
  
ul#navi_main li ul li{  
  float: none;  
  text-align: left;  
  display: block;  
  padding: 0px;  
  height: 20px;  
  line-height: 20px;  
}  
  
ul#navi_main li ul li:hover{  
  float: none;  
  text-align: left;  
  display: block;  
  background: #EFEFEF;  
  padding: 0px;  
}  
  
ul#navi_main li>ul{  
  display: none;  
}  
  
ul#navi_main li:hover>ul{  
  display: block;  
}  
  
.test{  
  list-style-type: disc;  
  list-style-position: inside;  
  background: #FFFF00;  
  padding-left: 5px;  
  font-size: 10px;  
  color: #00FFDF;  
}  
  
#test{  
  list-style-type: disc;  
  list-style-position: inside;  
  background: #FFFF00;  
  padding-left: 5px;  
  font-size: 10px;  
  color: #00FFDF;  
}  

  1. Oh ja,

    aller Anfang ist schwer. Gleich vorweg, du wirst nicht daran vorbeikommen, dir die Grundlagen von HTML und CSS anzueignen. www.selfhtml.org bietet hier sehr gute Einstiegshilfe und ist ein gutes "Buch".

    Code Beispiele sind immer gut, um ein Problem zu umschreiben. Es gibt dafür aber gewisse Web-Seiten, mit denen man das Ganze auch gleich testen kann und zum anderen hier das Forum speichermäßig entlastet. Ich habe mal eine Seite mit deinem Beispiel hier angelegt:

    http://jsfiddle.net/tb9DA/

    Desweiteren, die Code-Beispiele sollten schon eine gewisse Qualität haben. Mehrere identische id Attribute wie in deinem Beispiel sind generell nicht sehr schön. Ein gewisser kritischer Blick ist oft sehr hilfreich.

    Zu deinen Fragen generell ist anzumerken, dass man auch mit CSS code sparsam umgehen sollte. Ungeeignete CSS selektoren können selbst den schnellsten Browser auf dem schnellsten Computer langsam aussehen lassen.

    ... 1. Die Unterpunkte des Dropdowns (Link1,2,3 und Link 1.1,1.2,2.1 etc) sollen nur gehovert werden, wenn man mit der Maus auf dem Link ist. Momentan endet das Linkfeld mit der Schrift, gehovert wird aber bis rechts an den Rand. Das heißt man kann rechts von der Schrift mit der Maus hover-effekt auslösen, aber man befindet sich nicht auf dem Link. ...

    Verstehe nicht ganz dein Problem hier. Wenn du nur hover Effekte für das link Element haben moechtest, dann einfach in deinem CSS die entsprechende Vorgabe:

    a:hover{
      background:red;
    }

    ...2. Es gelang mir nicht wirklich die momentan kleingeschriebenen, gelb markierten Untermenupunkte (Link 1.1,1.2, 2.1 etc) mit Befehlen anzusprechen. Wenn ich den Listpunkten eine ID gab, waren die Befehle an die ID wirkungslos, als Klasse konnte ich ihnen die kleinere Schrift und gelben Hintergrund geben, andere Befehle wie Padding, list-style-type und andere haben aber nicht funktioniert... Ich will im Endeffekt diese Unterpunkte einrücken, ihnen einen list-style-type geben, möglicherweise Schrifttyp ändern, und den Abstand nach oben verringern, damit sie klar als Unterpunkte zu Link1,2,3 erkennbar werden. 3. Abstand zwischen den Unterpunkten (1.1, 1.2 etc) verringern (siehe oben), damit die Liste nicht so ellenlang ist. Ich geh davon aus, dass man das mit margin-top hinkriegt, sobald man die Listenpunkte einzeln ansprechen kann (Problem 2.)...

    Deshalb solltest du dir erst einmal die Grundzüge von CSS durchlesen. In deinem Beispiel sind es folgende CSS Eigenschaften, die den Abstand verursachen.

    margin-top: 5px;
    margin-left: 10px;
    line-height: 30px;

    ... 4. Wenn man auf die Übermenupunkte hovert, wird das Hoverfeld innerhalb 200ms geändert, das Dropdownmenu aber kommt sofort. Das soll auch innerhalb 200ms eingeblendet werden. Wenn ich den gleichen Befehl beim ul#navi_main li:hover>ul reinhab, hat es aber nichts geändert. ...

    Das liegt daran, dass transition effects nicht mit CSS Eigenschaft display:none zu realisieren sind. Auch hierfür ist etwas Literaturstudium notwendig. Anstelle von display:none koenntest du height:0px; versuchen.

    Ich hoffe, das hilft dir erst einmal,

    Gruss,
    H olger

  2. @@CooKie_KO:

    nuqneH

    Bei meinem Dropdown-menu in der Navigation

    Bedenke, dass es auf sehr vielen Geräten kein Hover gibt. Dropdown-Menüs im Web sollten der Vergangenheit angehören. Auf jden Fall sollte die Navigation auch anders funktionieren.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. @Gunnar Bittersmann:

      "Bedenke, dass es auf sehr vielen Geräten kein Hover gibt. Dropdown-Menüs im Web sollten der Vergangenheit angehören. Auf jden Fall sollte die Navigation auch anders funktionieren."
      Danke für den Hinweis, da wär ich allein wahrscheinlich nicht oder sehr spät irgendwann drauf gestoßen. Kannst du mir erklären, warum es das bei manchen Geräten nicht gibt und welche Alternative für die Navigation es gibt, die von der Bedienung her ähnlich ist. Ich fand das Dropmenu sehr praktisch und für manche Fälle die übersichtlichste Lösung.

      @H olger:

      Danke für deine ausführliche und sehr hilfreiche Antwort und die vielen Tipps. Habe alles soweit verstanden und kann gut davon lernen.

      1. @@CooKie_KO:

        nuqneH

        Bedenke, dass es auf sehr vielen Geräten kein Hover gibt.
        Kannst du mir erklären, warum es das bei manchen Geräten nicht gibt

        Weil die Geräte keine Maus oder anderen Pointer haben. Smartphones, Tablets, …

        und welche Alternative für die Navigation es gibt, die von der Bedienung her ähnlich ist.

        Die Unterpunkte auch per Tap (Click) öffnen lassen.

        Und auch nicht die Tastaturbedienung vergessen!

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)