Menu with Classes for Each SubMenu, Spacing not Correct

HTML & CSS
1

Hello everyone,

I have attempted to simplify my menu’s CSS structure; however, the sub menus are hidden but they seem to still occupy the space and the menu just spaces down vertically. You can see this for yourself where my files are hosted. It is productreviewsbytyler.com

This is the CSS:


/********************/
/*PERSONAL NAV MENU**/
/********************/
.pWrapper {
    padding-bottom:53%;
    padding-left:21%;
	list-style:none;
}

/*IE 6 & 7 need inline block feature*/
ul li{
	display:inline-block;
	list-style:none;
}

ul ul li{
    display:inline-block;
	list-style:none;
}

ul ul ul li{
    display:inline-block;
	list-style:none;
}

ul ul ul ul li{
    display:inline-block;
	list-style:none;
}

/*begin main list attributes*/
.pMenuMain{
    text-shadow:1px 1px 1px #000;
    padding-top:.7em;
    padding-bottom:.7em;
	text-align:center;
	float:left;
    list-style:none;
	margin-right:1%;
	display:block;
    color:#FFF;
    background:#900;
    border:.33em ridge #C30;
    text-decoration:none;
}

.pMenuMain:hover{
    background:#F00;
    border:.33em ridge #C90;
    color:#FF0;
}

/*first sub-list*/
.pMenu2{
	background:#CCC;
	border:.25em outset #999;
	width:10em;
	list-style:none;
	font-size:12px;
	padding-top:.5em;
	padding-bottom:.5em;
	padding-right:2em;
	padding-left:.5em;
	text-decoration:none;
    text-shadow:1px 1px 1px #000;
    color:#000;
    position:relative;
	text-align:left;
	top:.33em;
	margin:0;
    padding:0;
    position:absolute;
    visibility:hidden;
}

.pMenu2:hover{
    background:#999;
    border:.25em inset #666;
    text-decoration:blink;
}

/*second sub-list*/
.pMenu3{
	background:#999;
	border:.25em outset #666;
	width:13em;
	font-size:11px;
	list-style:none;
	padding-top:.35em;
	padding-bottom:.35em;
	padding-right:2em;
	padding-left:.5em;
	text-decoration:none;
    text-shadow:1px 1px 1px #000;
    color:#000;
    position:relative;
	text-align:left;
	top:.33em;
	visibility:hidden;
}
.pMenu3:hover {
    background:#999;
    border:.15em inset #666;
    text-decoration:blink;
}

/*third sub-list*/
.pMenuLink{
	visibility:hidden;
	text-decoration:none;
	list-style:none;
	display:block;
	color:#000;
	text-shadow:1px 1px 1px #000;
}
/******************/
/*End Personal Nav*/
/*****************/

This is the HTML for the Menu:


    <!-- begin Personal navigation menu -->
<div class="pWrapper">
	<ul>
		<li style="width:10%;"><div class="pMenuMain">health</div>
    		<ul style="left:18em;">
        		<li><div class="pMenu2">weight loss</div>
            		<ul>
               		  <li><div class="pMenu3">fitness</div>
                			<ul>
                       		  <li><a class="pMenuLink" href="#">under construction</a></li>
                        	</ul>
                    	</li>
                    	<li><div class="pMenu3">dieting</div>
                    		<ul>
                       		  <li><a class="pMenuLink" href="#">under construction</a></li>
                        	</ul>
                    	</li>
            		</ul>
            	</li>   
            	<li><div class="pMenu2">skin care</div>
            		<ul>
               		  <li><a class="pMenuLink" href="#">under construction</a></li>
                	</ul>
            	</li>
        	</ul>
    	</li>
	</ul>

	<ul>
		<li style="width:14%;"><div class="pMenuMain">insurance</div>
    		<ul>
        		<li><div class="pMenu2">property insurance</div>
            		<ul>
               		  <li><a class="pMenuLink" href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">auto insurance</div>
            		<ul>
               		  <li><a class="pMenuLink" href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">health insurance</div>
            		<ul>
               		  <li><a class="pMenuLink" href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">annuities</div>
            		<ul>
               		  <li><a class="pMenuLink" href="#">under construction</a></li>
                	</ul>
            	</li>
       	   </ul>
   	   </li>
	</ul>

	<ul>
		<li style="width:11.3%;"><div class="pMenuMain">general</div>
    		<ul>
        		<li><div class="pMenu2">electronics</div>
            		<ul>
               		  <li><a class="pMenuLink" href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">style &amp; fashion</div>
            		<ul>
               		  <li><a class="pMenuLink" href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">food/dining</div>
            		<ul>
               		  <li><a class="pMenuLink" href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">cars/auto</div>
            		<ul>
               		  <li><a class="pMenuLink" href="#">under construction</a></li>
                	</ul>
            	</li>
       		</ul>
   	    </li>
	</ul>
                   
	<ul>
		<li style="width:10%;"><div class="pMenuMain">dating</div>
    		<ul>
        		<li><a class="pMenuLink" href="#">RealMatureSingles</a></li>
            	<li><a class="pMenuLink" href="#">SeniorPeopleMeet</a></li>
        	</ul>
    	</li>
	</ul>

	<ul>
		<li style="width:13.8%;"><div class="pMenuMain">education</div>
    		<ul>
        		<li><a class="pMenuLink" href="#">under construction</a></li>
        	</ul>
    	</li>
	</ul>                    	
