Can someone help me figure out why my register and login options are overlapping? I'm pretty new to this so it might be a simple fix. Also, I'm trying to get the dropdown menu to appear right below the login text, but I'm facing some issues with that as well. I want it to function similar to the help box on the stackoverflow site. Here's the jsfiddle link for reference: http://jsfiddle.net/Karmatix/v2z5bnvh/
Any explanation on how to solve this would be really appreciated. I'd like to understand the mistake and the solution to avoid it in the future. Thank you in advance!
Here's the HTML code (includes some jQuery):
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('li').hover(function(){
$(this).find('ul>li').fadeToggle(400);
});
});
</script>
<link rel="stylesheet" type="text/css" href="text.css"
</head>
<body>
<nav>
<ul>
<li>Login
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>Register</li>
</ul>
</nav>
</body>
</html>
And here's the CSS code:
body {
padding: 0;
margin: 0;
}
nav ul{
margin: 0;
padding: 0;
list-style:none;
}
nav ul li{
float: right;
width: 100%;
height: 30px;
line-height: 30px;
text-align: right;
background-color: #000;
color: #fdfdfd;
display: inline;
}
nav ul li a{
text-decoration: none;
color: #fdfdfd;
}
nav ul li li {
display: none;
color: #fdfdfd;
}