css - css - 在菜单中换行

Question

我继承了这个网站，有些 CSS 很乱。具体来说，这个新页面

http://www.businesseventssydney.com.au/

有一个蓝色的水平菜单栏。起初，一些菜单项的文本很长并且没有包含在菜单中。然而，经过一些工作和额外的 css，我设法让文本换行，例如，将鼠标悬停在“为什么选择悉尼”上，然后悬停在“悉尼为未来而成长”上。

CSS如下：

.second-level{
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    white-space: pre-wrap;       /* css-3 */
    /*word-wrap: break-word;*/       /* Internet Explorer 5.5+ */
    /*word-break: break-all;*/
    white-space: normal;
    -ms-word-break: break-all;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
    hyphens: auto;
}

菜单文本在 FF 和 Chrome 中的换行很好，即单词不会被拆分，整个单词会换行到下一行。但是，在 IE 中，单词在换行之前会被拆分。

奇怪的是，在另一个页面上有这个菜单的相同版本，它在所有浏览器中都能完美运行，不需要对它做任何事情。请参阅以下页面：

http://www.businesseventssydney.com.au/about-us/

谁能帮我解决这个问题？

Answer 1

而不是添加一大堆CSS，也许你可以删除：

#topnav {
white-space: nowrap;
}