Wie erstellt man ein (vertikales) CSS-Dropdown-Menü?

Question

Guten Tag,

Meine aktuelle Aufgabe besteht darin, mehrere Stylesheets für eine Website zu erstellen. Für eine der Websites muss ich ein Dropdown-Menü erstellen. Ich darf jedoch den HTML-Code überhaupt nicht ändern, also soll ich ein Dropdown-Menü nur mit CSS erstellen.

Hier ist der HTML-Code, den ich in Form eines Dropdown-Menüs anzeigen muss:

<div id="global-nav">
<ul>
<li><a href="#products">Products</a>
  <ul>
  <li><a href="#widgets">Widgets</a></li>
  <li><a href="#sites">Sites</a></li>
  <li><a href="#gadgets">Gadgets</a></li>
  </ul>
</li>
</ul>

Es gibt jedoch auch unterschiedliche Anforderungen: Es sollten keine Punkte oder Kreise vor den einzelnen Listenpunkten stehen.

Ich frage mich, ob es möglich ist, diese Aufgabe nur mit CSS zu erfüllen oder nicht. Gibt es eine Möglichkeit, dies mit CSS zu tun?

Answer 1

Vertikales Menü mit horizontaler Erweiterung

jsBin Demo

*{padding:0;margin:0;}
body{font:16px/1 sans-serif}

/*VERTICAL MENU*/
nav.vertical{
  position:relative;
  width:200px;
}

/* ALL UL */
nav.vertical ul{
  list-style: none;
}
/* ALL LI */
nav.vertical li{
  position:relative;
}
/* ALL A */
nav.vertical a{
  display:block;
  color:#eee;
  text-decoration:none;
  padding:10px 15px;
  background:#667;
  transition:0.2s;
}
/* ALL A HOVER */
nav.vertical li:hover > a{
  background:#778;
}

/* INNER UL HIDE */
nav.vertical ul ul{
  position:absolute;
  left:0%;
  top:0;
  width:100%;
  visibility:hidden;
  opacity:0;
  transition: transform 0.2s;
  transform: translateX(50px);
}
/* INNER UL SHOW */
nav.vertical li:hover > ul{
  left:100%;
  visibility:visible;
  opacity:1;
  transform: translateX(0px);
}

<nav class="vertical">
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="#">Products +</a>
      <ul>
        <li><a href="#">Widgets</a></li>
        <li>
          <a href="#">Sites +</a>
          <ul>
            <li><a href="#">Site 1</a></li>
            <li><a href="#">Site 2</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Gadgets +</a>
          <ul>
            <li><a href="#">Gadget 1</a></li>
            <li><a href="#">Gadget 2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>

Vertikales Menü (nur mobil)

Diese Option eignet sich am besten für mobile Geräte (kleinere Bildschirme, CSS), da sonst das Ein- und Ausblenden die Benutzerfreundlichkeit beeinträchtigen würde.

jsBin Demo

*{padding:0;margin:0;}
body{font:16px/1 sans-serif}

/*VERTICAL MENU*/
nav.vertical{
  position:relative;
  background:#667;
}

/* ALL UL */
nav.vertical ul{
  list-style: none;
}
/* ALL LI */
nav.vertical li{
  position:relative;
}
/* ALL A */
nav.vertical a{
  display:block;
  color:#eee;
  text-decoration:none;
  padding:10px 15px;
  transition:0.2s;
}
/* ALL A HOVER */
nav.vertical li:hover > a{
  background:#778;
}

/* INNER UL HIDE */
nav.vertical ul ul{
  background:rgba(0,0,0,0.1);
  padding-left:20px;
  transition: max-height 0.2s ease-out;
  max-height:0;
  overflow:hidden;
}
/* INNER UL SHOW */
nav.vertical li:hover > ul{
  max-height:500px;
  transition: max-height 0.25s ease-in;
}

<nav class="vertical">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services +</a>
      <ul>
        <li><a href="#">Service 1</a></li>
        <li><a href="#">Service 2</a></li>
        <li><a href="#">Service 3</a></li>
      </ul>
    </li>
    <li><a href="#">Products +</a>
      <ul>
        <li><a href="#">Widgets</a></li>
        <li>
          <a href="#">Sites +</a>
          <ul>
            <li><a href="#">Site 1</a></li>
            <li><a href="#">Site 2</a></li>
          </ul>
        </li>
        <li><a href="#">Gadgets +</a>
          <ul>
            <li><a href="#">Gadget 1</a></li>
            <li><a href="#">Gadget 2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>

Answer 2

Nur eine leicht verbesserte Version der großartigen Lösung oben.

<style type="text/css">

#global-nav {
    width: 121px;
    float: left;
    background: #e8eef4;
}

#global-subnav {
    width: 121px;
    background: #09C;
}

#global-nav a {
    color: #034af3;
    cursor: pointer;
    display: block;
    height: 40px;
    line-height: 40px;   
    text-indent: 10px;               
    text-decoration:none;
    font-weight: bold;
    width: 100%;
}

#global-nav ul{
    background: yellow;
    padding: 0;
    margin: 0;
}

#global-subnav ul{
    background: orangered;
    position: relative;
    top: -10px;
    left: 40px;
}

#global-nav li{
    list-style: none;   
    border-bottom: #5C87B2 solid;
    border-width: 3px;
}

#global-nav ul ul li{
    display:none;
}

#global-nav li:hover {
    background: #fff;
}

#global-nav li:hover ul li{
    display:block;
}

</style>

<div id="global-nav">
    <ul>
        <li><a href="#One">One</a>
            <div id="global-subnav">
                <ul>
                    <li><a href="#A">A</a></li>
                    <li><a href="#B">B</a></li>
                    <li><a href="#C">C</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#Two">Two</a>
            <div id="global-subnav">
                    <ul>
                        <li><a href="#1">1</a></li>
                        <li><a href="#2">2</a></li>
                        <li><a href="#3">3</a></li>
                    </ul>
            </div>
        </li>
    </ul>
</div>

Answer 3

Der Code im letzten Beitrag ist falsch.

Sie können nicht mehr als 1 ID mit demselben Namen in einem Dokument haben, wenn Sie also den obigen Code verwenden, müssen Sie die

ID="global-subnav" a class="global-subnav"

und ändern Sie dann das CSS von

#global-subnav a .global-subnav