Drop down meny utan java script

Självklart går det Jag gör alltid DD-menyer enbart i CSS.
Grundprincipen är ganska enkel.
Tänk dig att du har ett DOM-träd som följer

UL //"Hållare" för hela menyn
 LI //Objekt 1 i menyn
  UL //Undermeny
   LI //Objekt 1 i undermenyn
   LI //Objekt 2 i undermenyn
 LI //Objekt 2 i menyn
  UL //Undermeny
   LI //Objekt 1 i undermenyn

Då säger du bara att UL UL ska ha display:none, men när du hovrar över LI så ska UL få visas. Sån är grundprincipen.

Ett utdrag ur en dropdown-meny jag skapat, den är inte så "trimmad" men den funkar iallafall

div.menu ul{ list-style-type: none; display: block;}
div.menu ul>li ul{ visibility: hidden; position: absolute; z-index: 100; width: 170px; padding-left: 0;}
div.menu>ul ul ul{ margin-left: 170px; margin-top:-25px; }
div.menu li:hover > ul.children{ visibility: visible; }
div.menu>ul>li{ float: left; }
div.menu li{ height: 25px; display: list-item; }
div.menu ul a{display: block; height: 14px; line-height: 14px; }

Min meny är gjord utan javascript. Så här ser den ut live Inte riktigt lik den som du hänvisar till då den expanderar neråt och inte åt sidan. Den duger kanske ändå?

<div class="menybox">

<div class="vittext">MENY</div>

<div class="menytext">för alla</div>

<div class="loggcontainer">
<ul class="loggmeny">
<li> <a href="dold.php">Stäng Meny</a></li>

</ul>
</div>

<div id="vmeny">
<ul>
<li><a href="husfakta.php">Fakta om huset</a></li>
<li><a href="huset.php">Om föreningen »</a>

   <ul>
   <li class="undermeny"><a href="kanon.php">&nbsp;&nbsp;föreningslokal</a></li>
   <li class="undermeny"><a href="gard.php">&nbsp;&nbsp;gårdsförvandling</a></li>
   <li class="undermeny"><a href="bygget.php">&nbsp;&nbsp;byggprocess gård</a></li>
   <li class="undermeny"><a href="blommor.php">&nbsp;&nbsp;gårdsskötsel</a></li>
   <li class="undermeny"><a href="tvatt.php">&nbsp;&nbsp;tvättstuga</a></li>
   <li class="undermeny"><a href="trappa.php">&nbsp;&nbsp;ny gårdsentré</a></li>
   <li class="undermeny"><a href="trappa2.php">&nbsp;&nbsp;nygammal trappa</a></li>
   <li class="undermeny"><a href="arsbok.php">&nbsp;&nbsp;75-årsbok</a></li>  
   </ul>
   </li>

<li><a href="stadgar.php">Stadgar</a></li>
<li><a href="felanm.php">Felanmälan</a></li>
<li><a href="dokument.php">Dokument</a></li>
<li><a href="lankar.php">Externa länkar</a></li>
<li><a href="hemsidan.php">Om hemsidan</a></li>
<li><a href="maklare.php">För mäklare</a></li>
<li><a href="forsta.php">Startsidan</a></li>

</ul>
</div>

<div class="menytext">&nbsp;</div>
<div class="menytext">för medlemmar</div>

<div class="loggcontainer" >

<ul class="loggmeny"  >
<li><a href="inloggning.php">Logga in</a></li>

</ul>
</div>
</div>

CSS

/* VERTIKAL RULLMENY, EXPANDERAR 1 NIVÅ*/

