I have found this question, and this question. I tried to apply whitespace: nowrap; to my code, but had no luck. The second question I simply cannot discern what is relevant and what isn't.
I have this HTML:
<ul id="main-menu-list">
<li><a class="box-link" href="#/home">Home</a></li>
<li><a class="box-link" id="shop-link" href="#/shop">Shop</a>
<ul>
<li>
<a href="">Test</a>
</li>
<li>
<a href="">Test 2</a>
</li>
</ul>
</li>
<li ng-repeat="linkData in coreCtrl.mainMenuData"><a class="box-link" href="#/{{ linkData.linkUrl }}">{{ linkData.value }}</a></li>
</ul>
In that last bit I'm using Angular to create some links from JSON which don't have sub-menus.
I also have this CSS:
#main-menu-list, #main-menu-list ul {
padding: 0;
margin: 0;
list-style: none;
}
#main-menu-list > li {
float: left;
margin-right: 20px;
line-height: 65px;
}
#main-menu-list > li > a {
font-weight: bold;
font-size: 20px;
color: #6e6e6e;
border: 2px solid #6e6e6e;
padding-top: 5px;
padding-bottom: 5px;
}
#main-menu-list > li > a:hover {
border: 2px solid #a1b489;
color: #a1b489;
text-decoration: none;
}
#main-menu-list > li > ul > li {
background-color: #fff;
position: relative;
z-index: 5;
margin: 0;
}
#main-menu ul a {
white-space: nowrap;
}
The end goal here is to create a sub-menu for the "Shop" link which contains the shop's categories. However, the drop-down needs to be wider that the parent list item. I can increase the width of the sub-menu, but at the cost of increasing the width of the parent <li> element, which throws off the layout of the main menu.
Is there any way to make the sub-menu larger than the parent element without sacrificing the parent's layout?
i would make the parent li relative positioned and the sub-nav absolute positioned, this should sort out your problem.
#main-menu-list li {position: relative;}
#main-menu-list li > ul {position: absolute; top: 100%; left: 0;}