Html/css dando uma margem e não afeta outras crianças

Question

Ele pessoal!

Tenho o próximo problema:

Recebi um menu com um elementos UL e LI, agora quando pairei acima de um dentro do meu li, quero aumentar a fonte, que tudo funciona, exceto os elementos diretamente do elemento que mudam um pouco para a direita para criar espaço, mas lá é espaço suficiente para eles ficarem parados.

Aqui está o meu código:

.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;
}

com :

<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>

Sei que as aulas na UL e IL não são necessárias, mas acabei de testar todas as coisas e não consigo fazer funcionar.

Answer 1

Você tem que dar o li uma largura explícita que será maior ou igual à largura do a Quando é expandido. Agora isso significaria que o seu li Não será capaz de crescer em largura de acordo com a duração de seu texto. Se é isso que você precisa também, não tenho solução para isso e a abro para as grandes pessoas da pilha.

http://jsfiddle.net/treetree/m5xpz/

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