</div>
	<!-- end Personal navigation menu-->
2

visibility: hidden is known for hiding something while not taking it out of the flow. However position: absolute does take elements out of the flow.

Instead of using visibility: hidden, keep the position: absolute and just move the subs off-screen with a negative left or left-margin. Bring them onscreen on :hover and :focus (I’ve found for focus to work, px units must be used… I dunno why).

You can cut down you CSS by allowing the cascade to work.

<ul class=“pWrapper”> what’s that wrapping div doing??

.pWrapper, .pWrapper ul {
list-style: none; /this hits ALL uls inside pWrapper and pWrapper itself/
}
.pWrapper li {
display: inline-block; /this hits ALL lis inside/
}

(though I recommend floating if you’re going to be using dropdowns)

Why are you using divs? You can’t rely on everyone having a mouse. It’s just a great way to tell a whole heap of mobile users, keyboarders, laptop users, IE6 users and the blind to go jump off a cliff (unless that’s the point).

Using anchors gives many benefits:

  • they let users :focus with the keyboard to bring the submenus onscreen (with ul a:focus+ul {styles)
  • they allow you to list a URL where users who cannot get the dropdowns to work can go to reach the submenu items
  • you can style them just as well as any div (in fact, most dropdowns make them some kind of block)

Example:


<ul class="pWrapper">
  <li><a href="health.html">health</a>
    <ul>
...

Anyone who can’t get the submenu to show when they hover/focus on “Health” can at least click on it and get to a page with that same information. Too often you’ll see people do href=“#” and expect CSS and Javascript to bring the dropdown onscreen. Those people find horses heads in their beds later on.

As a side note:

text-decoration:blink;

This will free the dark lord from his prison, start the weeping of orphans, cause the bleaching of eyes, and make users everywhere to curse your name and resolve to find where you live.

Now if you revel in this sort of thing, I hope you’re in a secret cave lair/laboratory under a volcano and are currently petting a Persian cat and making evil laughter while your henchmen/minions look on uneasily.

3

Your post is AMaZiNg

But I also have to LOL at the last part :lol::rofl::goof:

I have learned much from this post.

To answer your question, the wrapping div puts the menu in position on my home page.

My Questions:

So what is it exactly with divs that requires a mouse?

I guess the text-decoration:blink; is uneasy on the user’s eyes?

4

To answer your question, the wrapping div puts the menu in position on my home page.

You can position a ul similarly. One of the few times you will actually have a wrapping div around a ul is when you need a background image, colour or border to extend further than the ul itself… but beyond that, it’s extra code you don’t need.

So what is it exactly with divs that requires a mouse?

You’re using :hover. :hover only works with a mouse. Some touch devices have a simulation for :hover (like a single tap versus a double tap) but in general you can trust that hover == mouse only.

Anchors can be focussed on by the keyboard (and not many HTML elements can get focus naturally: it’s pretty much anchors and form inputs). This is one reason you see anchors used at the top level of dropdown menus (the other reason is of course to let people click on it to go to a page).

I guess the text-decoration:blink; is uneasy on the user’s eyes?

Besides causing epileptic seizures, as well as being annoying…
well here’s a great example of doing probably everything wrong that you possibly can with a web site:
Rainbow Epileptic Jesus

Here’s another one, though it possibly doesn’t even work fully in newer browsers like Chrome:
O pointy birds!

Actual professional reason not to use it: it’s recommended to avoid in WCAG.

Also some standardista at Wikipedia apparently doesn’t like blink. Not that Wikipedia is a trustworthy source of anything so long as unfunny gothed-up manga-teen high school kids have the ability to edit any article they want.

Those poor poor eBay sellers, such victims of buyers who refuse to read walls of text.
Everyone knows nobody reads on the web… kinda like how men never ask directions. Just means eBay sellers had better learn how to write for the web, since it’s not print and all.

But mostly I’ll stick to my regular argument: real web developers avoid blink like a plague of projectile-vomiting locusts who’ve just eaten 100,000 bean burritos. Because it’s more awesome than boring usability nerds with ugly websites like Nielsen’s :slight_smile:

BTW if you’d like to see a good place to get a handle on dropdowns, I recommend checking out Sons of Suckerfish at HTMLdog (though there’s some newer version out now called “Superfish”).

If you don’t like the Javascript you see in there, keep in mind your current site wouldn’t work in IE6 without it either, for the same reason: IE6 won’t :hover on anything that’s not an anchor… unless you add some scripting. Usually the li (who is a parent of the sub ul) needs the hover, tho as I said earlier you can cater to keyboard as well.

If you want to see an example (somewhat complicated) of a dropdown menu that I think does everything one should, you can check out the code here:
Motorrijschool EMO
(though of course I like that menu… I wrote it… though my code has been touched and things shuffled twice by someone else so the site is no longer fully my code… but the menu still is)

It’s got a dabble of Javascript for a slight off-mouse delay and to assist keyboarding. Without JS you’ll never get the main body of the submenu onscreen with keyboard only, though please do turn Javascript off and go through the menu with your keyboard to see what functionality it does have.

5

I’d like to have everything sub-categorized in a way that there are sub-levels. I will quote you now from another thread that you typed about Mega drop down menus.

"
Mega’s are indeed easier for mouse users: instead of insane nesting, there’s usually a single submenu (in a big div) where you can use other markup such as headings and then more lists. This is more mouse-friendly but you’ll still need Javascript to make it keyboard-friendly (whenever anything in the submenu is getting focus(), the whole submenu div needs to be onscreen).

I don’t agree with that guy’s use of negative text-indent… it’s one of the lesser image-replacement techniques (if the image doesn’t load for whatever reason, you get a Mystery-Meat menu… not usable). There are others, tho I didn’t look to see if you’re doing image-replacement.

The jQuery is still using display: none. There’s really no excuse for web developers who know what they’re doing (ie, the people making these jQuery plugins) to use display: none when they know the problems of it.
However, the $(this).show and $(this).hide() functions can be changed from doing a display: none/block to a pull-offscreen-with-negative margins (usually you add/remove a class which has these styles, tho I dunno if jQuery can fade those). I don’t see him showing what the functions are for .hide and .show (maybe they’re defauly jQuery functions?? I dunno, I don’t do much jQuery) but if they are part of this menu JS then they could be rewritten.

function megaHoverOver(){ <– where’s the keyboard trigger???

Nothing wrong with hoverIntent (seems “smarter” than plain old mouseover()) but locking out everyone without a mouse is more than rude (though you can argue that those without mice would be better off with just having the top-level links link to whole other pages with the submenu items available. This, to me, is acceptable, and might be less code).

But again, yes, if you must stuff a lot of navigation into a dropdown, a Mega has much better usability. That tut you linked to references Jakob Nielsen, who does actual user testing on large corporate websites.
"

What is the most compatible way to build a big menu that is both mouse and mobile friendly?

6

Are you building a mega?

You still keep the anchor, and the div only replaces the sub-ul as the main child of the top-level li.

Like so:


<ul id="main">
  <li><a href="first">First Main Menu Item"</a>
    <div>
      <h2>Foos</h2>
      <ul>
        <li><a href="blah">Like a boss</a></li>
        <li><a href="blah">Like a boss</a></li>
        <li><a href="blah">Like a boss</a></li>
      </ul>
      <h2>Bars</h2>
      <ul>
        <li><a href="blah">Like a boss</a></li>
        <li><a href="blah">Like a boss</a></li>
        <li><a href="blah">Like a boss</a></li>
      </ul>
      <more stuff... you can almost put anything in here/>
    </div>
  </li>
  <li><a href="second">Second Main Menu Item</a>
    <div>
      ...
      </div>
  </li>
...
</ul>

Like that. The anchor is still going to give people another way to the same information that’s in the mega div. The div is used in place of just a sub ul because divs can have more types of children inside (like headers, paragraphs, etc… ul’s can only have li’s).

What you had was a div wrapped only around what shows as the top-level menu item. It wasn’t clickable or focusable.

Also if you want to quote something, wrap your pasted text in [quote] tags.

7

What about a third nesting in there, an h3? I want to do that once, but I don’t know how to get this done. This is what I tried so far…

HTML


  <!-- begin Personal navigation menu -->
<div class="pWrapper">
<ul id="pMenu">
	<li style="width:10%;"><a href="http://www.atlantareviewgroup.com/health.php" class="health">health</a>
    		<div class="pSub">
            <ul>
        		<h2>weight loss</h2>
               		  <h3>fitness</h3>
                       		  <li><a href="#">under construction</a></li>
                    <h3>dieting</h3>
                       		  <li><a href="#">under construction</a></li>
   
            	<h2>skin care</h2>
               		  <li><a href="#">under construction</a></li>
        	</ul>
			</div>
    </li>    
	<li style="width:14%;"><a href="http://www.atlantareviewgroup.com/insurance.php" class="insurance">insurance</a>
    		<div class="pSub">
        	<ul>
            	<h2>property insurance</h2>
               		  <li><a href="#">under construction</a></li>
            	<h2>auto insurance</h2>
               		  <li><a href="#">under construction</a></li>
            	<h2>health insurance</h2>
               		  <li><a href="#">under construction</a></li>
            	<h2>annuities</h2>
               		  <li><a href="#">under construction</a></li>
       	   </ul>
           </div>
   	   </li>

	<li style="width:11.3%;"><a href="http://www.atlantareviewgroup.com/general.php" class="general">general</a>
    		<div class="pSub">
            <ul>
        		<h2>electronics</h2>
               		  <li><a href="#">under construction</a></li>
            	<h2>style &amp; fashion</h2>
               		  <li><a href="#">under construction</a></li>
            	<h2>food/dining</h2>
               		  <li><a href="#">under construction</a></li>
            	<h2>cars/auto</h2>
               		  <li><a href="#">under construction</a></li>
       		</ul>
            </div>
   	    </li>

	<li style="width:10%;"><a href="http://www.atlantareviewgroup.com/dating.php" class="dating">dating</a>
    		<div class="pSub">
            <ul>
        		<li><a href="#">RealMatureSingles</a></li>
            	<li><a href="#">SeniorPeopleMeet</a></li>
        	</ul>
            </div>
    	</li>
	
	<li style="width:13.8%;"><a href="http://www.atlantareviewgroup.com/education.php" class="education">education</a>
    		<div class="pSub">
            <ul>
        		<li><a href="#">under construction</a></li>
        	</ul>
            </div>
    	</li>                    	
</ul>

CSS:


/********************/
/*PERSONAL NAV MENU**/
/********************/
ul#pMenu li .pSub {
	position: absolute; /*--Important--*/
	top: 44px; left: 0;
	z-index: 99999;
	background: #344c00 url(sub_bg.png) repeat-x; /*--Background gradient--*/
	padding: 20px 20px 20px;
	float: left;
	/*--Bottom right rounded corner--*/
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	display: none; /*--Hidden for those with js turned off--*/
}
ul#pMenu li .row { /*--If needed to break out into rows--*/
	clear: both;
	float: left;
	width: 100%;
	margin-bottom: 10px;
}
ul#pMenu li .pSub ul{
	list-style: none;
	margin: 0; padding: 0;
	width: 150px;
	float: left;
}
ul#pMenu .pSub ul li {
	width: 100%; /*--Override parent list item--*/
	color: #fff;
}
ul#pMenu .pSub ul li h2 { /*--Sub nav heading style--*/
	padding: 0;  margin: 0;
	font-size: 1.3em;
	font-weight: normal;
}
ul#pMenu .pSub ul li h2 a { /*--Sub nav heading link style--*/
	padding: 5px 0;
	background-image: none;
	color: #e8e000;
}
ul#pMenu .pSub ul li a {
	float: none;
	text-indent: 0; /*--Override text-indent from parent list item--*/
	height: auto; /*--Override height from parent list item--*/
	background: url(navlist_arrow.png) no-repeat 5px 12px;
	padding: 7px 5px 7px 15px;
	display: block;
	text-decoration: none;
	color: #fff;
}
ul#pMenu .pSub ul li a:hover {
	color: #ddd;
	background-position: 5px 12px ;/*--Override background position--*/
}
/******************/
/*End Personal Nav*/
/*****************/
8

