This website was created as a project
<!DOCTYPE html>
<html>
<head>
<title>
Anivies
</title>
<link rel="shortcut icon" href="non.jpg" type="image/png">
<style>
There seems to be an issue with the CSS. Every time I hover over the "anime" button, it causes the "movie" button to move to the right. This was not covered in our lessons, but I've tried to figure it out without success.
body{
margin: 0px;
background-color: #cecece;
}
.header{
width: 100%;
height: 68px;
background-color: #000000;
position: fixed;
top: 0px;
padding-top: 10px;
padding-left: 7px;
}
.headcon{
width: 100%;
height: 73px;
background-color:#cecece ;
position: fixed;
height: 100%;
width: 100%;
}
.body{
margin:0px;
height: 100%;
width: 100%;
position:fixed;
top:50px;
float: left;
clear: both;
overflow: hidden;
}
.footer{
width: 100%;
height: 50px;
background-color: #000000;
position: fixed;
bottom: 0px;
}
.button{
border: 0px;
height: 55px;
width: 100px;
background-color: white;
position: relative;
}
.button:hover{
opacity: 0.5;
background-color:#f43f3f;
box-shadow: 4px 5px 7px;
transition:all 0.3s ease 0s;
cursor:pointer;
}
p{
font-family: batmanforeveralternate;
font-size: 17px;
}
.butcon{
float: left;
overflow: hidden;
margin-left: 10px;
position: relative;
}
#Animelist, #Movielist{
display: none;
background-color: gray;
height: 100px;
width: 200px;
}
}
Jquery
</style>
<script src= "JQuery/jquery-1.12.0.js"></script>
<script>
//FirstButton
$(document).ready(function(){
$("#but1").hover(function(){
$("#Animelist").stop().slideToggle(300);
});
});
//SecondButton
$(document).ready(function(){
$("#but2").hover(function(){
$("#Movielist").stop().slideToggle(300);
});
});
</script>
</head>
<body>
<div class="headcon">
<div class="header">
<div class="butcon">
<button class="button">
<div id="but1"><p>Anime</p></div>
</button>
<div id="Animelist">
<a href="#">One</a>
</div>
</div>
<div class="butcon">
<button class="button">
<div id="but2"><p>Movies</p></div>
</button>
<div id="Movielist">
<a href="#">One</a>
</div>
</div>
</div>
<div class="body">
</div>
<div class="footer">
</div>
</div>
</div>
</body>
</html>