Why are My Borders Red all the Way Through?

HTML & CSS
1

Hello everyone,

I’m trying to figure out why my block borders are red on my CSS menu through all the sub-lists. The main-level unordered lists don’t appear right next to each other. The sub-lists go out and branch down like a bulleted list would and the display:none; attributes I put throughout the code do not hide the sub-lists. Does anyone know what the problem is?

Html code:


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

<ul class="pMenu">
	<li id="insurance"><a href="#">insurance</a>
    	<ul>
        	<li><a href="#">property insurance</a>
            	<ul>
                	<li><a href="#">under construction</a></li>
                </ul>
            </li>
            <li><a href="#">auto insurance</a>
            	<ul>
                	<li><a href="#">under construction</a></li>
                </ul>
            </li>
            <li><a href="#">health insurance</a>
            	<ul>
                	<li><a href="#">under construction</a></li>
                </ul>
            </li>
            <li><a href="#">annuities</a>
            	<ul>
                	<li><a href="#">under construction</a></li>
                </ul>
            </li>
       </ul>
   </li>
</ul>

<ul class="pMenu">
	<li id="shopping"><a href="#">shopping</a>
    	<ul>
        	<li><a href="#">electronics</a>
            	<ul>
                	<li><a href="#">under construction</a></li>
                </ul>
            </li>
            <li><a href="#">style & fashion</a>
            	<ul>
                	<li><a href="#">under construction</a></li>
                </ul>
            </li>
            <li><a href="#">food/dining</a>
            	<ul>
                	<li><a href="#">under construction</a></li>
                </ul>
            </li>
            <li><a href="#">cars/auto</a>
            	<ul>
                	<li><a href="#">under construction</a></li>
                </ul>
            </li>
       </ul>
   </li>
</ul>
                   
<ul class="pMenu">
	<li id="dating"><a href="#">dating</a>
    	<ul>
        	<li><a href="#">RealMatureSingles</a></li>
            <li><a href="#">SeniorPeopleMeet</a></li>
        </ul>
    </li>
</ul>

<ul class="pMenu">
	<li id="education"><a href="#">education</a>
    	<ul>
        	<li><a href="#">under construction</a></li>
        </ul>
    </li>
</ul>                    	
</div>
	<!-- end Personal navigation menu-->

and the CSS styles:


/********************/
/*PERSONAL NAV MENU**/
/********************/
.pMenu{
	margin:0;
	padding:0;
	list-style:none;
}

/*IE 6 & 7 need inline block feature*/
ul.pMenu ul li a{
	width:100%;
	display:inline-block;
}

<!-- top level li specifications -->
#health{
	width:8%;
	padding-left:14%;
	padding-right:2%;
}

#insurance{
	width:13%;
	padding-right:2%;
}

#shopping{
	width:12%;	
	padding-right:2%;
}

#dating{
	width:10%;
	padding-right:2%;
}

#education{
	width:13%;
}

<!-- begin main list attributes -->
ul.pMenu li{
	float:left;
	list-style:none;
}

ul.pMenu li a{
	display:block;
	color:#FFF;
	background:#900;
	border:3px ridge #C00;
	text-decoration:none;
	text-shadow:1px 1px 1px #000;
	white-space:nowrap;
	padding-left:2%;
	padding-right:2%;
	padding-top:10px;
	padding-bottom:10px;
}

ul.pMenu li a:hover{
	background:#FF0;
	border:3px ridge #FF6;
	color:#FF0;
}

<!-- first sub-list -->
ul.pMenu li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
	display:none;
}

ul.pMenu li ul li{
	float:none;
	display:inline;
}

ul.pMenu li ul li a{
	width:auto;
	background:#CCC;
	border:1% outset #999;
	font-size:95%;
	height:10%;
	font-size:12px;
	padding:2%;
	padding-left:4%;
	padding-right:10%;
	text-shadow:1px 1px 1px #000;
	color:#000;
}

ul.pMenu li ul li a:hover{
	background:#999;
	border:1% inset #666;
	text-decoration:blink;
}

<!-- second sub-list -->
ul.pMenu li ul li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
	display:none;
}

ul.pMenu li:hover > ul{
	visibility:visible;
}

ul.pMenu li ul li ul li{
	float:none;
	display:inline;
}

ul.pMenu li ul li ul li a{
	width:auto;
	background:#999;
	border:1% outset #666;
	text-shadow:1px 1px 1px #000;
	color:#FFF;
}

ul.pMenu li ul li ul li a:hover{
	background:#999;
	border:1% inset #666;
	text-decoration:blink;
}

<!-- third sub-list -->
ul.pMenu li ul li ul li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
	display:none;
}

ul.pMenu li ul li ul li{
	float:none;
	display:inline;
}

ul.pMenu li ul li ul li a{
	width:auto;
	background:#999;
	border:1% outset #666;
	text-shadow:1px 1px 1px #000;
	color:#FFF;
}

ul.pMenu li ul li ul li a:hover{
	background:#999;
	border:1% inset #666;
	text-decoration:blink;
}
/******************/
/*End Personal Nav*/
/******************/
2

you are using %s to set the child border rules, thus they are getting ignored. Use px or ems as a unit…

3

you are awesome! now the next problem i have is my sub-lists are not hidden at the start.

4

for that you need to set LI UL to display:none; and LI:hover UL to display block… you have them nested up quite deep… which means you would need to do the rule over and over agin for it to work properly, or if you dont care for IE5-6 … you can do this

ul.pMenu li>ul {display:none;}
ul.pMenu li:hover>ul {display:block;}

5

I don’t recommend the display: none method of hiding content. This also hides it from screen reader users, when it should be as available as it is to those not running CSS (as the googlebot sees it).

Though I’m not a big fan of deep nesting of dropdown menus either: the deeper the nesting, the more difficult it is for people to use it. The more careful they need to be with their mice (and dropdowns are rarely keyboard friendly… even when they are with Javascript, having to tab through multiple levels is difficult and time-consuming).

6

Do you think mega drop down menus like this one, Mega Drop Down Menu w/ CSS & jQuery | Dropdown Menu | drop down menus | CSS Menu Tutorial | Drop Down Menu Tutorial | jQuery Tutorials | Web Design Tutorials and Front-end Development Blog by Soh Tanaka, are more effective?

7

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.

8