将鼠标悬停在下拉链接上,子导航将显示在主导航链接上

时间:2011-03-29 06:57:41

标签: html css

当您将鼠标悬停在主导航链接上时,子导航会显示在主导航的顶部?只有在IE中才能在FireFox中正常工作

<div id="fw-mainnavwrap">
<div id="fw-nav-menu">
    <ul class="fw-nav-level-0">
    <li><a class="section fw-current-nav-link" href="/home.htm" >Home</a></li>
    <li><a class="section" href="/home.htm" >Home</a></li>
    <li><a class="section" href="/home.htm" >Home</a></li>
    <li><a class="section" href="/home.htm" >Home</a></li>
    <li><a class="section" href="/home.htm" >Home</a></li>
    <li><a class="section" href="/home.htm" >Home</a></li>
    <li><a class="section" href="/home.htm" >Home</a></li>
    <li><a class="section" href="" >Info</a>
    <ul class="fw-nav-level-1">
    <li><a class="section" href="/home.htm">Home</a></li>
    <li><a class="section" href="/home.htm">Home</a></li>
    <li><a class="section" href="/home.htm">Home</a></li>
    <li><a class="section" href="/home.htm">Home</a></li>
    </ul>
    </li>
    <li><a class="section" href="/home.htm">Home</a></li>
    </ul>
</div>
</div>

CSS:

/* Navigation */
#fw-mainnavwrap {background: #000; width: 800px; margin: auto; padding-top: 8px; border: #ffffff 1px solid;height: 25px;}
#fw-nav-menu {font-size: 13px; font-weight: bold; width: 645px; margin: auto;}
#fw-nav-menu ul {list-style:none; margin: 0; padding:0;}
#fw-nav-menu li {display:inline; padding:3px;}
#fw-nav-menu li a {color:#fff;}
#fw-nav-menu li a:hover {color:#DBDBDB;}
.fw-nav-level-1, .fw-nav-level-2, .section {background-color: #000; border: 1px solid #000000; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px;}

0 个答案:

没有答案