Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2016-10-20
5
Medium Priority
?
60 Views
Last Modified: 2016-10-20
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
0
Comment
Question by:colinspurs
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 59

Accepted Solution

by:
Julian Hansen earned 1680 total points
ID: 41851819
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
 
LVL 2

Assisted Solution

by:Amita Singh
Amita Singh earned 320 total points
ID: 41851821
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
 
LVL 3

Author Closing Comment

by:colinspurs
ID: 41851884
Thanks both.  JulianH was first but I like the styling tip from Amita.
0
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 41851920
You are welcome.
0
 
LVL 2

Expert Comment

by:Amita Singh
ID: 41851926
Thank You
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses

721 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question