在wordpress菜单后定位UL列表

Question

在wordpress中我已经能够修改菜单以显示在左侧，但我有社交图标（facebook，twitter..etc），我想在导航菜单的末尾显示。现在我做的是修改我的header.php文件并插入UL列表，并在菜单底部显示这些图标，但是你可以看到它重叠。那么这里发生了什么......以下是我的代码......

<nav id="access" role="navigation">
    <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
    <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
    <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
    <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
    <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
    <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #access -->
<ul class="social">
    <li><a class="youtubeicon" href="#LinkURL">youtube</a></li>
    <li><a class="facebook" href="#LinkURL">facebook</a></li>
    <li><a class="twitter" href="#LinkURL">twitter</a></li>
    <li><a class="pinterest" href="#LinkURL">pinterest</a></li>
    <li><a class="favorite" href="#LinkURL">favorite</a></li>
</ul>

CSS：

ul.social{margin:10px 0 0 25px;}
ul.social li{float:left; padding:2px;}

Answer 1

使用<div style="clear:both"></div>

</nav><!-- #access -->
<div style="clear:both;"></div> <--here 
<ul class="social">