HTML/CSS - unwanted Wordwrap in ul, li

Question

I'm working on a homepage and I've a problem with my menu-bar!

I made an unordered List with some Items and the CSS-Tag "display: inline-block"! Nevertheless, if I hover one of the Items, the last item jumps into the next line!

Info: The Problem does only occur in Dreamweavers built-in preview browser! If I open the Site in Firefox, it works perfectly!

You can see the concept on http://test.guger.bplaced.net!

Can anybody help me?

Thanks!

The HTML-Code:

<nav id="cNav">
    <table class="tNav">
        <tr>
            <td>
                <ul>
                    <li><a href="/">G</a></li>
                    <li><a href="/">Home</a></li>
                    <li><a href="">Software</a></li>
                    <li><a href="about/">&Uuml;ber</a></li>
                </ul>
            </td>
        </tr>
    </table>
</nav>

The CSS-Code:

#cNav {
    background-color: rgb(5, 90, 160);

    margin: 0;
    padding: 0;

    width: 100%;
}

.tNav {
    margin-left: auto;
    margin-right: auto;

    font-weight: bold;
    font-size: 22pt;

    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

.tNav ul {
    padding: 0;
    margin-top: 0.4em;
    margin-bottom: 0.4em;

    margin-left: 0;
    margin-right: 0;

    /*If I write this tag here, it works!*/
    /*width: 101%;*/
}

.tNav ul li {
    display: inline-block;

    padding-left: 2em;
    padding-right: 2em;

    padding-top: 0;
    padding-bottom: 0;
}

    .tNav ul li a {
        outline: 0;

        color: white;

        position: relative;

        text-decoration: none;

        transition: color 0.3s;
    }

    .tNav ul li a::after {
        position: absolute;

        top: 100%;

        left: 0;

        width: 100%;

        height: 4px;

        background: white;

        content: '';

        opacity: 0;

        -webkit-transition: background 0.3s, opacity 0.3s, -webkit-transform 0.3s;

        -moz-transition: background 0.3s, opacity 0.3s, -moz-transform 0.3s;

        transition: background 0.3s, opacity 0.3s, transform 0.3s;

        -webkit-transform: translateY(10px);

        -moz-transform: translateY(10px);

        transform: translateY(10px);

        margin: 0;
    }

    .tNav ul li a:hover {
        color: #7297EC;
    }

    .tNav ul li a:hover::after {    
        opacity: 1;
        background: #7297EC;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        transform: translateY(0px);
    }

A Screenshot of the problem:

Answer 1

将您的div放入ul> li并使用CSS来完成创建响应列的工作：) https://css-tricks.com/guide-sensitive-friendly-css-columns/