/* box för rullmenyn */
	.menybox {padding: 10px; height: 90%; width: 150px;border: 
  1px solid #C8D6B2; overflow: auto; background: /*#C8D6B2;*/ #569AAA; position:fixed;}     /*ÄNDRAT FÄRGEN HÄR*/

/* loggmeny, vill bara ha ett annat utseende och text som inte markeras som länk bara */

.menytext{font-size: 90%; color: #800000;}
.undermeny{font-size: 90%;}
.vittext {color: #FFFFFF;}

.loggcontainer{left; width: 148px; font-size: 110%;
border-top: 1px solid #C8D6B2; border-left: 1px solid #C8D6B2; 
border-right: 1px solid #C8D6B2;}

.loggmeny{margin: 0; padding: 0; list-style-type: none;}
.loggmeny a{display: block; margin: 0; text-decoration: none; 
padding-bottom: 0.5em; padding-left: 5px ; color: #800000;
background: #E6E3DA; border-bottom: 1px solid /*#C8D6B2;*/ #568Bac;}		/*ÄNDRAT FÄRGEN HÄR*/

.loggmeny a:hover{background: #DCDFE4;}

/* Resten */

#vmeny ul {list-style-type: none; 
font-size: 14px;
margin: 0px;
padding: 0px;} 

#vmeny > ul > li {
border-top: 1px solid /*#C8D6B2;*/ #568BAC;			/*ÄNDRAT FÄRGEN HÄR*/
border-bottom: 2px solid /*#C8D6B2;*/ #568BAC;
} 	/*ÄNDRAT FÄRGEN HÄR*/

#vmeny li {
background-color: #E9EFFB;
position: relative; }

#vmeny > ul > li > ul {background: #E6E3DA;}

#vmeny li:hover {
background-color: #DCDFE4;}

#vmeny a { text-decoration: none;
display: block;
padding-left: 8px;
padding-right: 8px; 
padding-top: 2px;
padding-bottom: 2px;}

#vmeny a:link { color: black;}
#vmeny a:visited { color: black;}
#vmeny a:hover { color: blue;}
#vmeny a:active { color: black;}
#vmeny ul li a#current {backgrond: #000000;}

#vmeny > ul ul {
width: 130px;
display: none;}

#vmeny li:hover > a + ul {
display: block;}

Välj och vraka:
http://css.maxdesign.com.au/listamatic/

Ok, jag skulle vilja ha en som ser ut såhär och fungerar även när java script inte är aktiverat +är java script aktiverat vill jag att det ska bli en animation när man använder menyn.

Det heter javascript inte java script, kolla in allas exempel som dom telat med sig de flesta har liknande funktioner du är ute efter och animeringen kan du göra i efterhand du kan läsa steg för steg att bygga en meny + lägga in effekter med jquery: http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/

javascript, ok (blir iofs understryket med röd färg om man stavar så)

voigtann1 skrev:

Det heter javascript inte java script, kolla in allas exempel som dom telat med sig de flesta har liknande funktioner du är ute efter och animeringen kan du göra i efterhand du kan läsa steg för steg att bygga en meny + lägga in effekter med jquery: http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/

Jaha, kan man lägga javascript på en drop down meny gjord endast med css? T.ex. den här

Jag letar efter en svart meny, med responsive webbdesign, horizontal.
Jag vill att de ska se ut ungefär såhär: http://themify.me/demo/themes/minshop/blog/blog-4-columns/
Och när man förminskar webbläsarfönstret till iPhone storlek vill jag att menyn ska se ungefär likadan ut som i exemplet, men att man endast ska se undermenyerna när man behöver det.

Varför måste det vara JavaScript? Börja med att göra en enbart i CSS och förstå hur det funkar. Sen kan du använda dig av CSS3 animationer för att få till eventuella effekter för att ta fram menyn

Gildebrand skrev:

Varför måste det vara JavaScript? Börja med att göra en enbart i CSS och förstå hur det funkar. Sen kan du använda dig av CSS3 animationer för att få till eventuella effekter för att ta fram menyn

Tänkte att det är enklare att kopiera en färdig, och sedan ändra CSS.

Kopiera inte. Skriv själv.
Ska det vara responsivt så behöver du inte heller JavaScript. Responsiv design kan väl sammanfattas med => Float, Min/Max-values, Mediaquerys. Inget behov av JavaScript

Jag tror jag behåller en meny jag redan gjort.
Jag använder:

@media screen and (max-width: 500px) {

i min CSS-kod

men behöver en ny "knapp" till en iPhone-meny.
Den knappen ska ta fram en lämplig meny för iPhone (som jag inte har gjort än)
Eller kan man göra en app om man är nybörjare eller tar det lång tid att lära?