我有一个菜单，希望外侧子项（Mercury和Honda）跨越子菜单面板的宽度（每个2列或col-md-6）。其他项目跨越4列有效。因此，“水星”按钮和“本田”按钮在整个空间中将是2列。
这是我的代码：
<div class="menu-container">
<div class="menu">
<ul>
<li><a href="/index.php/contact">Contact</a></li>
<li><a href="/index.php/service">Service &
Maintenance</a></li>
<li><a href="#">Outboards</a>
<ul>
<li class="col-md-6"><a class="btn btn-
warning" style="color: #ccc;" href="/index.php/mercury-motors"> .
<h5>Mercury</h5></a>
<ul>
<li style="text-align: center;"><a href="/index.php/mercury-motors"><h4
style="margin: 0;">Two Stroke</h4></a><br>
<a href="/index.php/mercury-motors"><h4 style="margin: 0;">Four
Stroke</h4></a><br>
<a href="/index.php/mercury-motors"><h4 style="margin: 0;">Verado</h4> .
</a>
</li>
</ul>
</li>
<li class="col-md-6"><a class="btn btn-danger" style="color: #fff;"
href="/index.php/honda-motors"><h5>Honda</h5></a>
<ul>
<li style="text-align: center;"><a
href="/index.php/honda-motors"><h4 style="margin: 0;">Portable</h4></a>
<br><h4 style="margin: 0;"><a
href="/index.php/honda-motors">Mid-Range</a></h4>
<br><h4 style="margin: 0;"><a
href="/index.php/honda-motors">High Performance</a></h4></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Boats</a>
<ul>
<li><a class="btn btn-primary" style="color:
#fff;" href="/index.php/7-metre-boats"><h5>7 Metre</h5></a>
<ul>
<li style="text-align: center;"><a
href="/index.php/7-metre-boats"><h4 style="margin: 0;">700</h4></a>
<br><a href="/index.php/7-metre-
boats#700ht"><h4 style="margin: 0;">700HT</h4></a></li>
</ul>
</li>
<li><a class="btn btn-primary" style="color:
#fff;" href="/index.php/6-metre-boats"><h5>6 Metre</h5></a>
<ul>
<li style="text-align: center;"><a
href="/index.php/6-metre-boats"><h4>620</h4></a>
<br><a href="/index.php/6-metre-
boats#620ht"><h4 style="margin: 0;">620HT</h4></a>
<br><a href="/index.php/6-metre-
boats#670"><h4 style="margin: 0;">670</h4></a>
<br><a href="/index.php/6-metre-
boats#670ht"><h4 style="margin: 0;">670HT</h4></a></li>
</ul>
</li>
<li><a class="btn btn-primary" style="color:
#fff;" href="/index.php/5-metre-boats"><h5>5 Metre</h5></a>
<ul>
<li style="text-align: center;"><a
href="/index.php/5-metre-boats"><h4>550</h4></a></li>
</ul>
</li>
<li><a class="btn btn-primary" style="color:
#fff;" href="/index.php/smartwave-boats"><h5>Smartwave</h5></a>
<ul>
<li style="text-align: center;"><a
href="/index.php/smartwave-boats"><h4>Skippa</h4></a>
<br><a
href="/index.php/smartwave-boats#2400"><h4>Smartwave 2400</h4></a>
<br><a
href="/index.php/smartwave-boats#3500"><h4>Smartwave 3500</h4></a>
<br><a
href="/index.php/smartwave-boats#4200"><h4>Smartwave 4200</h4></a>
<br><a
href="/index.php/smartwave-boats#4800"><h4>Smartwave 4800</h4></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="/index.php">Home</a></li>
</ul>
</div>
</div>
我确实有一个javascript组件，但这只是为了使响应式下拉菜单在移动设备上工作。
谢谢 罗布