I am struggling with aligning the horizontal submenu correctly on my webpage. I have a header with a logo on the left and a menu on the right. When hovering over the main menu, the submenu appears but does not align properly and extends off the page. I tried adjusting the "header nav li:hover ul" CSS code by changing it to relative positioning, which helped prevent the submenu from going off the page, but caused another issue of the main menu moving from its original position. Can someone provide assistance with this CSS issue and help me fix the problem?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
a {text-decoration:none;color:#000;}
/* header */
header {width:980px;height:100px;margin:0 auto;margin-top:20px;background-color:Ff5f5f5;border-style:solid;}
header #logo {margin-left:10px;float:left;font-size:36px;}
/* menu */
header nav {margin:0;padding:0;float:right;margin-top:40px;display:block;}
header nav ul {list-style:none;}
header nav li {float:left;padding:0 8px;display:inline-block;}
header nav li a {display:inline-block;text-decoration:none;font-weight:700;}
header nav li a:hover {color:#09F;}
header nav li ul{display:none;}
/* submenu */
header nav li:hover ul{display:block;position:absolute;}
header nav li:hover ul li {display:inline-block;float:left}
header nav li:hover ul li a{font-weight:400;}
header nav li ul li a{width:auto;}
</style>
</head>
<body>
<header>
<div id="logo">
<p>LOGO</p>
</div> <!-- end logo -->
<nav>
<ul>
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">SubMenu 1</a></li>
<li><a href="#">SubMenu 2</a></li>
<li><a href="#">SubMenu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">SubMenu 1</a></li>
<li><a href="#">SubMenu 2</a></li>
<li><a href="#">SubMenu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">SubMenu 1</a></li>
<li><a href="#">SubMenu 2</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a>
<ul>
<li><a href="#">SubMenu 1</a></li>
<li><a href="#">SubMenu 2</a></li>
<li><a href="#">SubMenu 3</a></li>
<li><a href="#">SubMenu 4</a></li>
<li><a href="#">SubMenu 5</a></li>
</ul>
</li>
</ul> <!-- end main ul -->
</nav> <!-- end nav -->
</header>
</body>
</html>