Recently, I have developed a straightforward menu structure as shown below:
<ul id="main-menu" class="container">
<li><a href="#">About Us</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Villas & Yachts</a></li>
<li><a href="#">Islands</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Get In Touch</a></li>
</ul>
This simple menu includes the utilization of the :after pseudo-element for creating dots between each item. However, I am now faced with the need to include sub-menus that are nested lists.
The issue arises when attempting to introduce line breaks in the menu setup like this:
<ul id="main-menu" class="container">
<li><a href="#">About Us</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Villas & Yachts</a>
<!-- LINE BREAK -->
</li>
<li><a href="#">Islands</a>
<!-- LINE BREAK -->
</li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Get In Touch</a></li>
</ul>
In browsers such as Safari and Chrome (but not Firefox), this approach results in an unexpected outcome...
Upon examination, it appears that Webkit may be interpreting the whitespace as 'pre'. The CSS styling for the :after element is defined as follows:
ul#main-menu li:after
{
content: "\00b7";
width: 61px;
float: right;
text-align: center;
border: rgba(225,225,225,0.25) 1px solid;
}
I have experimented with setting white-space: normal/nowrap on various elements but to no avail. Is there a specific error in my implementation or could this be a compatibility issue with Webkit/Firefox?
UPDATE
To provide further clarity, I have prepared a demonstration located at http://jsfiddle.net/zmVbH/