css - サブメニューをメニュー CSS/HTML5 と同じ幅にする方法

Question

私は垂直ナビゲーションメニューを作ろうとしています.私はコーディングが初めてで、少し迷っています. メニューは、サブメニューを実際のメニューと同じ幅にしたかった以外は、希望どおりに機能し、見栄えがします。助けてください! また、メニューを中央に配置することもできました。テキストの配置を試みましたが、役に立ちませんでした

ここに私のHTMLがあります

<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>About Us</span></a></li>
<li><a href='#'><span>Vehicles</span></a></li>
<li><a href='#'><span>Prices</span></a></li>
<li class='has-sub last'><a href='#'><span>Contact Us</span></a>
  <ul>
     <li><a href='#'><span>Book A Lesson</span></a></li>
     <li class='last'><a href='#'><span>Send Us A Message</span></a></li>
  </ul>
</li>
</ul>
</div>

とCSS

     #cssmenu {
     border: none;
     border: 0px;
     margin: 0px;
     padding: 0px;
     font: 80% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande',     Verdana, Helvetica, sans-serif;
     font-size: 16px;
     font-weight: bold;
     width: 100%;
     text-align: center;
    }
    #cssmenu ul {
     text-align: center;
     background: #000000;
     height: 40px;
     list-style: none;
     margin: 0;
     padding: 0;
     -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
     border-radius: 15px;
     -webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1);
     -moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1);
     box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1);
    }
    #cssmenu li {
     text-align: center;
     float: left;
     padding: 0px 0px 0px 15px;
     width: 18%;
    }
    #cssmenu li a {
     color: #ffffff;
     display: block;
     font-weight: normal;
     line-height: 50px;
     margin: 0px;
     padding: 0px 25px;
     text-align: center;
     text-decoration: none;
    }
    #cssmenu li a:hover {
     background: #f6dc30;
     color: #000000;
     text-decoration: none;
     -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
     box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
    }
    #cssmenu ul li:hover a {
     background: #f6dc30;
     color: #000000;
     text-decoration: none;
    }
    #cssmenu li ul {
     display: none;
     height: auto;
     padding: 0px;
     margin: 0px;
     border: 0px;
     position: absolute;
     z-index: 200;
    }
    #cssmenu li:hover ul {
     display: block;
    }


     #cssmenu li li {
         display: block;
         float: none;
         margin: 0px;
         padding: 0px;
         width: 170px;
         background: #000000;
         }
    #cssmenu li:hover li a {
     background: none;
     background: #f6dc30;
    }
    #cssmenu li ul a {
     display: block;
     height: 50px;
     font-size: 12px;
     font-style: normal;
     margin: 0px;
     padding: 0px 10px 0px 15px;
     text-align: left;
   }
    #cssmenu li ul a:hover,
    #cssmenu li ul li:hover a {
     background: #f6dc30;
     border: 0px;
     color: #000000;
     text-decoration: none;
   }