HTML/CSS - problems with auto width

Question

At the moment, I've just been manually defining the widths of my elements when hovered (view-source from this site: http://plotme.worldcretornica.com )

I've been trying a lot to make them auto width, like they would with this fiddle

Heres what I've been trying to do (it uses font-awesome), HTML:

            <nav>
              <ul>
                <li>
                    <a href="http://www.spigotmc.org/resources/plotme-official.2131/" target="_blank" class="icon fa fa-download" id="hover"><span class="description">Download portal</span></a>
                </li>
                <li>
                    <a href="http://www.spigotmc.org/threads/plotme-official.37327/" target="_blank" class="icon fa fa-comments" id="hover"><span class="description">Join the discussion at Spigot</span></a>
                </li>
                <li>
                    <a href="about.html" target="_blank" class="icon fa fa-info" id="hover"><span class="description">Read what PlotMe is about</span></a>
                </li>
                <li>
                    <a href="issues.html" target="_blank" class="icon fa fa-question" id="hover"><span class="description">Report an issue or request a new feature</span></a>
                </li>
                <li>
                    <a href="cmdsandperms.html" target="_blank" class="icon fa fa-list" id="hover"><span class="description">Commands and Permissions</span></a>
                </li>
                <li>
                    <a href="configurations.html" target="_blank" class="icon fa fa-file-code-o" id="hover"><span class="description">Configurations explained</span></a>
                </li>
                <li>
                    <a href="how-to-use.html" target="_blank" class="icon fa fa-server" id="hover"><span class="description">How to setup/upgrade PlotMe</span></a>
                </li>
                <li>
                    <a href="http://mcstats.org/plugin/PlotMe" target="_blank" class="icon fa fa-bar-chart" id="hover"><span class="description">PlotMe Stats</span></a>
                </li>
                <li>
                    <a href="https://github.com/WorldCretornica/PlotMe-Core" target="_blank" class="icon fa fa-github" id="hover"><span class="description">Fork me on GitHub!</span></a>
                </li>
              </ul>
            </nav>

CSS:

#hover {
    display: none;
}

#hover:hover span {
    display: table;
    margin: 0px auto;
    border-radius: 5px;
    padding: 5px 10px 5px 10px;
    background: #f0f0f0 no-repeat 100% 5%;
    margin-top: 15px;
    position: absolute;
    top: 85px;
    text-decoration: none;
    color: gray;
}

Anyone have a suggestion on how I make the spans auto width?
I'm trying to learn, so please be gentle. Thanks!

Answer 1

Add this to your span

#hover:hover span {
    white-space: nowrap;
    display: inline-block;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}

This will make the span auto center in the holder "a".

Note that for this to work you need to have the span with position absolute and the holder "a" with position relative.

Answer 2

You can ask the browser to prevent the white space to wrap as next line.

#hover:hover span {
  white-space: nowrap;
}

Output:

Answer 3

try display:block; , padding:any_value; and overflow:hidden; or wrp this in a invisible wide element and use text-align:center (for centring pourposes)