0
我以前曾問過這樣的問題，但沒有收到答案。這很重要，因爲它是我網站的組成部分。CSS ul下拉列表問題
我想創建一個下拉菜單。 「團隊」和「新聞」鏈接（當你懸停在他們身上）是問題所在。我想讓他們下面的鏈接與他們的父母一致。
我試着用填充來解決這個問題，但沒有得到任何幫助。
請幫忙。
http://codepen.io/DocRow10/pen/hjIkq
<body>
<div id="container">
<div id="banner" class="clearfix">
<img id="crest" src="images/cecc-logo.png" />
<h1>Test Website</h1>
</div>
<nav class="clearfix">
<ul class="clearfix">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a>
<ul>
<li><a href="#">Social Events</a></li>
</ul>
</li>
<li><a href="#">Team</a>
<ul>
<li><a href="#">Players</a></li>
<li><a href="#">Fixtures/Results</a></li>
<li><a href="#">Statistics</a></li>
</ul>
</li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
<main>
</main>
<footer>
</footer>
</div>
</body>
</html>
body {
background-color: rgb(200, 220, 255);
/* #455868 */
}
#container {
height: 1000px;
margin-left: auto;
margin-right: auto;
}
#banner {
width: 100%;
text-align: center;
}
#crest {
height: 150px;
width: 180px;
display: inline-block;
}
#banner h1 {
display: inline-block;
}
/* Bat Colour rgb(38, 124, 196); */
@media only screen and (min-width : 480px) {
#banner h1 {
font-size: 30px;
display: inline-block;
}
}
@media only screen and (min-width : 768px) {
#banner h1 {
font-size: 36px;
display: inline-block;
}
}
@media only screen and (min-width : 980px) {
#banner h1 {
font-size: 47px;
display: inline-block;
}
}
nav {
height: 40px;
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: rgb(238, 0, 0);
font-size: 13pt;
font-family: neris;
border-bottom: 2px solid #283744;
}
nav > ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav > ul > li {
display: inline;
float: left;
}
nav ul a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul ul li {
display: block;
}
main {
width: 90%;
height: 200px;
margin-right: auto;
margin-left: auto;
background-color: rgb(38, 124, 196);
}
footer {
width: 90%;
height: 50px;
margin-right: auto;
margin-left: auto;
background-color: rgb(0, 0, 0);
}
標記了自己的答案，因爲（間接）Ÿ歐幫我一分錢並且所述下降，爲什麼我作爲有這個問題。檢查我的答案，你會看到我的意思：http://stackoverflow.com/questions/35382139/dropdown-list-alignment-issue-html-css謝謝！ – Chosen1