• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1138
  • Last Modified:

CSS Horizontal Nav Menu with multi-level nested lists moves body contents when displayed

I am a beginner when it comes to web page design.  I have been toying around with redesigning our intranet page, as it has been maintained using Microsoft Word since before I worked with this employer, and I felt it could use a refresh.  This is not an assigned task, it is mainly for hobby.

I have been reviewing documentation on web design using CSS and feel I have a decent handle on it, but it is nowhere near being an intermediate or pro level.

I am trying to create a horizontal nav menu that has a vertical drop-down for the first sub menu, then each menu from that first sub menu is a vertical drop-down off to the side of its parent listing.  Basically in the sample below when I hover on "Menu Item 3" the "Sub Menu" items appear.  When I hover on each "Sub Menu" item, I see their respective "Child" menu items.
It is a 3-level unordered list I have styled with CSS.

| Menu Item 1 |   | Menu Item 2 |   | Menu Item 3 |
                                                   | Sub Menu Item 1 |   | Child of Item 1 |
                                                   | Sub Menu Item 2 |   | Child of Item 1 |
                                                                                    | Child of Item 1 |

My problem is that when I hover over | Menu Item 3 | I see the "Sub Menu"items  just fine, however they move my <body> data around and messing it up.  The "Child" menu items appear over the top of the <body> items, which is what I want.  I want the "Sub Menu" items to appear over the <body> data as well, but I am not sure what is causing the problem.  I currently have the list data that comprises the nav menu in the <head> section of the page.  I then display it on each page of the site using a .dwt file.

You can see what I have so far by going to intranet.thekitcheninc.org.
I know I must be messing up something simple but it is escaping me.  I would appreciate any help and pointers that you could offer.
0
devryguy81
Asked:
devryguy81
  • 5
  • 4
  • 2
  • +2
3 Solutions
 
Mike_CarrollCommented:
Use a z-index to bring it forward
0
 
MageWindCommented:
Your nav bar should not be in the head, but in the body.
The menu.css is hard to read since it's all on four lines, so I didn't read it.  I think you may need to make the attached changes.  The key is position:relative.
Keep us updated =D

div#navmenu li, div#navmenu li ul
{
position:relative;
}

div#navmenu > ul > li > ul
{
top:100%;
}

div#navmenu > ul > li > ul > li > ul
{
left:100%;
}

Open in new window

0
 
siddagrlCommented:
z-index works along with position attribute only.

To fix your problem:

1. Add z-index in both the 1st nested list as follows.
    #navmenu ul li ul li{
      display: none;
        z-index: 1;
    }

2. Add position & left attribute in the style of bottom paragraph. e.g.
    <P class="style1" style="position:absolute; left:205px">

You will have to use "absolute" here, otherwise as soon as the nested list gets displayed the paragraph will be positioned relative to the nested list!
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Tony O'ByrneCommented:
Try this out
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title> CSS Menu / Sub Menu </title>
		<style type="text/css" media="all">
		ul{ display: none; margin: 0px; padding: 0px; list-style: none; }

		.menuItem{
			float: left;
			width: 200px;
		}

		.menuItem:hover{
			background: #ccf;
		}

		.menuItem:hover ul.levelOne{
			display: block;
		}

		.menuItem:hover ul.levelOne li:hover ul.levelTwo{
			padding-left: 30px;
			display: block;
		}

		.menuItem:hover ul.levelOne li:hover a{
			display: block;
			background: #ffc;
		}
		</style>
	</head>

	<body>
		<div class="menuItem">
			Title One
			<ul class="levelOne">
				<li><a href="#">Sub Item one</a></li>
				<li><a href="#">Sub Item two</a></li>
				<li><a href="#">Sub Item three</a>
					<ul class="levelTwo">
						<li><a href="#">Sub Sub Item one</a></li>
						<li><a href="#">Sub Sub Item two</a></li>
						<li><a href="#">Sub Sub Item three</a></li>
						<li><a href="#">Sub Sub Item four</a></li>
					</ul>
				</li>
				<li><a href="#">Sub Item four</a></li>
			</ul>
		</div>
	</body>
</html>

Open in new window

0
 
devryguy81Author Commented:
I have gone through each of the responses so far and made changes to test how they would affect the page.  I have been able to get close to, but not exactly what I want.  I altered the z-index value for my 1st nested list which did not help, but I also changed the <style1> so that it was positioned absolutely.  I did not enter any numbers to position it.

Now when I expand a menu item it does cover up the rest of the page content like it should, however my <body> data is now pushed all the way over to the left.  In addition, when I close the first <p> tag in the body and start a new one, it appears in line with the first line of text, even when I define it with the same <style1>.  The only way to get it to move to the next line is to use <br /> tags or enclose all of the in the same <p> tag.

I had been toying around with enclosing the text in the body inside a <div> and centering it, but that also did not achieve the results I wanted.

I have put the latest changes out on intranet.thekitcheninc.org/index.htm.  Again any help is appreciated.
-----------------
MageWind,
Sorry that the CSS was not readable for you.  I tried viewing source this time after uploading the changes and it seemed to flow well so perhaps something was messed up last time.
-----------------

