I am in the process of creating a submenu that should look like this:
HTML:
<ul class="mainMenu clearfix">
<li><a href="#">Eurodan huset</a></li>
<li><a href="#">Hustyper</a></li>
<li><a href="#">Galleri</a></li>
<li><a href="#">10 byggesten</a></li>
<li><a href="#">Huse til salg</a></li>
<li><a href="#">Udstillinger</a>
<ul class="underMenu">
<li><a href="#">Salgskontorer</a></li>
<li><a href="#">Velkommen</a></li>
<li><a href="#">Historie</a></li>
<li><a href="#">Fremtidens boliger</a></li>
</ul>
</li>
<li><a href="#">Grunde</a></li>
<li><a href="#">Om os</a></li>
<li><a href="#">Katalog</a></li>
</ul>
Where .mainMenu represents the main menu and .underMenu contains subpages from the main menu. To ensure the under menu functions correctly, I need to set a fixed width for it (as it has position absolute and the parent <li> element has position:relative, I achieve this by using jQuery.
jQuery/JavaScript:
$('.underMenu').each(function() {
var t = $(this),
tW = 0;
$('li', t).each(function() {
tW += $(this).outerWidth(true);
});
t.css('width', tW);
});
Despite my efforts, the appearance of my under menu does not match my expectations. The current issue is that it appears as follows:
To address this problem, I find that I need to increase the width of .underMenu by an additional 40px; however, I am puzzled as to why this adjustment is necessary given my use of $(this).outerWidth(true);.
Based on my understanding, everything should be working smoothly, but it seems there is a discrepancy between expectation and reality.
CSS:
.mainMenu,
.underMenu {
clear:both;
line-height:29px;
background:url(../images/transPxBlack.png) repeat left top;
-moz-border-radius:16px;
-webkit-border-radius: 16px;
border-radius:16px;
padding:0 20px;
}
.mainMenu > li {
margin-left:16px;
position:relative;
font-size:13px;
}
.mainMenu > li:first-child {margin-left:0;}
.underMenu {position:absolute;}
.underMenu li {
font-size:11px;
margin-left:18px;
}
.underMenu li:first-child {margin-left:0;}