Where Did My Spacing Go on the Main List?

HTML & CSS
1

So I’ve made some good progress on my awesome JavaScript/CSS navigation menu, but in the midst of making changes I lost my spacing in between the main list items. Their blocks appear as one bar bunched up all together, whereas I had them gapped out previously.

Here are my CSS styles:


/********************/
/*PERSONAL NAV MENU**/
/********************/
.pWrapper{
	padding-bottom:53%;
	padding-left:14%;
}
.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;
}
ul.pMenu ul li ul li a{
	width:100%;
	display:inline-block;
}
ul.pMenu ul li ul li ul li a{
	width:100%;
	display:inline-block;
}

/*top level li specifications*/
#health{
	width:8%;
	padding-right:2%;
}

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

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

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

#education{
	width:15.5%;
}

/*begin main list attributes*/
ul.pMenu > li:hover a{
	background:#F00;
	border:.33em ridge #C90;
	color:#FF0;
}
ul.pMenu li:hover > ul li a{
	width:10em;
	background:#CCC;
	border:.25em outset #999;
	height:1em;
	left:5.35em;
	font-size:12px;
	padding-left:4%;
	padding-right:10%;
	text-shadow:1px 1px 1px #000;
	color:#000;
	position:relative;
	display:block;
}
ul.pMenu li{
	float:left;
	list-style:none;
}

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

ul.pMenu li a:hover{
	background:#F00;
	border:.33em ridge #C90;
	color:#FF0;
}

/*first sub-list*/
ul.pMenu li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
}

ul.pMenu li ul li{
	float:none;
	top:33px;
}

ul.pMenu li ul li a{
	width:10em;
	background:#CCC;
	border:.25em outset #999;
	height:1em;
	left:5.35em;
	font-size:12px;
	padding-left:4%;
	padding-right:10%;
	text-shadow:1px 1px 1px #000;
	color:#000;
	position:relative;
	display:block;
}

ul.pMenu li ul li a:hover{
	background:#999;
	border:.25em 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:.15em outset #666;
	text-shadow:1px 1px 1px #000;
	color:#FFF;
}

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

/*third sub-list*/
ul.pMenu li ul li ul li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
}

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*/
/******************/

My HTML lists in index.php:


<!-- begin Personal navigation menu -->
<div class="pWrapper">
<ul class="pMenu">
	<ul>
		<li id="health" style="width:10%;"><a href="#">health</a>
    		<ul style="left:14.35em;">
        		<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>
		<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>
		<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>
		<li id="dating"><a href="#">dating</a>
    		<ul>
        		<li><a href="#">RealMatureSingles</a></li>
            	<li><a href="#">SeniorPeopleMeet</a></li>
        	</ul>
    	</li>
	</ul>

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

What did I mess up here? :sick:

2

Just add a margin-right to the top level menu items to space them out.


ul.pMenu li{margin-right:10px;}
ul.pMenu li li{margin-right:0px;}

I’m not sure why you have the submneu offset by 5em everywhere. It looks odd to me.

I thought it should be like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome</title>
<style type="text/css">
/********************/
/*PERSONAL NAV MENU**/
/********************/
.pWrapper {
    padding-bottom:53%;
    padding-left:14%;
}
.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;
}
ul.pMenu ul li ul li a {
    width:100%;
    display:inline-block;
}
ul.pMenu ul li ul li ul li a {
    width:100%;
    display:inline-block;
}
/*top level li specifications*/
#health {
    width:8%;
    padding-right:2%;
}
#insurance {
    width:14.5%;
    padding-right:2%;
}
#shopping {
    width:14%;
    padding-right:2%;
}
#dating {
    width:11%;
    padding-right:2%;
}
#education {
    width:15.5%;
}
/*begin main list attributes*/
ul.pMenu > li:hover a {
    background:#F00;
    border:.33em ridge #C90;
    color:#FF0;
}
ul.pMenu li:hover > ul li a {
    width:10em;
    background:#CCC;
    border:.25em outset #999;
    height:1em;
    
    font-size:12px;
    padding-left:4%;
    padding-right:10%;
    text-shadow:1px 1px 1px #000;
    color:#000;
    position:relative;
    display:block;
}
ul.pMenu li {
    float:left;
    list-style:none;
}
ul.pMenu li a {
    display:block;
    color:#FFF;
    background:#900;
    border:.33em ridge #C30;
    text-decoration:none;
    text-shadow:1px 1px 1px #000;
    white-space:nowrap;
    padding-top:.7em;
    padding-left:.3em;
    padding-right:.3em;
    padding-bottom:.7em;
}
ul.pMenu li a:hover {
    background:#F00;
    border:.33em ridge #C90;
    color:#FF0;
}
/*first sub-list*/
ul.pMenu li{margin-right:10px;}
ul.pMenu li li{margin-right:0px;}

ul.pMenu li ul {
    margin:0;
    padding:0;
    position:absolute;
    visibility:hidden;
}
ul.pMenu li ul li {
    float:none;
    top:33px;
}
ul.pMenu li ul li a {
    width:10em;
    background:#CCC;
    border:.25em outset #999;
    height:1em;
    font-size:12px;
    padding-left:4%;
    padding-right:10%;
    text-shadow:1px 1px 1px #000;
    color:#000;
    position:relative;
    display:block;
}
ul.pMenu li ul li a:hover {
    background:#999;
    border:.25em 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:.15em outset #666;
    text-shadow:1px 1px 1px #000;
    color:#FFF;
}
ul.pMenu li ul li ul li a:hover {
    background:#999;
    border:.15em inset #666;
    text-decoration:blink;
}
/*third sub-list*/
ul.pMenu li ul li ul li ul {
    margin:0;
    padding:0;
    position:absolute;
    visibility:hidden;
}
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*/
/*****************/
</style>
</head>
<body>
<div class="pWrapper">
    <ul class="pMenu">
        <ul>
            <li id="health" 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>
            <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>
            <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>
            <li id="dating"><a href="#">dating</a>
                <ul>
                    <li><a href="#">RealMatureSingles</a></li>
                    <li><a href="#">SeniorPeopleMeet</a></li>
                </ul>
            </li>
        </ul>
        <ul>
            <li id="education"><a href="#">education</a>
                <ul>
                    <li><a href="#">under construction</a></li>
                </ul>
            </li>
        </ul>
    </ul>
</div>
<!-- end Personal navigation menu-->
</body>
</html>
3

Wow, you are awesome, Paul O’B! I got the spacing right as you said, but I want to maintain the hover effect, and I’m trying to figure out how to keep the hover effect on the main list while the child menu is being explored.

4

Just add the rule in bold here at this exact point in the code:


ul.pMenu li a:hover {
    background:#F00;
    border:.33em ridge #C90;
    color:#FF0;
}
[B]ul.pMenu li:hover a{background:#f00}[/B]
5