Я разработал меню CSS, и оно отлично работало во всех браузерах в моем тестировании (чистый HTML / CSS). Когда мы принесли код в нашу среду разработки, которая работает на cakePHP, мы стали иногда видеть ошибку меню в Firefox (3.5.2). Это не происходит ни в каком другом браузере. Я проверил источник, когда ошибка возникает, и это то, как она выглядит (другой блок li ниже, как это должно выглядеть):

<div class="nav1">
<ul id="dropnav">
    <li id="dashboard">
        <a href="/businesses/dashboard"/>
        <div>
            <span class="white caps">
                <a href="/businesses/dashboard">Dashboard</a>
            </span>
            <a href="/businesses/dashboard">
                <br/>
                <small>At-a-glance view of all your stuff</small>
            </a>
        </div>
    </li>
    <li id="listing" class="active">
        <a href="/businesses/edit_profile">
        <div>
            <span class="white caps">Listing</span>
            <br/>
            <small>View and edit your listing</small>
        </div>
        </a>
    </li>
</ul></div>

Вот соответствующий CSS:

span.caps { text-transform:uppercase; }
.white{color:#fff;}
.nav1 { background: url('../images/gradients/nav1.gif') repeat-x; height:50px; }
.nav1 #dropnav { list-style-type:none; margin:0; height:50px;float:left;line-height:1; }
.nav1 #dropnav li { padding:8px 10px 7px 10px; border-left: 1px solid #3ba2da; border-right: 1px solid #1f74a3;float:left;position:relative; }
.nav1 #dropnav li div { position:relative; float:left; padding-top:5px; }
.nav1 #dropnav li a { padding:0 0 6px 40px; float:left; text-decoration:none;}
.nav1 #dropnav li:hover, .nav1 #dropnav li.active { background: #3b3b3b; }
.nav1 #dropnav li#first:hover, .nav1 ul li#last:hover {background:none;}
.nav1 #dropnav li:hover small, .nav1 #dropnav li.active small{ color:#fff; }
.nav1 small { line-height:1.2em; color:#111; }
.nav1 span { font-weight:bold; }
.nav1 #dashboard a{ background: url('../images/icons/nav134.png') no-repeat 0 -102px; }
.nav1 #listing a{ background: url('../images/icons/nav134.png') no-repeat 0 -68px; }
.nav1 #messages a{ background: url('../images/icons/nav134.png') no-repeat 0 -34px; }
.nav1 #tools a{ background: url('../images/icons/nav134.png') no-repeat 0 0; }

Я знаю, что может быть много проблем, но я пытаюсь сузить это.