私は新しいサイトに取り組んでおり、私のクライアントは試して維持したいメニュー項目の移行を行っています。問題は、メニューが 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>