I've created a simple submenu using CSS, structured as an unordered list. It appears on hover by changing the display property to "block".
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li>
<a href="#">item with submenu</a>
<ul class="submenu">
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
</ul>
Here is the corresponding CSS:
.submenu {
display: none;
position: absolute;
}
ul li:hover>ul.submenu {
display: block;
}
You can view an example here: http://jsfiddle.net/Y2vgj/
And also here:
(Both links lead to the same example)
My goal now is to expand the submenu in the opposite direction if the page size is too small to display it completely. Can anyone assist me with this?