ADxMenu

Vertical menu examples

Apr 19, 2004 by Aleksandar Vacić 1 minute read

I received several e-mail requests to create vertical examples of the menus. During the Easter holidays I did them, but had no time to write event the shortest entry afterwards. (Is it just me or the amount of work that piles up while being on any holiday is so big that quickly burns any freshness from it?)

So, not to delay this anymore, I have created vertical examples.

Changes are few. What I did was to move the basic CSS rules used for submenus to the main menu as well, and re-style the main menu so that it sits comfortably at the left side.

#menu li { margin: 0; padding: 0; border: 0; width: 100%; display: block; float: left; position: static; } html>body #menu li { float: none; position: relative; }

<strong>#menu li:hover</strong> {
	position: relative;
}

<strong>#menu li ul</strong> {
	top: 0;
	left: 100%;
}

#menu {
	...<strong>
	width: 120px;
	height: auto;
</strong>
}

Stronged parts are the essential changes. Rest of the changes in the actual menu’s CSS is just designs. You should make sure, as shown above, that height is not restricted and that width is restricted, because the LIs have 100% width.