我正在开发一个新站点,我的客户对他想尝试保留的菜单项进行了转换。问题是菜单是内置在 Flash 中的(可以在这里看到)。如何使用纯 CSS 复制这种运动?虽然我可能只使用 Javascript 来做到这一点,但如果可能的话,我想用纯 CSS 来做到这一点。
请注意,文本移动不是必需的,但如果也可以这样做,那就太好了。这是我目前拥有的列表的 HTML。
<div class="menu-main-container">
<ul id="menu-main" class="top_nav inline unstyled">
<li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item active page_item page-item-59 current_page_item menu-item-61"><a href="http://ali.moberemk.com/">Home</a></li>
<li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="http://ali.moberemk.com/buyers/">Buyers</a></li>
<li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51"><a href="http://ali.moberemk.com/sellers/">Sellers</a></li>
<li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="http://ali.moberemk.com/about-me/">About Me</a>
<ul class="sub-menu">
<li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57"><a href="http://ali.moberemk.com/testimonials/">Testimonials</a></li>
</ul>
</li>
<li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="http://ali.moberemk.com/listings/">Listings</a></li>
<li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-72"><a href="http://ali.moberemk.com/contact-me/">Contact Me</a></li>
</ul>
</div>