Is it possible to move the menu inside the border on this webpage? I am new to web design and was thinking of using position:absolute for the links. Should I also move the submenu along with it? Any suggestions on how to achieve this? Thank you! The goal is to relocate the menu to the bottom right corner within the border.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="videos.css" />
<link rel="stylesheet" type="text/css" href="vines.css" />
<title>Puppy Power</title>
</head>
<body>
<div id="page">
<header></header>
<div id="dog logo">
</div>
<ul id="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="videos.html">Videos</a>
<ul class="sub">
<li><a href="vines.html">Vines</a></li>
<li><a href="#">Pugs</a></li>
<li><a href="#">Failing Dogs</a></li>
<li><a href="#">Crazy Dogs</a></li>
<li><a href="#">Funny Dogs</a></li>
</ul>
</li>
<li><a href="#">Photographs</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="hero"><h1><b>HERO</b></h1></div>
<div id="topvideo"><h1><b>TOP VIDEO</b></h1></div>
<div id="topphoto"><h1><b>TOP PHOTO</b></h1></div>
<div id="toparticles"><h1><b>TOP ARTICLE</b></h1></div>
<div id="content"><h1><b>CONTENT</b></h1></div>
<div id="footer"><h1><b>FOOTER</b></h1></div>
</body>
</html>
#page {
max-width: 850px;
min-width: 840px;
min-height: 1550px;
max-height: 1600px;
}
* {
margin: 0px;
padding: 0px;
}
#navigation {
border: 1px solid #89cFF0;
width: 813px;
height: 187px;
margin-left: 5px;
}
ul #navigation, .sub {
list-style-type: none;
}
ul #navigation li {
border: 1px solid #89cFF0;
width: 125px;
text-align: center;
position: relative;
float: left;
list-style-type: none;
}
ul #navigation a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
border: 1px solid #89cFF0;
}
ul #navigation li:hover > a {
background-color: #89cFF0;
}
#hero {
width: 813px;
height: 408px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
margin: 5px 0px 0px 0px;
text-align: center;
color: red;
}
#topvideo {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#topphoto {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#toparticles {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#content {
width: 813px;
height: 310px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
margin: 0px 0px 0px 0px;
text-align: center;
}
#footer {
width: 813px;
height: 100px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
margin: 5px 0px 0px 0px;
text-align: center;
}