0

HTML5 サイト用に作成しているドロップ ダウン メニューがあり、コーディングが正しい (またはそう思う) のですが、ドロップ ダウンがトップ レベルの要素だけに表示されません。

コードをスキャンしましたが、私の知る限り、コードは問題ないようです。以下のコードを配置して、エラーを見つけられるかどうかを確認します。

<navigation id="NavigationLink" style="" class="navigationStyle">
        <section class="menu">
        <ul>
        <li><a class="left_nosub" href="default.html">Home</a></li>
        <li><a class="center_hassub" href="products.html">Products</a>
        <ul>
            <li><a href="graphics.html">Graphic Design</a></li>
            <li><a href="web.html">Web Design</a></li>
            <li><a href="cms.html">Content Management Systems</a></li>
            <li><a href="social-media.html">Social Media Design</a></li>
        </ul>
        </li>
        <li><a class="center_hassub" href="#">News</a>
        <ul>
            <li><a href="#">Current Projects</a></li>
            <li><a href="#">Day-To-Day-Stuff</a></li>
        </ul>
        </li>
        <li><a class="right_nosub" href="#">Contact Us</a></li>
        </ul>
        </section>


.menu {
font-family: Arial, Helvetica, sans-serif;
position: relative;
font-size: 11px;
margin: 0;
z-index: 1000;
}

.menu ul li a {
display: block;
text-decoration: none;
color: #f0f0f0;
font-weight: bold;
width: 80px;
height: 42px;
text-align: center;
border-bottom: 0;
background-image: url(images/center.png);
line-height: 48px;
font-size: 11px;
overflow: hidden;
padding-left: 1px;
 }

.menu .left_nosub {
background-image: url(images/left.png);
padding-left: 1px;
margin-right: -1px;}

.menu .right_nosub {
background-image: url(images/right.png);        
}

.menu ul {
padding: 0;
margin: 0;
list-style: none;
}

.menu ul li {
float: left;
position: relative;
}

.menu ul li ul {
display: none;
}

.menu ul li:hover a {
color: #000;
background: url(images/center_hassub.png);
}

.menu ul li:hover ul li a.center_hassub {
background: #6a3;
color: #000;
}

.menu ul li:hover ul li:hover a.center_hassub {
background: #6fc;
color: #000;
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover .left_nosub {
color: #000;
background: url(images/left_nosub.png);
}

.menu ul li:hover .right_hassub {
color:#000;
background: url(images/right_hassub.png);
}

.menu ul li:hover .right_nosub {
color: #000;
background: url(images/right_nosub.png);
}

.menu ul li:hover ul li a {
background-image: none;
display: block;
height: 28px;
line-height: 26px;
color: #000;
width: 142px;
text-align: left;
margin: 0;
padding: 0 0 0 11px;
font-weight: normal; 
}

.menu ul li:hover ul{
margin: 0 0 0 3px;
padding: 0;
background-image: url(images/dropdown.png);
background-repeat: no-repeat;
background-position: bottom left;
}

.menu ul li:hover ul li a:hover {
color: #000 !important;
background-image: url(images/sub_hover.png);
}

.menu ul li:hover ul li:hover ul {
display: block;
position: absolute;
left: 105px;
top: 0;
}

.menu ul li:hover ul li:hover ul.left {
left: -105px;
}

.menu ul li:hover ul .sub_active {
background-image: url(images/sub_active.png);
margin-right: 1px;
}
4

1 に答える 1

0

次のクラスを変更します

.menu ul li:hover ul{
margin: 0 0 0 3px;
padding: 0;
background-image: url(images/dropdown.png);
background-repeat: no-repeat;
background-position: bottom left;
display:block;
}
于 2013-02-26T13:05:58.983 に答える