HTML/CSS giving li a margin and dont effect other childs

Question

He guys!

Got the next problem:

Got a menu with a UL and LI elements, now when I hover above a inside my LI I want to increase the font, that all works but the elements right from the changing element all move a bit to the right to create space, but there is space enough for them to stand still.

here is my code:

.unlistedList {
    position:relative;
    list-style:none;
    min-width:100%;
}

.listedLink {
    position:relative;
    margin: 5px 0 0 0;
    padding: 0 0 0 5em;
    display: inline-table;
    float:left;
}

.linkA {
    font-size:12px;
    text-decoration: none;
    color: #146432;
    font-weight:bold;
    text-transform:uppercase;
    transition: all  0.5s;
    -webkit-transition: all 0.5s;
    -o-transition:all 0.5s;
}

.linkA:hover {
    text-decoration: underline;
    font-size:14px;
    color:#20a150;
}

with :

<ul class="unlistedList">
  <li class="listedLink"><a href="#" class="linkA">Home</a></li>
  <li class="listedLink"><a href="#" class="linkA">About Us</a></li>
  <li class="listedLink"><a href="#" class="linkA">Portfolio</a></li>
  <li class="listedLink"><a href="#" class="linkA">Services</a></li>
  <li class="listedLink"><a href="#" class="linkA">Blog</a></li>
  <li class="listedLink"><a href="#" class="linkA">Contact Us</a></li>

I know the classes at ul and il are not needed but I just tested all things and I cant get it to work.

Answer 1

You have to give the li an explicit width that will be greater than or equal to the width of the a when it's expanded. Now this would mean that your li won't be able to grow in width according to the length of its text. If that's what you need as well, I have no solution for that and I open it up to the great people of Stack.

http://jsfiddle.net/TreeTree/M5XPZ/

.listedLink {
    position:relative;
    margin: 5px 0 0 0;
    width:100px;
    display: inline-table;
    float:left;
    border:1px solid black;
}