-1

だから私はCSS / HTML / PHPを使って構築されたウェブサイトを持っています

ヘッダーにはナビゲーション バーが含まれています。ここ数時間、ナビゲーション バーを変更して見栄えを良くしています。サイドバーが台無しになった後、思い通りになりました。それを修正する必要がありましたが、ドロップダウンメニューが表示されなくなりました。サイトはこちら サイトリンク

これが私が使用しているコードです

` 

<div id="background-color" align="center"> 

<div class="Menu">
    <ul id="navbar">
        <li><a href="index.php" class="MenuButton"><span>Home</span></a></li> 
        <li><a href="theteam.php" class="MenuButton"><span>About Us</span></a>
            <ul>
                <li><a href="theteam.php">The Team</a></li>
                <li><a href="awards.php">Awards</a></li>
                <li><a href="blog.php">Blog</a></li>
                <li><a href="demo.php">Demonstrations</a></li>
                <li><a href="robots.php">Robots</a></li>
            </ul>
        </li>

        <li><a href="FIRST.php" class="MenuButton"><span>FIRST</span></a>
            <ul>
                <li><a href="FIRST.php">What is FIRST</a></li>
                <li><a href="firsthistory.php">FIRST History</a>           </li>
                <li><a href="competitions.php">Competitions</a> </li>
            </ul>
        </li> 
        <li><a href="sponsors.php" class="MenuButton"><span>Sponsors</span></a>
            <ul>
                <li><a href="sponsors.php">Our Sponsors</a></li>
                <li><a href="become_a_sponsor.php">Become A  Sponsor</a></li>
                <li><a href="Donate.php">Donate</a></li>
                <li><a href="volunteer.php">Volunteer</a></li>
            </ul>
        </li>
        <li><a href="resources.php" class="MenuButton"><span>Resources</span></a></li>
        <li><a href="contact.php" class="MenuButton"><span>Contact Us</span></a>
            <ul>
                <li><a href="calendar.php">Calendar</a></li>
                <li><a href="location.php">Our Location</a></li>
                <li><a href="contact.php">Feedback</a></li>
            </ul>
        </li>
    </ul>
</div>

 </div>  

    </td>
 </tr>
</table>
<!-- End Navigation -->`

CSS コード

  #navbar ul {
 font-family: Arial, Verdana;
 font-size: 14px;
 margin: 0;
 padding: 0;
 list-style: none;
}
  #navbar ul li {
 display: block;
 position: relative;
 float: center;
}
  #navbar li ul { display: none; }
  #navbar ul li a {
 display: block;
 text-decoration: none;
 color: #FFFFFF;
 border-top: 1px solid #FFFFFF;
 padding: 5px 15px 5px 15px;
 background: radial-gradient(ellipse at center, rgba(76,76,76,1) 0%,rgba(89,89,89,1)   12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C */;
  margin-left: 1px;
  white-space: nowrap;
  }
#navbar ul li a:hover { background:transparent  url('images/structure/ActiveMenuButtonAnchor.png') no-repeat top left; }
#navbar li:hover 
#navbar ul {
  display: block;
  position: absolute;
}
#navbar li:hover li {
  float: none;
  font-size: 11px;
}
#navbar li:hover li a:hover { background: radial-gradient(ellipse at center, rgba(19,19,19,1) 0%,rgba(28,28,28,1) 9%,rgba(43,43,43,1) 24%,rgba(17,17,17,1) 40%,rgba(0,0,0,1) 49%,rgba(44,44,44,1) 50%,rgba(71,71,71,1) 61%,rgba(102,102,102,1) 75%,rgba(89,89,89,1) 88%,rgba(76,76,76,1) 100%); /* W3C */ }

何かご意見は？

4

1 に答える 1

0

サブメニューが設定されてdisplay: noneいますが、それをオーバーライドするメカニズムはありません。これらのスタイルを追加すると、動作するはずです:

#navbar li {position: relative;}

#navbar li ul {position: absolute; left: -9999px; display: block;}

#navbar li:hover ul {left: 0;}
于 2013-05-15T03:28:19.333 に答える