Menuコントロールで横スクロールさせると展開されるメニューがずれて表示される

Question

はじめまして。
Visual Studio 2005、C# ASP.NET、IE6 にて開発をおこなっております。

Menuコントロールを使用し、
メインメニューを横展開、サブメニューを下方向に展開させようとしています。

メインメニューが横に長くなるケースがあるので、DIVで囲って横スクロールさせようとしているのですが、
横スクロール後にサブメニューを展開させると本来の位置より、ずれて表示されてしまい、
自分なりに調査いたしましたが、解決策が見つからず困っております。

DIV 及び MENUの構成は以下のようにしております。
=======================================================
    <div style="width: 100%; height: 120px; overflow-x:auto;">
        <asp:Menu ID="Menu1" runat="server" BorderWidth="1px" DynamicHorizontalOffset="2" Font-Bold="True"
                Font-Names="ms pgothic" Font-Size="Medium" Orientation="Horizontal"
                StaticEnableDefaultPopOutImage="False" StaticSubMenuIndent="10px" Width="980px" SkipLinkText="">
            <StaticMenuItemStyle BorderStyle="Solid" BorderWidth="1px" Font-Size="16px" HorizontalPadding="10px" VerticalPadding="2px" />
            <DynamicHoverStyle BorderStyle="Double" BorderWidth="1px" Font-Size="16px" />
            <DynamicMenuItemStyle Font-Size="16px" HorizontalPadding="5px" VerticalPadding="2px" />
            <StaticHoverStyle Font-Size="16px" />
            <Items>
                <asp:MenuItem Text="メニュー１" Value="メニュー１">
                    <asp:MenuItem Text="メニュー１１" Value="メニュー１１"></asp:MenuItem>
                    <asp:MenuItem Text="メニュー１２" Value="メニュー１２"></asp:MenuItem>
                    <asp:MenuItem Text="メニュー１３" Value="メニュー１３"></asp:MenuItem>
                </asp:MenuItem>
                <asp:MenuItem Text="メニュー２" Value="メニュー２">
                    <asp:MenuItem Text="メニュー２１" Value="メニュー２１"></asp:MenuItem>
                    <asp:MenuItem Text="メニュー２２" Value="メニュー２２"></asp:MenuItem>
                    <asp:MenuItem Text="メニュー２３" Value="メニュー２３"></asp:MenuItem>
                </asp:MenuItem>
                <asp:MenuItem Text="メニュー３" Value="メニュー３">
                    <asp:MenuItem Text="メニュー３１" Value="メニュー３１"></asp:MenuItem>
                    <asp:MenuItem Text="メニュー３２" Value="メニュー３２"></asp:MenuItem>
                    <asp:MenuItem Text="メニュー３３" Value="メニュー３３"></asp:MenuItem>
                </asp:MenuItem>
                <asp:MenuItem Text="メニュー４" Value="メニュー４">
                    <asp:MenuItem Text="メニュー４１" Value="メニュー４１"></asp:MenuItem>
                    <asp:MenuItem Text="メニュー４２" Value="メニュー４２"></asp:MenuItem>
                    <asp:MenuItem Text="メニュー４３" Value="メニュー４３"></asp:MenuItem>
                </asp:MenuItem>
                <asp:MenuItem Text="メニュー５" Value="メニュー５">
                    <asp:MenuItem Text="メニュー５１" Value="メニュー５１"></asp:MenuItem>
                    <asp:MenuItem Text="メニュー５２" Value="メニュー５２"></asp:MenuItem>
                    <asp:MenuItem Text="メニュー５３" Value="メニュー５３"></asp:MenuItem>
                </asp:MenuItem>               
            </Items>
        </asp:Menu>
    </div>
=======================================================

対応策等がございましたら、お手数ですがご教授お願いします。

Answer 1

div タグの横スクロールを使わず、ブラウザの横スクロールに頼ってはいかがですか？　アップされたコー
ドで、Menu を囲っている div タグをすべて削除して試してみてください。

Answer 2

○ SurferOnWww様

ご返信、ありがとうございます。

DIVタグにしているのは、メニュー部分を上部に固定したいと考えているためです。
実際のアプリケーションは、上部に横スクロール可能なナビゲーションバー、下部に縦・横スクロール 共に可能なメインコンテンツを配置いたします。

今回はFrameを使用せず、CSSで実現しようとしているため、このような構成となっています。

説明足らずで申し訳ありませんでした。

Answer 3

> 横スクロール後にサブメニューを展開させると本来の位置より、ずれて表示されてしまい、

サブメニューの位置がずれるというより、スクロールでメインメニューが表示される位置が変
わっても、サブメニューがポップアップされる位置（ブラウザ本体との相対的な位置）は変わ
らないということのようです。

お役に立てずすみませんが、それを解決する方法は自分には分かりません。

メニューを複数行にするなどして規定の幅におさめて、スクロールしないで済ませるようにす
るぐらいしか解決策はなさそうな気がします。