Here is the issue I am facing:
The sub-menu words on my website are too long and it is affecting the overall design. I need help to make the navigation look better. This is the CSS code I have been using:
/*navigation styles
*/
nav
{
background: url(../images/bg_footer.png);
}
nav#mainNav ul, nav#mainNav ul li
{
margin: 0px;
}
nav#mainNav ul li
{
display: inline;
float: left;
position: relative;
}
nav#mainNav ul li a
{
display: inline-block;
line-height: 49px;
padding: 0 14px;
color: rgb(245,233,227);
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.08em;
}
nav#mainNav ul li a:hover
{
border-bottom: none;
background: rgb(186,230,78);
cursor: pointer;
}
/*sub menu*/
nav#mainNav ul ul
{
position: absolute;
z-index: 999;
background: url(../images/bg_footer.png);
min-width: 100%;
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
nav#mainNav ul ul li
{
float: none;
display: list-item;
font-size: .9em;
width: 100%;
}
nav#mainNav ul ul li a
{
display: block;
line-height: 35px;
text-transform: none;
}
I've been trying to solve this problem for quite some time now. Any assistance would be greatly appreciated. Thank you!