テキトーに
CSS
1<style>
2body{padding:0px;margin:0px;}
3#menu{list-style:none;display:flex;left:0px;background-Color:yellow;padding:0px;width:100%;position:relative;}
4#menu>li{width:20%;text-align:center;}
5#menu>li:nth-child(odd){background-Color:gray}
6#menu>li:hover{text-decoration:underline;}
7#menu>li:hover>ul>li{display:inline-block;}
8#menu ul{list-style:none;display:flex;position:absolute;left:0px;width:100%;background-Color:lime;padding:0px;}
9#menu ul>li:nth-child(odd){background-Color:aqua}
10#menu ul>li{width:20%;text-align:center;display:none;}
11</style>
12<body>
13<ul id="menu">
14 <li>1
15 <ul>
16 <li>1-1</li>
17 <li>1-2</li>
18 <li>1-3</li>
19 <li>1-4</li>
20 <li>1-5</li>
21 </ul>
22 </li>
23 <li>2
24 <ul>
25 <li>2-1</li>
26 <li>2-2</li>
27 <li>2-3</li>
28 </ul>
29 </li>
30 <li>3</li>
31 <li>4
32 <ul>
33 <li>4-1</li>
34 </ul>
35 </li>
36 <li>5</li>
37 <li>6</li>
38</ul>
39</body>