Cool,
Now that I’m happy with the functionality of this drop down menu so far, how can I get the anchor tags inside the drop down div to lay the text out nicely across the space? The text that says “under construction” right now is very bunched up.
dropdownmenus.css
@charset "utf-8";
/* Drop Down Menus */
/********************/
/*PERSONAL NAV MENU**/
/********************/
#pMenu{
padding-top:2em;
padding-left:100px;
padding-bottom:15px;
background:url(pMenuBG.gif) no-repeat scroll 50% 15px transparent;
height:55px;
}
#pMenu a{
text-decoration:none;
}
#pMenu li{
list-style:none;
float:left;
margin-right:1em;
position:relative;
}
#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:16px;
/*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:-999em;
position:absolute;
margin-top:.4em;
width:150px;
border:.1em solid #003;
/*second gradient*/
background: rgb(96,108,136); /* Old browsers */
background: -moz-linear-gradient(top, rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(100%,rgba(63,76,107,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* W3C */
}
#pMenu li:hover div, #pMenu a:focus+div{
left:0;
}
#pMenu div a{
text-decoration:none;
color:#0C0;
text-shadow:2px 2px 2px #000;
padding:2%;
background:none;
filter:none;
border:none;
font-size:12px;
display:inline;
}
#pMenu div a:hover, #pMenu div a:focus, #pMenu div a:active{
color:#0F0;
background:none;
filter:none;
border:none;
text-decoration:underline;
}
#pMenu h2{
text-align:left;
font-size:14px;
text-shadow:1px 1px 1px #000;
margin-top:.3em;
margin-bottom:.1em;
padding-left:.2em;
padding-top:.1em;
}
#pMenu h3{
text-align:left;
text-shadow: 1px 1px 1px #000;
color:#999;
font-style:italic;
font-size:.8em;
margin-bottom:.1em;
margin-top:.1em;
padding-top:.1em;
padding-left:25px;
}
/******************/
/*End Personal Nav*/
/*****************/
and html
<!-- begin Personal navigation menu -->
<ul id="pMenu">
<li><a href="http://www.atlantareviewgroup.com/health.html">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.html">insurance</a>
<div>
<h2>home 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.html">general</a>
<div>
<h2>electronics</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2>style & 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.html">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.html">education</a>
<div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</div>
</li>
</ul>
<!-- end Personal navigation menu-->
Any ideas why the neon green anchor tag text appears bunched up at, Atlanta Review Group™