如何将“固定”菜单导航栏与内容包装对齐？

Question

如何调整固定菜单栏的大小？```

这是我第一次在这里询问，我希望有人可以帮助我解决这个问题，请参阅我所附的图片。我想调整菜单栏的大小与包装器对齐，我将菜单栏固定为固定的。抱歉为了我的英语。

下面的代码

The HTML Code:

<ul id="menu"> <li><a href="https://myblabla.com/">Home</a></li> <li> <a href="#">Bla1</a> <ul> <li><a href="#">Sub Bla1</a></li> <li><a href="#">Sub Bla2</a></li> <li><a href="#">Sub Bla3</a></li> <li><a href="#">Sub Bla4</a></li> </ul> </li> <li><a href="#">MyBlaBla</a></li> <li><a href="">About Bla</a></li> <li><a href="">My Bla Again</a></li> </ul>


CSS:

#menu {
    width: 100%;
    margin: 80px 0 0 auto;
    padding: 10px 0 0 0;
    position: fixed;
    z-index: 9;
    top: 0;
    list-style: none;
    background: #111;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #111), color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#a9a9a996, #ffffff00);
    -moz-border-radius: 50px;
    border-radius: 50px;
    -moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
}

Answer 1

等待锻炼......

#menu {
    width: 80%;
    margin: 20px;
    position: fixed;
    z-index: 9;
    top: 0;
    list-style: none;
    background: linear-gradient(#a9a9a996, #ffffff00);
    border-radius: 50px;
    box-shadow: 0 2px 1px #9c9c9c;
    display:flex;
    justify-content: space-between;
}
#menu li {margin:5px;}
#menu li ul {display:none;}
#menu li:hover ul {display:block;}

<ul id="menu"> 
  <li><a href="https://myblabla.com/">Home</a></li> 
  <li> <a href="#">Bla1</a> 
    <ul> 
      <li><a href="#">Sub Bla1</a></li> 
      <li><a href="#">Sub Bla2</a></li> 
      <li><a href="#">Sub Bla3</a></li> 
      <li><a href="#">Sub Bla4</a></li> 
     </ul> 
   </li> 
   <li><a href="#">MyBlaBla</a></li> 
   <li><a href="">About Bla</a></li> 
   <li><a href="">My Bla Again</a></li> 
  </ul>