Change layout of sub-menu

I have a nav menu I created that has a bunch of sub menu items. I want to lay out the sub menu items in a table rather than the default list that they are put in because the list is so long it goes pretty far down the page. I can’t figure out how to do this exactly. I was able to change the parent menu items to <td> elements but I can’t figure out how to edit the tags surrounding the sub menu items or how I can separate them into rows. Would I have to create a custom walker function. Below is what I would like the final html of the menu to resemble.

<ul>
	<li>
    	<a href="#">Parent item</a> <!--Hover over parent item-->

             <table> <!--Table full of sub items appears when parent item is hovered-->
             	<tr>
                	<td>
                    	Sub-item 1
                    </td>
                    <td>
                    	Sub-item 2
                    </td>
                    <td>
                    	Sub-item 3
                    </td>
                </tr>
                <tr>
                	<td>
                    	Sub-item 4
                    </td>
                    <td>
                    	Sub-item 5
                    </td>
                    <td>
                    	Sub-item 6
                    </td>
                </tr>
                <tr>
                	<td>
                    	Sub-item 7
                    </td>
                    <td>
                    	Sub-item 8
                    </td>
                    <td>
                    	Sub-item 9
                    </td>
                </tr>
             </table>
    </li>
</ul>

My understanding is the current HTML output looks like this:

<ul>

<li>
    	<a href="#">Parent item</a> <!--Hover over parent item-->

<ul> <!--appeares when parent item is hovered over-->

<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
<li>Sub-item 4</li>
<li>Sub-item 5</li>
<li>Sub-item 6</li>
<li>Sub-item 7</li>
<li>Sub-item 8</li>
<li>Sub-item 9</li>
</ul>
</li>
</ul>