使用CSS根据设备/浏览器窗口宽度更改asp.net菜单方向

Question

我试图做的是一些基础响应实践：我正在开发一个Web应用程序，而客户端对控件（asp菜单/面板）如何混合以及混淆时感到不满意更改浏览器窗口高度/宽度（最小化/最大化）。我附上了一些我正在处理的情况的照片。因为我不是网页设计师，所以我发布了一些想法/代码示例的条目。

现在调整大小时，事情看起来很奇怪！

是的，我知道我需要使用媒体查询，但事情是在尝试实施它们以改变菜单方向时，我无法弄清楚（请参阅图片）

我想我需要在这里发布一些基本代码以获得更好的方法。

div.menu {
    padding: 8px 6px 8px 8px;
    width: 90%;
}

    div.menu ul {
        list-style: none;
        margin: 0px;
        padding: 5px 3px;
        width: auto;
    }

        div.menu ul li a, div.menu ul li a:visited {
            background-color: #465c71;
            border: 1px #465c71 solid;
            color: #dde4ec;
            display: block;
            line-height: 1.35em;
            padding: 4px 20px;
            text-decoration: none;
            white-space: nowrap;
        }

            div.menu ul li a:hover {
                background-color: #bfcbd6;
                color: #465c71;
                text-decoration: none;
            }

            div.menu ul li a:active {
                background-color: #465c71;
                color: #cfdbe6;
                text-decoration: none;
            }

感谢您的阅读。

编辑：

<div id="content">
                <asp:Menu ID="MenuPortail" runat="server" CssClass="menu" EnableViewState="false"
                    IncludeStyleBlock="true" Orientation="Horizontal">
                    <StaticSelectedStyle BackColor="SlateGray" BorderWidth="1px" BorderColor="SlateGray" />
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="1   -  Choisir Langue        > " Value="0" />
                        <asp:MenuItem NavigateUrl="#" Text="2   -  Authentification        > " Value="1" />
                        <asp:MenuItem NavigateUrl="#" Text="3   -  Remplir Formulaire        > " Value="2" />
                        <asp:MenuItem NavigateUrl="#" Text="4   -  Résumé        > " Value="3" />
                        <asp:MenuItem NavigateUrl="#" Text="5   -  Confirmation       >  " Value="4" />
                    </Items>
                </asp:Menu>
                <asp:ContentPlaceHolder ID="MainContent" runat="server" />
            </div>

EDIT2：

渲染加价：

＆LT;

style type="text/css">
    /* <![CDATA[ */
    #MenuPortail img.icon { border-style:none;vertical-align:middle; }
    #MenuPortail img.separator { border-style:none;display:block; }
    #MenuPortail img.horizontal-separator { border-style:none;vertical-align:middle; }
    #MenuPortail ul { list-style:none;margin:0;padding:0;width:auto; }
    #MenuPortail ul.dynamic { z-index:1; }
    #MenuPortail a { text-decoration:none;white-space:nowrap;display:block; }
    #MenuPortail a.static { padding-left:0.15em;padding-right:0.15em; }
    #MenuPortail a.popout { background-image:url("/WebResource.axd?d=u0tdsA78OHekEc59vxJJou2q7ktee2Q9rAKCDlgdCk94oY16-9mtxIPslhPytmTa73JxQAjtyJuLRlljViw9FATWfatwqK0vZ9XD0XBBi2A1&t=635147041120000000");background-repeat:no-repeat;background-position:right center;padding-right:14px; }
    #MenuPortail a.static.selected { background-color:SlateGray;border-color:SlateGray;border-width:1px;border-style:solid;text-decoration:none; }
    /* ]]> */
</style>