html - Making a horizontal dropdown vertical -

html - Making a horizontal dropdown vertical -

hi want create top dropdown menu vertical 1 on left. there help me? im running out of ideas!

thanks in advance!

class="snippet-code-css lang-css prettyprint-override">@charset "utf-8"; /* css document */ /*index*/ #index { background-image: url(../img/metallica/metallica_london_2008-09-15_kirk_and_jamesbl.jpg); background-repeat: no-repeat; background-position: center 10; background-attachment: fixed; } #venstre { float: left; } #midt { float: left; } #header { position: fixed; top: 0; left: 0; height: auto; } #header { list-style-type: none; text-decoration: none; color: #ffffff; font-family: 'cinzel', serif, 'cinzel decorative', cursive; font-size: 60px; float: left; margin-top: 32px; margin-left: 40px; margin-right: 650px; position: relative; } #header form { float: right; margin-top: 26px; margin-right: 49px; } #righto { float: right; } #lefto { float: left; } #wrapper { clear: both; } .anker { width: 67px; height: 52px; padding: 10px; margin-left: 147px; margin-top: 207px; float: left; position: fixed; } .anker { text-decoration: none; text-align: center; } .anker ul li { list-style-type: none; } .undercirkel { margin-top: 0; margin-left: 20px; list-style-type: none; } .undercirkelt { margin-top: 0; margin-left: 800px; list-style-type: none; } .undercirkeltr { margin-top: 390px; list-style-type: none; } .box { float: left; width: 700px; height: 390px; margin-left: 428px; margin-top: 270px; background-image: url(../img/bg.png); z-index: -1; } .box form { display: inline-block; } .box .email { margin-left: 15px; } .box { padding: 15px; } .boxt { float: left; width: 700px; height: 390px; margin-left: 428px; background-image: url(../img/bg.png); z-index: -1; overflow: auto; padding: 15px; } .boxtr { float: left; width: 700px; height: 390px; margin-left: 428px; background-image: url(../img/bg.png); z-index: -1; overflow: auto; padding: 15px; } .boxf { float: left; width: 700px; height: 390px; margin-left: 428px; background-image: url(../img/bg.png); z-index: -1; overflow: auto; padding: 15px; } .boxfe { float: left; width: 700px; height: 390px; margin-left: 428px; background-image: url(../img/bg.png); z-index: -1; overflow: auto; padding: 15px; } .boxfe h2 { margin-bottom: 50px; margin-left: 240px; } .boxfe table { text-align: center; } .dropdown { width: auto; float: left; position: fixed; margin-top: 190px; } .dropdown { text-decoration: none; color: #ffffff; font-family: 'cinzel', serif, 'cinzel decorative', cursive; text-align: center; font-size: 18px; margin: 2px 0 2px 0; } .dropdown a:hover { color: #282828; } .dropdown ul { display: block; } .dropdown ul { list-style-type: none; } .dropdown ul li { position: relative; background-color: #393939; border: #d4d4d4; list-style-type: none; } .underundermenu { display: none; } ul > li > ul > li > ul { display: none; } ul > li > ul > li:hover > ul { display: block; } .underundermenu li { display: block; text-decoration: none; } .underundermenu li { clear: both; background-color: #393939; } .dropdown li:hover .underundermenu { display: block; position: absolute; } .dropdown li:hover .underundermenu li { float: left; font-size: 13px; } .undermenu { display: none; } .undermenu li { display: block; text-decoration: none; } .undermenu li { clear: both; background-color: #393939; } .dropdown li:hover .undermenu { display: block; position: absolute; overflow: auto; left: 100%; top: 0; margin: 0; padding: 0; } .dropdown li:hover .undermenu li { float: left; font-size: 13px; } .dropdown li:hover .underundermenu { display: block; position: absolute; overflow: auto; left: 100%; top: 0; margin: 0; padding: 0; } #right { width: 300px; background-image: url(../img/bg.png); float: right; margin-right: 52px; margin-top: 200px; position: fixed; margin-left: 1250px; } #right img { padding: 15px; } .space { padding-top: 5em; } .footer { clear: both; color: #ffffff; text-align: center; padding-top: 150px; } /* kontakt */ #kontakt { background-image: url(../img/metallica/metallica_london_2008-09-15_kirk_and_jamesbl.jpg); background-repeat: no-repeat; background-position: center 10; background-attachment: fixed; } /* menu styles */ .third-level-menu { position: absolute; top: 0; right: -150px; width: 150px; list-style: none; padding: 0; margin: 0; display: none; } .third-level-menu > li { height: 30px; background-color: #393939; display: block; } .third-level-menu > li:hover { background: #cccccc; } .second-level-menu { position: absolute; top: 30px; left: 0; width: 150px; list-style: none; padding: 0; margin: 0; display: none; } .second-level-menu > li { position: relative; height: 30px; background-color: #393939; } .second-level-menu > li:hover { background: #cccccc; } .top-level-menu { list-style-type: none; padding: 0; margin: 0; } .top-level-menu > li { position: relative; float: left; height: 30px; width: 100px; background-color: #393939; } .top-level-menu > li:hover { background: #cccccc; } .top-level-menu li:hover > ul { /* on hover, display next level's menu */ display: inline; } /* menu link styles */ .top-level-menu /* apply links within multi-level menu */ { font-family: cinzel, "cinzel decorative"; color: #ffffff; text-decoration: none; padding: 0 0 0 10px; /* create link cover entire list item-container */ display: block; line-height: 30px; } .top-level-menu a:hover { color: #000000; } class="snippet-code-html lang-html prettyprint-override"><body id="index"> <div id="header"> <div id="lefto"><a href="index.html">rockentusiasterne</a> </div> <div id="righto"> <form> <label> <img src="../img/search.png"> </label> <input type="search" name="search" placeholder="søg"></input> </form> </div> </div> <div id="wrapper"> <div id="left"> <ul class="top-level-menu"> <li><a href="#">about</a> </li> <li><a href="#">services</a> </li> <li> <a href="#">offices</a> <ul class="second-level-menu"> <li><a href="#">chicago</a> </li> <li><a href="#">los angeles</a> </li> <li> <a href="#">new york</a> <ul class="third-level-menu"> <li><a href="#">information</a> </li> <li><a href="#">book meeting</a> </li> <li><a href="#">testimonials</a> </li> <li><a href="#">jobs</a> </li> </ul> </li> <li><a href="#">seattle</a> </li> </ul> </li> <li><a href="#">contact</a> </li> </ul> <ul class="dropdown"> <li><a href="index.html">forside</a> </li> <li><a href="index.html">genrer</a> <ul class="undermenu"> <li><a href="#">rock'n'roll</a> </li> <li><a href="#">alternativ musik</a> </li> <li><a href="#">grunge</a> </li> </ul> </li> <li><a href="omos.html">om os</a> </li> <li><a href="forum.html">forum</a> <ul class="undermenu"> <li><a href="#">opret bruger</a> </li> <li><a href="#">faq</a> </li> </ul> </li> <li><a href="kontakt.html">kontakt os</a> </li> </ul> <!--- <div class="dropdown"> <ul> <div class="drop"> </div> <div class="drop"> <li><a href="index.html">genrer</a> <ul class="undermenu"> <li><a href="#">rock'n'roll</a></li> <li><a href="#">alternativ musik</a></li> <li><a href="#">grunge</a></li> </ul> </li> </div> <div class="drop"> <li><a href="omos.html">om os</a></li> </div> <div class="drop"> <li><a href="forum.html">forum</a> <ul class="undermenu"> <li><a href="#">opret bruger</a></li> <li><a href="#">faq</a></li> </ul> </li> </div> <div class="drop"> <li><a href="kontakt.html">kontakt os</a></li> </div> </ul> </div> ---></div> <div id="innerwrapper"> <div id="midt"> <div class="anker"> <ul> <li> <a href="#1"> <img src="../img/cirkel.png"> </a> </li> <div class="undercirkel"> <li> <img src="../img/undercirkel.png"> </li> </div> <div class="undercirkel"> <li> <img src="../img/undercirkel.png"> </li> </div> <li> <a href="#2"> <img src="../img/cirkel.png"> </a> </li> <div class="undercirkel"> <li> <img src="../img/undercirkel.png"> </li> </div> <div class="undercirkel"> <li> <img src="../img/undercirkel.png"> </li> </div> <li> <a href="#3"> <img src="../img/cirkel.png"> </a> </li> <div class="undercirkel"> <li> <img src="../img/undercirkel.png"> </li> </div> <div class="undercirkel"> <li> <img src="../img/undercirkel.png"> </li> </div> <li> <a href="#4"> <img src="../img/cirkel.png"> </a> </li> </div> <div class="box"> <a name="1"></a> <h1>elvis presley</h1> <h2>fra wikipedia, den frie encyklopædi</h2> <p>elvis aaron presley (8. januar 1935 tupelo, mississippi, usa – 16. august 1977 memphis, tennessee), amerikansk sanger, guitarist og filmskuespiller.</p> <p>elvis presley er også kendt som king of stone 'n' roll eller slet og ret king.</p> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="boxt"> <a name="2"></a> <h2>barndom</h2> <h3>tupelo</h3> <p>elvis blev født et fattigt arbejderhjem på old saltillo road easttupelo, et to-rums træhus, bygget af hans far, vernon.</p> <p>tvillingebroderen jesse garon presley var døde ved fødslen, og elvis voksede op som ene barn. som 13-årig flyttede han nov 1948 med sine forældre til memphis. hans fødehjem den østlige ende af tupelo er dag indrettet som museum og er den mest besøgte bygning byen. old saltillo road, hvor huset ligger, er efter elvis’ død omdøbt og hedder dag elvis presley drive.</p> <p>byens turisme er høj grad centreret omkring elvis presley.</p> <h3>memphis</h3> <p>i memphis boede familien presley et af de fattigste kvarterer, hvor der var en nær tilknytning til den lokale kirke. kirken kom elvis tit på besøg sammen med sin mor. og det var han fik de første musikalske erfaringer, da han både hørte og sang gospel. <p>familien var meget fattig og skiftede ofte bopæl. de holdt sig det meste til det samme kvarter byen, så sønnen kunne beholde sin skole.</p> <p>elvis gik skole på humes high school på north manasas street memphis.</p> <p>den 9. apr 1953 optrådte han ved den årlige skolefest med sangen "keep them cold icy fingers off of me" og efter et bragende bifald sang han som ekstranummer "till waltz 1 time again you".</p> <p>3. juni 1953 var elvis færdig med sin skolegang. fra han forlod skolen og til sit down gennembrud som 18- årig ernærede han sig som lastbilchauffør og arbejdsmand hos det lokale el-firma, crown electrical company, til den formidable timeløn af 1,25 $.</p> </div> <div class="undercirkeltr"> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> </div> <div class="boxtr"> <a name="3"> <p>elvis' sidste sceneoptræden var på market square arena indianapolis og fandt sted den 26. juni 1977.</p> </a> </div> <div class="undercirkeltr"> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> <div class="undercirkelt"> <li> <img src="../img/undercirkelt.png"> </li> </div> </div> <div class="boxf"> <h2>død som 42-årig</h2> <p>elvis og priscilla blev gift 1. maj 1967 las vegas. 1. februar 1968 blev datteren lisa marie født. Ægteskabet varede til den 23. februar 1972 hvor elvis og priscilla blev separeret og dernæst skilt den 9. oktober 1973.</p> <p>på grund af forkert kost blev elvis sine sidste leveår stadig mere og mere overvægtig. han var ofte på slankekur, men tog hurtigt på vægt igen. elvis blev gradvist afhængig af både sovemedicin og opkvikkende medicin. <p> <p>hans personlige læge, george nichopoulos, mistede sin autorisation en tre måneders periode på grund af dårlig rådgivning og @ have givet elvis meget receptpligtig medicin.</p> <p>den 16. august 1977, dagen før den planlagte start på endnu en turne, blev elvis presley kl. 2.33 om morgenen fundet liggende livløs på sit down badeværelsesgulv hjemme graceland. trods ihærdige genoplivningsforsøg, såvel hjemme som på hospitalet, blev han erklæret død på baptist memorial hospital memphis kl. 15.30. den egentlige dødsårsag blev aldrig officielt fastslået, men blev angivet som "uregelmæssig hjertefunktion".</p> <p>elvis blev efter sin død begravet på kirkegården forrest hill cemetery på elvis presley boulevard memphis. der var imidlertid så stor opmærksomhed omkring hans gravsted, @ han den 2. oktober 1977 sammen med sin mors jordiske rester blev genbegravet på graceland. nu er både elvis, hans forældre, vernon og gladys presley, samt hans farmor, minnie mae presley, begravet parken ved graceland den del som kaldes meditation gardens.</p> <p>the meditation gardens blev åbnet offentligheden den 27. nov 1977. graceland er dag indrettet som elvis-museum og besøges årligt af flere end 600.000 mennesker fra hele verden, usa kun overgået af det hvide hus.</p> <a name="4"></a> </div> </div> <div id="right"> <img src="../img/elvis/<?php echo $row['img'];?>"> <?php echo $row[ 'navn'];?> <?php echo $row[ 'txt'];?> <?php echo $row[ 'video'];?> </div> <div class="footer">designet og udført af <a href="https://www.facebook.com/likeamusicbox">christina l. pedersen</a> </div> </body>

here link fiddle: http://jsfiddle.net/65ply4sm/

do need http://jsfiddle.net/65ply4sm/3/

change css this

.second-level-menu { position: absolute; top: 0px; left: 100px; width: 150px; list-style: none; padding: 0; margin: 0; display: none; } .second-level-menu > li { position: relative; height: 30px; background-color:#393939; }

html css