Remember that li’s MUST be direct children of list elements (ol, ul).
And then remember that ONLY li’s can be direct children of list elements (no H2 or H3 as direct children).

Those headers are heading the list, not just the list items, so it makes sense to put the headers first, then the lists underneath (plus, only way it’s valid).

Though if you are really only listing ONE link under each header, I wouldn’t use a list at all. I’d prolly use a p with anchor inside.

But I’ll code these up as lists so you can see:


<h2>weight loss</h2>
  <h3>fitness</h3>
  [b]<ul>[/b]
    <li><a href="#">under construction</a></li>
    ...more list items...
  [b]</ul>[/b]
  <h3>dieting</h3>
  [b]<ul>[/b]
    <li><a href="#">under construction</a></li>
    ...more list items...
  [b]</ul>[/b]
...

You can target those ul’s with

#pMenu li div ul {
styles;
}
or even just
#pMenu ul {
styles;
}
if there’s no submenus-in-a-div-and-submenus-not-in-a-div.

You don’t need a class on that div, though. There is only one kind of div who is
ul id=“pMenu”>li>div

so you can style those divs all at once with
#pMenu div {
styles;
}

That will catch all divs who are within #pMenu and unless you have any nested divs, the styles you put in there will be where you want.

Also, usually for the top-level li’s, because (usually) we float them, you can set their widths to “auto” (which gets around the Opera jitter bug) and they’ll shrink-wrap to the width of the anchors (which we set to display: block… so IE6 may need an explicit width, OR you can float the anchors too) and then you can add space around the anchor text with padding (on either the li or the anchor… padding on the anchor means any background-colour or image changes you do on :hover/:focus will hit the whole area… padding on the li means only the anchor text itself will change on :hover/:focus).

