CSS: Why are my submenu options not 100% wide?

OK I have been looking at this for long enough.

Please see this fiddle at <768px wide.  Click Menu, then click About us+, and you should see the issue.  The underlying ul, or li, or a, is not 100% wide and I can't see how to fix it, everything seems set to 100% when i inspect the elements.

https://jsfiddle.net/a0zjjde8/

Cheers,
  Col
LVL 3
colinspursAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
Look at this style
Line 153
nav > ul > li:hover > ul {
  display: block;
  width: 11.1111%; /* <== LOOK */
}

Open in new window

That is what is causing your problem
1
 
Amita SinghConnect With a Mentor Web DeveloperCommented:
Try This

nav > ul > li:hover > ul{
	 background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
	 box-shadow: none;
}
nav > ul > li:hover > ul{
	width:100%
}

Open in new window

1
 
colinspursAuthor Commented:
Thanks both.  JulianH was first but I like the styling tip from Amita.
0
 
Julian HansenCommented:
You are welcome.
0
 
Amita SinghWeb DeveloperCommented:
Thank You
0
All Courses

From novice to tech pro — start learning today.