I have previously inquired about a similar issue, but this time I am using different code.
My goal is to develop a dropdown menu. Within the main list, there are specific elements that contain dropdown lists (News and Team). These items seem to be shifted to the right for some reason. What I aim for is to align the dropdown items with their parent elements.
Any assistance on this matter would be greatly appreciated.
Thank you
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>
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);
}