CSS Drop Down DIV Menu ... почему мои ссылки ломают его? - PullRequest
Новая
       6

CSS Drop Down DIV Menu ... почему мои ссылки ломают его?

1 голос
/ 02 ноября 2011

Хорошо, я создаю раскрывающееся меню CSS, подобное тому, которое есть на сайте ESPN.Все идет отлично, но когда я помещаю ссылку в выпадающий раздел, она ломается.В 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, поэтому я добавил "верхний класс им, но это не помогло.Первоначально я просто вложил его в 

#topnav li a .subnav

1 Ответ

1 голос
/ 02 ноября 2011

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

<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 и убедитесь, что нет ничего, что могло бы конфликтовать.

...