Thread: Menu Button Sizing Issue

This is one of those annoying things when it comes to designing. Is there a width set to the menu at all? For example if you have it set to 100% or not set at all, that could cause issues.

Actually you have about twenty five html/css errors clustered around the navigation tags. If you install the html validation add-on to firefox and then look at the view page source it will show you where they are and suggest fixes.

If you can't get it fixed, someone on Fiverr will do it for you for $5. I had some xml issues on one of my blogs that I couldn't fix myself, so I hired someone on Fiverr and after 2 days it was perfect!

HTML Code:

<nav id="mainNav">
               <ul>
	             <li><a href="#">Link 1</a></li>
	             <li><a href="#">Link 2</a></li>
	             <li><a href="#">Link 3</a></li>
                     <li><a href="#">Link 4</a></li>
                     <li><a href="#">Link 5</a></li>
		     <li><a href="#">Link 6</a>
			  <ul>
				<li><a href="#">Drpdown Link 1</a></li>
				<li><a href="#">Drpdown Link 2</a></li>
				<li><a href="#">Drpdown Link 3</a></li>
				<li><a href="#">Drpdown Link 4</a></li>
			 </ul>
		     </li>
                     <li><a href="#">Link 7</a></li>
	             <li><a href="#">Link 8</a></li>
                     <li><a href="#">Link 9</a></li>
		</ul>
	</nav><!-- end mainNav -->

CSS

Code:

nav#mainNav a {
	color:#FFF;
}
nav#mainNav {
	width: 965px;
	border:none;
	border:0px;
	margin-left:69px;
	padding:0px;
	font-size:1em;
	font-weight:bold;
}
nav#mainNav ul {
	height:35px;
	list-style:none;
	margin:0;
	padding:0;
}
nav#mainNav li {
	float:left;
	padding:0px;
}
nav#mainNav li a {
	z-index:50;
	background:#000;
	color:#FFF;
	display:block;
	font-weight:normal;
	line-height:35px;
	margin:0px;
	padding:0px 15px;
	text-align:center;
	text-decoration:none;
}
nav#mainNav ul li:hover a {
	background:#c6ddea;
	color:#5395f1;
	text-decoration:none;
}
nav#mainNav li ul {
	background:#000;
	display:none;
	height:auto;
	padding:0px;
	margin:0px;
	border:0px;
	position:absolute;
	width:225px;
	z-index:200;
}
nav#mainNav li:hover ul {
	display:block;
}
nav#mainNav li li {
	display:block;
	float:none;
	margin:0px;
	padding:0px;
	width:225px;
	border-bottom:#c6ddea inset thin;
}
nav#mainNav li:hover li a {
	color:#FFF;
	background:none;		
}
nav#mainNav li ul a {
	display:block;
	height:35px;
	font-size:1em;
	font-style:normal;
	margin:0px;
	padding:0px 10px 0px 15px;
	text-align:left;
}
nav#mainNav li ul a:hover, nav#mainNav li ul li:hover a {
	background:#c6ddea;
	border:0px;
	color:#5395f1;
	text-decoration:none;
}