你好，我想把顶部的下拉菜单变成垂直的，就像左边的那个。 有没有人可以帮助我？我的想法用完了!
提前致谢!
@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 a {
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 a {
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 a {
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 a {
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 a {
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 a {
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 the next level's menu */
display: inline;
}
/* Menu Link Styles */
.top-level-menu a
/* Apply to all links inside the multi-level menu */
{
font-family: Cinzel, "Cinzel Decorative";
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;
/* Make the link cover the entire list item-container */
display: block;
line-height: 30px;
}
.top-level-menu a:hover {
color: #000000;
}<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 a 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 i Tupelo, Mississippi, USA – 16. august 1977 i Memphis, Tennessee), amerikansk sanger, guitarist og filmskuespiller.</p>
<p>Elvis Presley er også kendt som The King of Rock 'n' roll eller slet og ret The 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 i et fattigt arbejderhjem på Old Saltillo Road i 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 i november 1948 med sine forældre til Memphis. Hans fødehjem i den østlige ende af Tupelo er i dag indrettet som museum og
er den mest besøgte bygning i byen. Old Saltillo Road, hvor huset ligger, er efter Elvis’ død omdøbt og hedder i dag Elvis Presley Drive.</p>
<p>Byens turisme er i høj grad centreret omkring Elvis Presley.</p>
<h3>Memphis</h3>
<p>I Memphis boede familien Presley i et af de fattigste kvarterer, hvor der var en nær tilknytning til den lokale kirke. I kirken kom Elvis tit på besøg sammen med sin mor. Og det var her 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 for det meste til det samme kvarter i byen, så sønnen kunne beholde sin skole.</p>
<p>Elvis gik i skole på Humes High School på North Manasas Street i Memphis.</p>
<p>Den 9. april 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 I Waltz Again With You".</p>
<p>3. juni 1953 var Elvis færdig med sin skolegang. Fra han forlod skolen og til sit gennembrud som 18- årig ernærede han sig som lastbilchauffør og arbejdsmand hos det lokale el-firma, The Crown Electric 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 i 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 i 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 i sine sidste leveår stadig mere og mere overvægtig. Han var ofte på slankekur, men tog hurtigt på i 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 i en tre måneders periode på grund af dårlig rådgivning og for at have givet Elvis for 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 badeværelsesgulv hjemme i Graceland. Trods ihærdige genoplivningsforsøg, såvel hjemme som på hospitalet,
blev han erklæret død på Baptist Memorial Hospital i 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 i Memphis. Der var imidlertid så stor opmærksomhed omkring hans gravsted, at 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 i parken ved Graceland i den del som kaldes The Meditation Gardens.</p>
<p>The Meditation Gardens blev åbnet for offentligheden den 27. november 1977. Graceland er i dag indrettet som Elvis-museum og besøges årligt af flere end 600.000 mennesker fra hele verden, i 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>这是我的 fiddle 的链接:http://jsfiddle.net/65pLy4sm/
最佳答案
你需要这样的东西吗http://jsfiddle.net/65pLy4sm/3/
将你的CSS改成这个
.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 - 使水平下拉菜单垂直，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26338911/