How to create css menu that goes vertically

HTML & CSS
21

Well it’s probably easy for me but may not be so easy for you :slight_smile:

What you’d need to do is add an extra class to the body tag on the pages where you want the menu displayed differently. If all pages have a normal dropdown then just add the special class when there is a drop up.

e.g.


<body class="dropup">

Then you would modify the existing rules where either top or bottom has been used.

e.g.


ul#nav li:hover ul, ul#nav li.over ul {/* style hover nav*/
	border:1px solid #555;
	font-weight:bold;
	z-index:99;
	[B]top:40px;/* below current item/[/B]
}
[B].dropup[/B] ul#nav li:hover ul,[B].dropup[/B] ul#nav li.over ul {
 top:auto;/* over-ride top position*/
[B] bottom:40px;/* on top of current item*/[/B]
}

#nav li:hover li:hover ul, #nav li.over li.over ul {
	margin-left:0;
	padding:0;
	left:220px;
	[B]top:0;/* show nested menu*/[/B]
}
[B].dropup [/B]#nav li:hover li:hover ul,[B].dropup [/B]#nav li.over li.over ul {
[B] top:auto;/* over-ride top position*/
 bottom:-20px;/* show nested menu*/
}[/B]

The above is just an idea of how to go about this and may (or may not) need extra tweaks as it is untested but shows the general idea.

22

Damn! You’re good!!!

23

Last cleanup “things” that I have been struggling with and you obviously code in your sleep:

  1. How do I vertically center the main Nav row? (gawd knows I’ve tried everything)
  2. How do I increase the height of each sub menu?
  3. How do I change the 3nd level menu hover to look like the 2nd level hover (the background is the same for all and hover isn’t different?

THANK YOU, THANK YOU , THANK YOU.

You are a gentleman and brilliant!

24

I’m not sure what you want vertically centred exactly? In what way should it be vertically centred and to what reference is it vertically centre?

  1. How do I increase the height of each sub menu?

The easiest way is just to increase the top padding:


ul#nav li li a{padding:5px 10px}
  1. How do I change the 3nd level menu hover to look like the 2nd level hover (the background is the same for all and hover isn’t different?

Just add the background colour into this rule here.


ul#nav li li a{padding:5px 10px}
/* set dropdown to default */
#nav li:hover li a, #nav li.over li a, #nav li:hover li:hover li a, #nav li.over li.over li a, #nav li:hover li:hover li:hover li a, #nav li.over li.over li.over li a {
	color:#FDB813;
[B]	background:#051586[/B]
}
25

  1. I tried this ul#nav li li a{padding:5px} but it separates the distance between the menu items–I wanted to only “spread” the items and give them more space on the top and the bottom…I think the padding is working on the outside and I need it around the text

  2. If you look at the menu you’ll notice that each item THE TEAM, ENTERTAINMENT, etc. is all top-aligned; can it be middle-aligned?

  3. Perfect.

26

I’m not sure I follow as the padding is the space on top and below the text and will work exactly like I assume you wanted. Margin is the space outside the element but you can’t use margins on a drop down as that will give you gaps between the items and the menu will drop out.

padding:5px 10px; works for me with no problems and I can’t really think what other effect you would want :slight_smile:

  1. If you look at the menu you’ll notice that each item THE TEAM, ENTERTAINMENT, etc. is all top-aligned; can it be middle-aligned?

This is a bit awkward and perhaps the easiest solution is to add a class to that one item that has two lines.

e.g.


<l[B]i class="double[/B]"><a href="#">ALL OUR KIDS <br>
	FOUNDATION</a>
	<ul>

Then amend these rules as follows:



ul#nav li a{
	display: block;
	font-weight: bolder;
	height: 36px;
	[B]padding:0 12px;
	line-height:36px[/B]
}
[B]ul#nav li.double a {
	line-height:16px;
	padding:4px 12px
}

ul#nav li.double li a,ul#nav li li a {
	line-height:16px;
	padding:4px 5px;[/B]
}