Display: none on the divs still means screen reader users aren’t able to access those divs. (though maybe you want that… but I personally like skip links before the menu for those who want to skip it)

And:
z-index: 99999;
won’t mean anything to IE6 and 7 if, after the menu, there’s a relatively positioned box afterwards (or a Flash block); the submenus will not stay above that rel-po’d block.

We get around this IE bug by placing the z-index on the parent (so the pMenu) which does the same thing, except works also in IE.

Since the submenus are abso-po’d, if you don’t have a rel-po’d box following the menu, you don’t need to set any z-index: abso-po’d elements are naturally “higher” than static ones. The submenus will always cover whatever’s underneath them (again, unless it’s Flash or rel-po’d boxes).

9

I’ll need to read this post over 15 times to get all this Juicy information into my Cranium.

10

For now, just move those ul tags to only wrap around your li’s.

Valid HTML before messing with CSS.

11

This is what I changed:


<!-- begin Personal navigation menu -->
<div class="pWrapper">
<ul id="pMenu">
	<li><a href="http://www.atlantareviewgroup.com/health.php">health</a>
    		<div>
        		<h2>weight loss</h2>
               		  <h3>fitness</h3>
                      		<ul>
                       		  <li><a href="#">under construction</a></li>
                            </ul>
                      <h3>dieting</h3>
                      		<ul>
                       		  <li><a href="#">under construction</a></li>
                            </ul>
   
            	<h2>skin care</h2>
                   <ul>
               		  <li><a href="#">under construction</a></li>
        	       </ul>
			</div>
    </li>    
	<li><a href="http://www.atlantareviewgroup.com/insurance.php">insurance</a>
    		<div>
            	<h2>property insurance</h2>
                	<ul>
               		  <li><a href="#">under construction</a></li>
                    </ul>
            	<h2>auto insurance</h2>
                	<ul>
               		  <li><a href="#">under construction</a></li>
                    </ul>
            	<h2>health insurance</h2>
                	<ul>
               		  <li><a href="#">under construction</a></li>
                    </ul>
            	<h2>annuities</h2>
                	<ul>
               		  <li><a href="#">under construction</a></li>
       	   			</ul>
           </div>
   	   </li>

	<li><a href="http://www.atlantareviewgroup.com/general.php">general</a>
    		<div>
        		<h2>electronics</h2>
                	<ul>
               		  <li><a href="#">under construction</a></li>
                    </ul>
            	<h2>style &amp; fashion</h2>
                	<ul>
               		  <li><a href="#">under construction</a></li>
                    </ul>
            	<h2>food/dining</h2>
                	<ul>
               		  <li><a href="#">under construction</a></li>
                    </ul>
            	<h2>cars/auto</h2>
                	<ul>
               		  <li><a href="#">under construction</a></li>
       				</ul>
            </div>
   	    </li>

	<li><a href="http://www.atlantareviewgroup.com/dating.php">dating</a>
    		<div>
            <ul>
        		<li><a href="#">RealMatureSingles</a></li>
            	<li><a href="#">SeniorPeopleMeet</a></li>
        	</ul>
            </div>
    	</li>
	
	<li><a href="http://www.atlantareviewgroup.com/education.php">education</a>
    		<div>
            <ul>
        		<li><a href="#">under construction</a></li>
        	</ul>
            </div>
    	</li>                    	
