Extra space occurring when hovering link in navigation bar - html

Question

HTML:
<ul>
<li>Home</li>
<li>Products
<ul>Power tools</ul>
<ul>Decorating</ul>
<ul>Plumbing</ul>
<ul>Electrical</ul>
<ul>Lighting</ul>
<ul>Tools</ul>
<ul>More products...</ul>
</li>
<li>Service
<ul>Handy man</ul>
<ul>Key cutting</ul>
</li>
<li>Contact us</li>
<li>About us</li>
<li>More...</li>
</ul>
CSS:
li ul {
display:none;
}
li:hover ul {
display:block;
}
ul li {
list-style:none;
}
ul {
padding:0px;
margin:0px;
}
li {
float:left;
position:relative;
}
ul{
position: relative;
}
ul li a{
display:block;
padding: 25px;
background-color:white;
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* W3C */
text-decoration:none;
color: black;
font-family:arial bold;
border-bottom: 4px solid rgb(140, 0, 0);
}
ul li ul a {
display:block;
padding: 25px;
background-color:rgb(140,0,0);
background:rgb(140,0,0);
color: white;
font-family:arial bold;
border-bottom: 0px solid rgb(140, 0, 0);
}
JSFIDDLE: http://jsfiddle.net/r6Mzp/6/
How can I remove the extra space which is occurring when hovering the main navigation bar link?
What i mean is when i hover a link in the navigation bar the drop down will show but the link that was originally hovered has got slightly bigger from the right. How can i stop the original link from getting bigger from the right? HELP!

Answer 1

The sub menu has more characters than the main navigation links which is creating that effect. In order to remove the increase in width, you need to limit the width of the navigation links. So here is what you need to modify:
ul li ul a {
display:block;
/*add this width element*/
width:64px;
padding: 25px;
background-color:rgb(140,0,0);
background:rgb(140,0,0);
color: white;
font-family:arial bold;
border-bottom: 0px solid rgb(140, 0, 0);
}
Fiddle
UPDATE:
Instead of changing the width of the above element as I had suggested, you can adjust the width on ul li like this:
ul li {
list-style:none;
width:150px;
}
UPDATED FIDDLE
FINAL UPDATE:
Please find the updated css. I think now it wont be possible without altering any width.
ul li ul a {
display:block;
background-color:rgb(140,0,0);
background:rgb(140,0,0);
color: white;
width:60px;
word-wrap:break-word;
font-family:arial bold;
border-bottom: 0px solid rgb(140, 0, 0);
}
FIDDLE FOR SAME

Answer 2

I am on my phone, and can't comment cause of my rep. That apart, make your ul(sub menu) position absolute and is patent element position relative. should do the trick.

Answer 3

Provide the width of ul li css element as below :
ul li {
list-style:none;
width:125px;
}
or you may give the width for each li (ul li a) element. that will also works fine.
JSFIDDLE

Answer 4

The size of the child objects are larger than the parents.
Increase the size to 35 in the padding.
ul li a{
...
padding: 35px;
..
}

Answer 5

ul li {
list-style:none;
width: 15%;
}