CSS CSS下拉菜单 - 跨浏览器兼容

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS CSS下拉菜单 - 跨浏览器兼容相关的知识，希望对你有一定的参考价值。

CSS code
ul.drop, ul.drop li, ul.drop ul    { list-style: none; margin: 0; padding: 0; }ul.drop                            { position: relative; z-index: 597; float: left; }
ul.drop li                         { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; }
ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; cursor: default; }
ul.drop ul                         { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%; }
ul.drop ul li                      { float: none }
ul.drop ul ul                      { top: 1px; left: 99%; }
ul.drop li:hover > ul              { visibility: visible }

HTML code

<ul id="nav" class="drop">     <li><a href="./">Home</a></li>
     <li class="dir">About Us
          <ul>
               <li><a href="./">History</a></li>
               <li><a href="./">Our Vision</a></li>
               <li class="dir"><a href="./">The Team</a>
                    <ul>
                         <li><a href="./">Brigita</a></li>
                         <li><a href="./">John</a></li>
                         <li><a href="./">Michael</a></li>
                         <li><a href="./">Peter</a></li>
                         <li><a href="./">Sarah</a></li>
                    </ul>
               </li>
               <li><a href="./">Clients</a></li>
               <li><a href="./">Testimonials</a></li>
               <li><a href="./">Press</a></li>
               <li><a href="./">FAQs</a></li>
          </ul>
     </li>
     <li class="dir">Services
          <ul>
               <li><a href="./">Product Development</a></li>
               <li><a href="./">Delivery</a></li>
               <li><a href="./">Shop Online</a></li>
               <li><a href="./">Support</a></li>
               <li><a href="./">Training & Consulting</a></li>
          </ul>
     </li>
     <li class="dir">Products
          <ul>
               <li class="dir"><a href="./">New</a>
                    <ul>
                         <li><a href="./">Corporate Use</a></li>
                         <li><a href="./">Private Use</a></li>
                    </ul>
               </li>
               <li class="dir"><a href="./">Used</a>
                    <ul>
                         <li><a href="./">Corporate Use</a></li>
                         <li><a href="./">Private Use</a></li>
                    </ul>
               </li>
               <li><a href="./">Featured</a></li>
               <li><a href="./">Top Rated</a></li>
               <li><a href="./">Prices</a></li>
          </ul>
     </li>
     <li><a href="./">Gallery</a></li>
     <li><a href="./">Events</a></li>
     <li><a href="./">Careers</a></li>
     <li class="dir"><a href="./">Contact Us</a>
          <ul>
               <li><a href="./">Enquiry Form</a></li>
               <li><a href="./">Map & Driving Directions</a></li>
               <li><a href="./">Your Feedback</a></li>
          </ul>
     </li>
</ul>

以上是关于CSS CSS下拉菜单 - 跨浏览器兼容的主要内容，如果未能解决你的问题，请参考以下文章

css如何固定下拉菜单的位置

CSS 径向菜单

W3C 验证的 CSS 是不是自动意味着跨浏览器兼容性？

CSS 跨浏览器自动垂直/水平居中（Chrome和表格兼容）

什么是最有用的 media="print" 特定的、跨浏览器兼容的 CSS 属性？

网页中用DIV CSS控制下拉菜单怎么实现