</ul>
</div>
	<!-- end Personal navigation menu-->
12

I got rid of wrapping div, too, based on your recommendation.

13

Ok.

So now, you’ve run your current code through teh W3C validator, everything’s cool… where are you with your styling?

You can hit the headers with
#pMenu h2 or #pMenu div h2, the h3’s similarly, and pretty much you can style everyone inside the divs without needing classes or id’s on anyone (unless you have two+ elements inside the same container but one needs some different style).

Most of the time, mega divs are approx the same width, but since the last div or last two divs usually need to be positioned more to the left, that last top-level li (or last two or whatever) get a class on them so you can change the position of the divs on :hover.

14

These are the styles so far (hardly much progress, didn’t get to work on it as much as I would have liked to today):


/********************/
/*PERSONAL NAV MENU**/
/********************/
#pMenu a{
	text-decoration:none;
}

#pMenu li{
	list-style:none;
}

#pMenu > li{
	/*begin main gradient*/
	background: #a90329; /* Old browsers */
	background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
	/*end main gradient*/
	color:#FFF;
	text-shadow:1px 1px 1px #000;
	font-size:20px;
}

#pMenu div{
	visibility:hidden;
	background: #fcfff4; /* Old browsers */
	background: -moz-linear-gradient(top, #fcfff4 0%, #e9e9ce 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(100%,#e9e9ce)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* W3C */
}
/******************/
/*End Personal Nav*/
/*****************/

