dropdown menü

[chr1zzo]

hi,

ich erstelle gerade eine webseite und hänge bei dem menü fest.

das menü ist ein muster, das ich entsprechen punkte, farbe, etc angepasst habe.
allerdings möchte ich dieses nun bei gewissen punkten um ein dropdownmenü erweitern.

der quellcode ist wie folgt:
html

<div id='cssmenu' style="width:880px; margin:0 auto;" >
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li><a href='#'><span>punkt2</span></a></li>
   <li><a href='#'><span>punkt3</span></a></li>
  </ul>
</div>

css

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu {
  width: auto;
  font-family: Arial;
  color: #ffffff;
}
#cssmenu.align-right ul li {
  float: right;
  border-right: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.22);
}
#cssmenu.align-right ul li a {
  border-right: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}
#cssmenu ul {
  background: #222222;
  /* Old browsers */

  background: -moz-linear-gradient(bottom, #000000 0%, #222222 50%, #3c3c3c 51%, #393939 78%, #888888 100%);
  background: -webkit-linear-gradient(bottom, #000000 0%, #222222 50%, #3c3c3c 51%, #393939 78%, #888888 100%);
  background: -o-linear-gradient(bottom, #000000 0%, #222222 50%, #3c3c3c 51%, #393939 78%, #888888 100%);
  background: -ms-linear-gradient(bottom, #000000 0%, #222222 50%, #3c3c3c 51%, #393939 78%, #888888 100%);
  background: linear-gradient(to top, #000000 0%, #222222 50%, #3c3c3c 51%, #393939 78%, #888888 100%);
}
#cssmenu:after,
#cssmenu ul:after {
  content: '.';
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu ul li {
  float: left;
  display: block;
  border-right: 1px solid rgba(0, 0, 0, 0.22);
  z-index: 1;
}
#cssmenu ul li::after {
  content: '';
  width: 100%;
  height: 8px;
  position: absolute;
  border-top-left-radius: 50% 4px;
  border-top-right-radius: 50% 4px;
  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);
  background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);
  background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);
  background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);
  background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  z-index: 2;
  bottom: 10px;
}
#cssmenu ul li a {
  display: block;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 12px;
  /*text-transform: uppercase;*/
  color: #ffffff;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 3;
}
#cssmenu ul li a:hover,
#cssmenu ul li.active a {
  color: #ffffff;
}
#cssmenu ul li:hover,
#cssmenu ul li.active {
  background: #a7ac91;
  /* Old browsers */

  background: -moz-linear-gradient(bottom, #838967 0%, #a7ac91 50%, #bec2ae 51%, #bcc0ab 78%, #ffffff 100%);
  background: -webkit-linear-gradient(bottom, #838967 0%, #a7ac91 50%, #bec2ae 51%, #bcc0ab 78%, #ffffff 100%);
  background: -o-linear-gradient(bottom, #838967 0%, #a7ac91 50%, #bec2ae 51%, #bcc0ab 78%, #ffffff 100%);
  background: -ms-linear-gradient(bottom, #838967 0%, #a7ac91 50%, #bec2ae 51%, #bcc0ab 78%, #ffffff 100%);
  background: linear-gradient(to top, #838967 0%, #a7ac91 50%, #bec2ae 51%, #bcc0ab 78%, #ffffff 100%);
}
#cssmenu ul li:hover::after,
#cssmenu ul li.active::after {
  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #a7ac91 61%, #a7ac91 100%);
  background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #a7ac91 61%, #a7ac91 100%);
  background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #a7ac91 61%, #a7ac91 100%);
  background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #a7ac91 61%, #a7ac91 100%);
  background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}

wie gehe ich vor wenn zb bei punkt2 ein dropdown mit 2 unterpunkten öffnen soll?...

ist es richtig das dort dann eine neue <ul> kommt oder bin ich hier auf dem holzweg?
und wie definiere ich diese in css?

vielen dank im vorraus für die hilfe!

 

[threadi]

Nein, bist nicht auf dem Holzweg. Beispiele gibt es zu Hauf im Netz.

Siehe:
http://www.silent-fran.de/css/tutorial/aufklappmenue.html
http://designyourweb.info/so-gehts-ein-schlankes-css3-dropdown-menu-erstellen/346