Drop Down Menu not Aligning Correctly

HTML & CSS
1

For some reason I am stuck trying to figure out the reason the main list is showing up on my website, but the list is stuck at vertical, and i want this to be a horizontal menu.

These are my 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;
}

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

ul.pMenu li ul li a{
	display:none;
	width:auto;
	background:#CCC;
	border:.25em 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;
	position:relative;
}

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{
	display:none;
	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{
	display:none;
	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*/
/******************/

Now, my HTML ul and li’s.


<!-- begin Personal navigation menu -->
<div class="pWrapper">
<ul class="pMenu">
	<li id="health" style="width:8%;"><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-->
2

Normally, to make the list horizontal, you do something like

ul.pMenu li {
float: left;
}

But firstly, you need to restructure things. Those top-level links should all be list items within a top-level UL. E.g.

<ul>
  <li>health</li>
  <li>insurance</li>
  <li>shopping</li>
  <li>dating</li>
  <li>education</li>
</ul>

Then you nest the sub ULs within each top-level LI. E.g.

<ul>
  <li>health
    <ul>
      <li>link1</li>
      <li>link2</li>
      <li>link2</li>
    </ul>
  </li>
  <li>insurance</li>
  <li>shopping</li>
  <li>dating</li>
  <li>education</li>
</ul>
3

Hi,

The main problem is the html comments in the css file which are corrupting all the css rules. Only css comments can be in a css file /* these */.

Remove the html comments and your top level will display horizontally.


<!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>Untitled Document</title>
<style>
/********************/
/*PERSONAL NAV MENU**/
/********************/
body{background:#ccc}
.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;
}

#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%;
}

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;
}

ul.pMenu li ul{
    margin:0;
    padding:0;
    position:absolute;
    visibility:hidden;
}

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

ul.pMenu li ul li a{
    /*display:none;*/
    width:auto;
    background:#CCC;
    border:.25em 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;
    position:relative;
}

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

ul.pMenu li ul li ul{
    margin:0;
    padding:0;
    position:absolute;
    visibility:hidden;
    /*display:none;*/
    left:100%;
    top:auto;
    margin-top:-1.5em
}

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{
    /*display:none;*/
    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;
}

ul.pMenu li ul li ul li ul{
    left:100%;
    margin-top:-1.2em;
    margin-left:5px;
}

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

ul.pMenu li ul li ul li a{
    /*display:none;*/
    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">
        <li id="health" style="width:8%;"><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>
</body>
</html>

That menu seems unnecessarily complicated and uses display:none and visibility:hidden which is bad for screen readers and seo. Use the offscreen method for better accessibility.

4

Wow, you guys are all really amazing, and you have helped me to my next levels in CSS programming.

5