ソース　
<ul>
   <li><a href=”/”>ホーム</a></li>
   <li><a href=”info.html”>新着情報</a></li>
   <li><a href=”prod.html”>製品案内</a></li>
   <li><a href=”comp.html”>会社概要</a></li>
   <li><a href=”supp.html”>サポート</a></li>
   <li><a href=”cont.html”>お問い合わせ</a></li>
</ul>

CSS
ul {
margin: 0px; /* ul内部の左端余白(外側)をゼロに */
padding: 0px; /* ul内部の左端余白(内側)をゼロに */
}
ul li {
list-style-type: none; /* 先頭記号を消す */
float: left; /* リスト項目を横方向に並べる */
margin: 0.3em 0.1em; /* 各項目周囲の余白 */
border: 1px gray solid; /* 各メニュー項目の枠線 */
padding: 0px; /* 枠線と内容の距離をゼロに */
}
/* メニュー項目のリンクを装飾 */
ul li a {
text-decoration: none; /* 下線を消す */
display: block; /* ブロックレベルに */
padding: 0.3em; /* 内部の余白量 */
}
ul li a:hover {
background-color: blue; /* 背景色 */
color: white; /* 文字色 */
}
p.aftermenu {
clear: left;
}

参考　https://www.nishishi.com/css/list-simplemenubar.html