It appears as one huge block. It’s like the div is occupying its space and everything, just isn’t showing the text. Is something wrong here?

15 
#pMenu div{
	visibility:hidden;

This means the div is on-screen and invisible. It is taking up space. You cannot see it because you made it invisible. This is why we use absolute positioning and we move it off-screen until the user hovers/focusses on a top-level list item.

You’re filling up your code with lots of gradients and junk. Doesn’t that make it hard to read? You can always add that in later, after your main functionality works. I would keep code bare until the last minute.


#pmenu {
  position: relative; /*so you can set z-index*/
  width; /*whatever*/
  z-index: 1000; /*or whatever*/
}
#pmenu li {
   position: relative; /*positioned ancestor for divs*/
  float: left;
  width: auto;
}
#pmenu>li>a {
  style top-level anchors;
  display: block (or float: left)
  padding: whatever;
}
        #pmenu a:hover, #pmenu a:focus, #pmenu a:active {
          hover/focus/active styles for all anchors;
        }

#pmenu div {
  position: absolute;
  left: 0;
  top: whatever from height of top-level menu... or 99%;
  margin-left: -9999px;
  width: whatever;
  all other styles;
}

/*for mousies*/
#pmenu li:hover div {
  margin-left: 0;
}

/*for keyboarders no JS*/
#pmenu a:focus+div {
  margin-left: 0;
}
(the above only brings the div on screen when the user's on the top-level anchor... you need to use separate code to bring the sub-links onscreen on focus, tho with non-focusable things in then div like headers etc you'll want Javascript to bring that div onscreen as well)