I would also like to know if there is a better way to define the list sections in my style sheet than having to define each one individually, such as (#navmenu ul li ul li ul li a {).  Is there any way to shortcut that or make it cleaner?
0
 
Tony O'ByrneCommented:
My bad - disregard that post - it doesn't solve the fact that it pushes the content around.  Working on that now.
0
 
siddagrlCommented:
@devryguy81

FYI,
HEAD should ONLY contain meta data.
And as per http://www.w3schools.com/html/html_head.asp => The elements inside the head element should not be displayed by a browser.

So you should put the displayable content in BODY again.

Also putting the bottom part in a div with style1 works.
<div class="style1">
   <p>Welcome to The Kitchen's New Intranet Site!</p>
   <p>This site is currently under construction.  It is only for testing purposes at this time...</p>
<div>

The answer of your last question is rather simple :-), you can define the class in css file and use in the HTML code as follows:

First Replace
#navmenu ul li ul li ul {display: none;}
To
.Level2 {display: none;}

and use Level2 in the code as follows (same could be done for Level1 menu):

<DIV id="navmenu">
<UL>
      <LI><A href="http://intranet.thekitcheninc.org/index.htm" id="menu-home">Homepage</A></LI>
      <LI><A href="http://intranet.thekitcheninc.org/about.htm" id="menu-about">About Us</A></LI>
      <LI><A href="http://intranet.thekitcheninc.org/events.htm" id="menu-events">Events</A></LI>
      <LI><A href="http://intranet.thekitcheninc.org/hr.htm" id="menu-hr">HR Info</A></LI>
      <LI><A href="http://intranet.thekitcheninc.org/#" id="menu-support">Support</A>
        <UL>
                  <LI><A href="http://intranet.thekitcheninc.org/it.htm" id="submenu-it">IT Department</A>
                <UL class="Level2">
                              <LI><A href="http://intranet.thekitcheninc.org/email.htm" id="submenu-email">Access Email</A></LI>
                              <LI><A href="http://intranet.thekitcheninc.org/groups.htm" id="submenu-groups">Email Groups</A></LI>
                              <LI><A href="http://intranet.thekitcheninc.org/newsletter.htm" id="submenu-newsletter">Newsletter</A></LI>
                              <LI><A href="http://intranet.thekitcheninc.org/phone.htm" id="submenu-phone">Phone System</A></LI>
                              <LI><A href="http://intranet.thekitcheninc.org/report.htm" id="submenu-report">Report a Problem</A></LI>
                              <LI><A href="http://intranet.thekitcheninc.org/howto.htm" id="submenu-howto">How to...</A></LI>
                        </UL>
                  </LI>
                  <LI><A href="http://intranet.thekitcheninc.org/#" id="submenu-hotel">Missouri Hotel</A>
                <UL class="Level2">
                              <LI><A href="http://intranet.thekitcheninc.org/#" id="submenu-casemanagers">Case Managers</A></LI>
                              <LI><A href="http://intranet.thekitcheninc.org/#" id="submenu-census">Census</A></LI>
                              <LI><A href="http://intranet.thekitcheninc.org/#" id="submenu-maintenance">Maintenance</A></LI>
                        </UL>
                  </LI>
            </UL>
      </LI>
      <LI><A href="http://intranet.thekitcheninc.org/notices.htm" id="menu-notices">Notices</A></LI>
</UL>
</DIV>
0
 
devryguy81Author Commented:
I apologize for not getting back to this sooner.  I took a few days off at the end of year and today I am getting back into it.

Thanks to siddagrl for your last suggestion.

I have uploaded the most recent changes.  I have not changed the navigation menu style sheet yet to reflect siggaglr's "shortcuts", but so far the <body> content appears to be behaving itself.  I would like you guys to take one final look over it and make any suggestions before I award points.

I also will likely be asking more questions about this project, but since my first question has basically been answered, I will award the points assigned to it.  Thanks to all for your help!  If you have any good suggestions for places to become more familiar with web site design using CSS please pass them on!
0
 
devryguy81Author Commented:
Sorry, I did not realize the <body> was being pushed over again by the menu.  Please let me know what I am doing wrong.  It seems I can read through and interpret code pretty well but actually typing it is another matter!

Same address as before:  intranet.thekitcheninc.org.

Thanks again for all your help.
0
 
siddagrlCommented:
position in class 'style1' is still relative, you will need to make it absolute (and need to also add 'left')...
0
 
devryguy81Author Commented:
Ok, I changed it to "absolute" and I have added a "left" value, but how can I make sure that content applied with "style1" is centered on the page no matter what resolution is being used?  That is really what I am after.  I purposefully made the menu width 720px so that even if a user was on 800x600 it would not overflow their screen, and that is where I would like to constrain the body as well, but it also needs be centered on the page even if the user is on a widescreen resolution or something higher such as 1280x1024.
How can I achieve this for my <body> content?

Thanks again!  I really appreciate all your help!
0
 
siddagrlCommented:
Add the following to your style1 (remove left:23%):
       margin-left: auto;
       margin-right: auto;
       left: 0;
       right: 0;

Refer to http://www.iangraham.org/books/xhtml1/chap13/center-position.html for more info.

Also for bottom part, put everything into <DIV class="style1"></DIV>

e.g. for events' link use following...

<DIV class="style1">
   <DIV>
      <P>This page is currently under construction...</P>
   </DIV>

   <iframe src="url" style=" border:solid 1px #777 " width="720px" height="600px" frameborder="0" scrolling="no"></iframe>
</div>
0
 
devryguy81Author Commented:
Thanks to everyone for your help with this.  I am sure you can relate to the fact that we tend to make things harder than they need to be when we do not fully understand something, but it is the learning that is important!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 4
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now