通过居中拉伸页面宽度内的li元素宽度

Question

我有一个div元素，它有ul和li元素。 li元素在悬停时打开，但它向右扩展页面宽度，从而导致页面滚动。我希望它根据li元素的内容来居中。以下是参考代码

<div id="user-menu">
                    <nav id="signin" class="dropdown">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="~/img/blue-cart.gif" alt="View Cart" /><span id="uname"> View Cart (0) </span><img src="~/img/down-arrow.gif" alt="Sign In">
                                </a>
                                <ul style="width: auto;">
                                    <li style="float: right;">


                                        @{

                int totalAmount = 0;
                if (Session["Cart"] != null)
                {
                    var cart = (List<ShoppingProduct>)Session["Cart"];
                    if (cart.Count == 0)
                    {
                                <span>Cart is empty!</span>
                    }
                    else
                    {

                                <table border="1" style="text-align: center;">
                                    <thead>
                                        Cart Items
                                    </thead>
                                    <tr>
                                        <td>Name</td>
                                        <td>quantity</td>
                                        <td>Unit Price</td>
                                        <td>Total Price</td>
                                        <td>Action</td>
                                    </tr>

                                    @foreach (var c in cart)
                                    {
                                        <tr>
                                            <td>@c.productName</td>
                                            <td>@c.quantity</td>
                                            <td>@c.price</td>
                                            <td>@c.totalPrice</td>
                                            @{
                                        totalAmount += c.totalPrice;
                                            }
                                            <td>
                                                <a href="~/deleteFromCart.cshtml/?id=@c.id">remove from cart</a>
                                            </td>
                                            <td>@c</td>
                                        </tr>
                                    }

                                    <tr>
                                        <td>Total Amount is @totalAmount</td>
                                    </tr>
                                </table>
                    }

                }
                else
                {
                                <a href="~/login.cshtml" style="padding-left:2px;">Cart is empty!</a>
                }


                                        }
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                </div>

图片供参考：http://i59.tinypic.com/2wehvfl.jpg