/*style stuff in the div*/
#pmenu div ul {
  style lists, anything needed to override above styles;
}
#pmenu div h2 {
  style headers;
}

keyboardable Megamenu

Not built for IE6. Use of > selector because I have sandbag divs (and those could be spans) and a few nested divs as well, and I only want to hit the main-level div.

You’ve also seen Eric’s mega. It’s not keyboardable but works for the mouse and again the top-level links will go somewhere for those who can’t get the dropdown to appear if you use Eric’s code.

16

Well, this is coming along really cool so far. But I’ve run into two road blocks:

  1. the div is moved out of view with the left:8000em; line. I’m trying to move it back to start work on styling the elements inside the div… but I don’t know how!

I’m sure the problem is here:

#pMenu a:hover, #pMenu a:focus, #pMenu a:active div{
  1. I want to move the menu into its proper position on the page without a wrapping div… but it’s not moving with what I have been trying.

/********************/
/*PERSONAL NAV MENU**/
/********************/
#pMenu ul{
	top:300px;
}

#pMenu a{
	text-decoration:none;
}

#pMenu li{
	list-style:none;
	float:left;
	margin-right:1em;
}

#pMenu li a{
	color: #FFF;
	text-shadow:1px 1px 1px #000;
	width:auto;
	padding-left:4%;
	padding-right:4%;
	padding-top:.2em;
	padding-bottom:.2em;
	border:.2em groove #0F0;
	text-shadow:1px 1px 1px #000;
	font-size:20px;
	
	/*begin main gradient*/
	background: #a90329; /* Old browsers */
	background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
	/*end main gradient*/
}

	#pMenu a:hover, #pMenu a:focus, #pMenu a:active {
          color:#FF0;
		  
		  /*begin hover gradient top level*/
		  background: #a0030b; /* Old browsers */
		background: -moz-linear-gradient(top, #a0030b 0%, #f91d00 100%); 		/* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, 			color-stop(0%,#a0030b), color-stop(100%,#f91d00)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Opera11.10+ */
		background: -ms-linear-gradient(top, #a0030b 0%,#f91d00 100%); 				/* IE10+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0030b', endColorstr='#f91d00',GradientType=0 ); /* IE6-9 */
		background: linear-gradient(top, #a0030b 0%,#f91d00 100%); /* W3C */
        }

#pMenu div{
	left:8000em;
	position:absolute;
	background: #fcfff4; /* Old browsers */
	background: -moz-linear-gradient(top, #fcfff4 0%, #e9e9ce 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(100%,#e9e9ce)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* W3C */
}

#pMenu a:hover, #pMenu a:focus, #pMenu a:active div{
	right:8000em;
}
/******************/
/*End Personal Nav*/
/*****************/

That is a good suggestion to keep the gradients out of the code until the bare functionality works, but I’ve already put them in there and it’s not too big of a hassle to skip through to other parts of the CSS. I’ll keep that in mind for next time.

17

If the gradient code isn’t bothering you then it’s not a problem.

  1. the div is moved out of view with the left:8000em; line. I’m trying to move it back to start work on styling the elements inside the div… but I don’t know how!

When I’m styling subs I temporarily comment out the off-screen stuff, so that I have at least one div or submenu onscreen. I also do this when I need to debug something.

#pMenu a:hover, #pMenu a:focus, #pMenu a:active div{

Look closely at that. A comma separates three completely independent statements.
#pMenu a:hover {
stuff; you are styling hovered anchors within #pMenu}

#pMenu a:focus {
stuff; you are styling focussed anchors within #pMenu}

#pMenu a:active div {
here you are styling a div who is a child of an active anchor (which isn’t possible: anchors cannot have block children);
}

