Drop down menu tilted to the side?

I'm a little new to HTML as my classes has recently started and etc. In our task we have to hand in a website that has different characteristics, one of them being a drop down menu.

I managed to almost get it all working, but when I tried to hover my mouse over one of the navigation menu tags, the drop down menu is a little bit to the left like it would be as a listing object?

Here is how it shows up

This is how it looks when I hover over About

I have no idea what I'm doing wrong! I tried to do some research where I ended up centering my navigation menu, but that was all I managed to do! What do I have to do to make it be aligned with the "About" tag?

p {
	font-size: 44px;
	color: white;
	font-family: verdana;
	background-color: #333;
	text-align: center;
}
p2 {
 font-size: 12px;
 color: white;
 font-family: verdana;
}


body {
	background-image: url(background.jpg);
}


div {
	margin-left: 400px;
	margin-right: 400px;
	margin-top: 30px;
	border: solid white 3px;
	background-color: #333;
}


div2 {
	margin-left: auto;
  margin-right: auto;
  width: 6em;
}

#nav {
text-align:center;
}


#nav ul {
display:inline-block;
}




#nav a {
float:left;
text-decoration:none;
padding:0 30px;
}


ul {
	background-color: #333;
	font-family: verdana;


}


ul li {

	display: inline;
	background-color: #333;
	font-size: 24px;
	height: 47px;
	width: 200px;
	line-height: 47px;
	text-align: center;
	float: left;
	list-style: none;
}


ul li a {
	color: white;
	text-decoration: none;
	display: block;
}


ul li a:hover {
	background-color: white;
}


ul li a:active{
	background-color: #333;
	color: #333
}


ul li ul li {
	display: none;
}


ul li:hover  ul li{
	display: block;
}


.active {
	background-color: white;
}
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
			<link rel="stylesheet" href="stylesheet.css">
		<title>Sleepless hub</title>
	</head>

<body>

	<div> <!-- Denne er med for å kun skape en fin designer strek ;) -->
	</div>

	<div>
			<p>There is nothing like a good nut </p>
	</div>

	<div> <!-- Samme her. -->
	</div>
<div id="nav">
	<ul>
		<li> <a href="#">Home</a></li>
		<li> <a href="#">About</a>
			<ul>
				<li> <a href="#">Wikipedia</li>
			</ul>
				</li>
		<li> <a href="#">Projects</a></li>
		<li> <a href="#">Contact me</a></li>
		<li> <a href="#">Fun Room</a></li>
</div>
<div>
	<p>Okay</p>
	</div>
</body>

</html>

htmlcssdrop-down-menu

Answers

answered 2 years ago M-- #1

Issue is because of padding you have for the child ul and anchor tag. If you remove those it will align properly. Try to add the classes to the child elements, as this is not the proper way to write the css.

p {
	font-size: 44px;
	color: white;
	font-family: verdana;
	background-color: #333;
	text-align: center;
}
p2 {
 font-size: 12px;
 color: white;
 font-family: verdana;
}


body {
	background-image: url(background.jpg);
}


div {
	margin-left: 400px;
	margin-right: 400px;
	margin-top: 30px;
	border: solid white 3px;
	background-color: #333;
}


div2 {
	margin-left: auto;
  margin-right: auto;
  width: 6em;
}

#nav {
text-align:center;
}


#nav ul {
display:inline-block;
}




#nav a {
float:left;
text-decoration:none;
padding:0 30px;
}


ul {
	background-color: #333;
	font-family: verdana;


}


ul li {

	display: inline;
	background-color: #333;
	font-size: 24px;
	height: 47px;
	width: 200px;
	line-height: 47px;
	text-align: center;
	float: left;
	list-style: none;
}


ul li a {
	color: white;
	text-decoration: none;
	display: block;
}


ul li a:hover {
	border: 1px solid red;
}


ul li a:active{
	background-color: #333;
	color: #333
}


ul li ul li {
	display: none;
}

ul li ul{
  padding-left: 0;
}


ul li:hover  ul li{
	display: block;
}


.active {
	background-color: white;
}
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
			<link rel="stylesheet" href="stylesheet.css">
		<title>Sleepless hub</title>
	</head>

<body>

	<div> <!-- Denne er med for å kun skape en fin designer strek ;) -->
	</div>

	<div>
			<p>There is nothing like a good nut </p>
	</div>

	<div> <!-- Samme her. -->
	</div>
<div id="nav">
	<ul>
		<li> <a href="#">Home</a></li>
		<li> <a href="#">About</a>
			<ul>
				<li> <a href="#">Wikipedia</li>
			</ul>
				</li>
		<li> <a href="#">Projects</a></li>
		<li> <a href="#">Contact me</a></li>
		<li> <a href="#">Fun Room</a></li>
</div>
<div>
	<p>Okay</p>
	</div>
</body>

</html>

comments powered by Disqus