Блог

Хорошо, я создаю выпадающее меню CSS, похожее на то, что на сайте ESPN. Все идет отлично, но когда я помещаю ссылку в выпадающий div, она прерывается. В firefox выпадающий div теперь больше не будет отображаться, а в проводнике он появится, но все элементы списка со ссылкой в нем исчезнут. Есть идеи / предложения?

Кстати, я здесь новичок…вечно искал исправления в stackoverflow, но до сих пор мне никогда не приходилось задавать вопрос самому. Заранее спасибо!

Вот HTML, обратите внимание на одну ссылку в списке. Без каких-либо ссылок в subnav div все работает идеально. Со ссылкой он прерывается.

     <ul id="topnav">
    <li><a class="top" href="#">
        <div class="button">Home</div>
        </a>
    </li>
    <li><a class="top" href="#">
        <div class="button">Programs</div>
        <div class="subnav">
            <ul class="mainlinks">
                <li><a href="#">Recreational</a></li>
                <li>TESTING</li>
                <li>TESTING</li>
                <li>TESTING</li>
                <li>TESTING</li>
            </ul>
        </div>
        </a>
    </li>
</ul>
 

И вот CSS:

 #topnav {
width: 800px; height: 30px;
margin: 0 auto; padding: 0 0 0 160px;
list-style: none;
}
#topnav li {
position: relative;
}
#topnav li a.top {
color: #FFFFFF;
font-size: 0.75em;
font-weight: bold;
text-decoration: none;
}
#topnav li a.top .button {
position: relative;
z-index: 998;
display: inline;
float: left;
height: 18px;
padding: 6px 30px;
}
#topnav li a.top:hover {}
#topnav li a.top:hover .button {
color: #000000;
background-color: #FFFFFF;
-moz-box-shadow: 0 0 10px -1px #000000;
-webkit-box-shadow: 0 0 10px -1px #000000;
box-shadow: 0 0 10px -1px #000000;
}
#topnav li .subnav {
display: none;
position: absolute;
z-index: 999;
width: 960px;
top: 30px; left: -160px;
background-color: #FFFFFF;
color: #000000;
border-bottom: solid 5px #990000;
}
#topnav li a.top:hover .subnav {
display: block;
}
#topnav li .subnav ul.mainlinks {
width: 150px;
list-style: none;
padding: 20px;
}
 

Я подумал, что это может иметь какое-то отношение к основным ссылкам в topnav, поэтому я добавил к ним класс «top», но это не помогло. Первоначально я просто вложил его в

 #topnav li a .subnav
 

Я не думаю, что это проблема, но первое, что я вижу, это то, что у вас есть тег привязки, обернутый вокруг двух разделов с вашим подменю

 <li><a class="top" href="#">
    <div class="button">Programs</div>
    <div class="subnav">
        <ul class="mainlinks">
            <li><a href="#">Recreational</a></li>
            <li>TESTING</li>
            <li>TESTING</li>
            <li>TESTING</li>
            <li>TESTING</li>
        </ul>
    </div>
    </a>
</li>

<li><a class="top" href="#">
    <div class="button">Programs</div>
    </a> ***************************** MOVED CLOSING TAG HERE
    <div class="subnav">
        <ul class="mainlinks">
            <li><a href="#">Recreational</a></li>
            <li>TESTING</li>
            <li>TESTING</li>
            <li>TESTING</li>
            <li>TESTING</li>
        </ul>
    </div>
</li>
 

что касается проблемы, я бы сказал, дважды проверьте все стили a и убедитесь, что нет ничего, что могло бы конфликтовать.