We use a comma when there are many separate, independent declarations who happen to have the same styles, so it makes writing easier.

The #pMenu li is the parent of the div. Hovering on the li can allow you to show the div child. What the anchor does (besides being clickable to some other page showing the same submenu options) is let you use the adjacent selector:
#pMenu a:focus+div
This says when an anchor within #pMenu is focussed, the div who is a sibling coming after that anchor gets some styles. In our case, moves back onscreen. Both a and div are children of the li, and thus are siblings. + is a sibling selector.

Also, you have
left: 8000em;

The reason we use negative numbers instead of large positive numbers is that in a LRT page (what everyone has if the page isn’t Arabic or Hebrew or whatever), moving stuff offscreen to the top or left does nothing to the viewport; however moving stuff to the bottom or the right will create scrollbars. Maybe not all browsers, but most of the ones I’ve checked. We don’t want scrollbars usually.

Also there was (dunno if it’s fixed) a Window-Eyes screenreader bug where moving stuff up a negative top number made the screen reader read that out as if the element really was at the top of the page, instead of ignoring it and following source order. Weird bug.

  1. I want to move the menu into its proper position on the page without a wrapping div… but it’s not moving with what I have been trying.

This one’s easier to deal with. This is basic CSS positioning.

Here’s what you tried:


#pMenu ul{
	top:300px;
}

If your markup is still
<ul id=“pMenu”>
then your above code isn’t targetting #pMenu itself, but any ul’s inside who are descendants.

But even so, that code will be ignored by the browser. Here’s why:

You’re positioning a static box. Stuff like top: whatever and left: whatever are only used by the browser on positioned elements: elements with position: relative or position: absolute or position: fixed. No others.

That aside, most of the time we don’t want to place things on a page using manual positioning like that. It makes pages brittle, and means more work for us.

That menu is under something. Even if it’s at the top of the page, it’s under at least the top of some container, maybe the body.

One way to push it down somewhere by 300px is to give whoever is above it a bottom margin of 300px. If there’s only the top of a container above it, then that container can have top-padding of 300px.

Usually margins and padding (and floating) are how we place stuff on the page, and we let it stay in the document flow. Manually placing stuff with positioning bites you in the butt once someone’s screen isn’t the same size as yours (esp if you don’t want to write a whole other page for mobile).

18

Well, here’s what I tried. The div was on screen and everything when I loaded it up, not to the left, taking up space, incorrectly done:


#pMenu div{
	left:-8000em;
}

#pMenu a:focus+div{
	left:0em;
	position:absolute;
	background: #fcfff4; /* Old browsers */
	background: -moz-linear-gradient(top, #fcfff4 0%, #e9e9ce 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(100%,#e9e9ce)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* W3C */
}
19

#pMenu div{
left:-8000em;
}

I see you are setting position: absolute on it after the focus action, but you need it on the element by default.
#pMenu div{
position: absolute;
left:-8000em;
and then all your other styles here
}

Unless those gradients etc are changing when someone makes the div appear, set everything in the default state. Then the only thing the browser is changing when users hover or focus is the div’s position.

#pMenu a:focus+div{
left:0em;}

And again I’ll mention that, for some reason, I haven’t gotten em units to work with focus. I wish I knew why. I normally like to use ems to keep stuff off-screen, but when I need focus to work with them, I find it only works with px.

And, there’s apparently a browser limit. Opera for example has an actual width limit of like 32000 px or something. If you set a negative em amount that goes over Opera’s limit (and Konquerer had the same issue and possibly other browsers), you may see it “wrapping” around the page of the page and appearing again on the far right side.

I tend to use
-9999px
or
-999em
though once I was pulling stuff up to the top and Opera hit me with a vertical limit too, and I had to do
top: -99em instead of -999em. Opera was cutting off the bottom of the page. Arg.

20

I’m still unsuccessful. Here’s what I attempted- the top level appears only, the div is already moved off screen and won’t come back on.


#pMenu div{
	left:-8000em;
	position:absolute;
	
	/*second gradient*/
	background: #fcfff4; /* Old browsers */
	background: -moz-linear-gradient(top, #fcfff4 0%, #e9e9ce 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(100%,#e9e9ce)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* W3C */
}

#pMenu a:focus+div{
	right:8000em;
}