asp.menu固定定位问题与子菜单CSS

时间：2016-10-17 09:16:44

标签： css css3

早上好，

希望有人可以帮忙，我有一个带有自定义CSS的asp.menu，主菜单是固定的，但子菜单拒绝跟随滚动，我的意思是主菜单滚动很好但是子菜单仍然填充在顶部和不相对于主菜单。（滚动后，如果没有滚动，子菜单会在相对选项旁边填充，只要滚动它就会一团糟。）

当然它的东西很小，我试图将（.primaryDynamicMenu）设置为固定也无济于事。

这是我的CSS，请告知我是否有必要使用其他代码：

.primaryStaticMenu
{
   background-color: transparent;
   left: -10px;
   top:30%;
   position:fixed;
   margin-top: -2.5em;
   text-align:left !important;
}
.primaryStaticMenuItem
{
   width:10em;
   background-color: #f7f2ea; 
   border-width: 1px;
   border-color: #efefef #aaab9c #ccc #efefef; 
   border-style: solid;
   padding: 0.5em 0 0.5em 1em;
   color: #777777;
   text-align:left !important;


}
.primaryStaticHover
{
   color: #800000;
   background: #f0e7d7;
   text-align:left !important;
}

.primaryDynamicMenu
{   
   background-color: #f7f2ea;               
   border-bottom: solid 1px #ccc;
   text-align:left !important;
   width:13em;
   position:fixed
}  
.primaryDynamicMenuItem
{
   width: 13em;
   background-color: #f7f2ea; 
   color: #777;
   padding: 0.5em 0 0.5em 1em;
   border-width: 1px;
   border-color: #f7f2ea #aaab9c #f7f2ea #efefef;  
   border-style: solid; 
   text-align:left !important;
}    
.primaryDynamicHover
{
   color: #800000;
   background: #f0e7d7;
   text-align:left !important;
}            

.secondaryLevelOne
{
   background-color: transparent;
   background-repeat: repeat-x;
   margin: 1.5em 0 0 0;
   padding: 5px 0 0 5px;
   width: 13em; 
   height: 30px;
   text-align:left !important;
}
.secondaryLevelTwo
{
   background: #FAFBFB;
   padding: 5px 0 5px 5px;
   text-align:left !important;
   width: 13em;  
}
.secondaryStaticHover
{
   color: #800000;
   text-align:left !important;
}

HTML（添加）：

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Styles/menu43/styles.css" rel="stylesheet" />
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
        .style3
        {
            width: 1000px;
            text-align: left;
        }
        .style4
        {
            text-align: center;
            width: 1000px;
        }
        .style6
        {
            width: 229px;
        }
        .style14
        {
            width: 128px;
        }
        .style15
        {
            width: 200px;
        }
        .style16
        {
            width: 251px;
        }
        #form1
        {
            height: 268px;
            width: 1004px;
        }
        .auto-style1 {
            width: 251px;
            height: 37px;
        }
        .auto-style3 {
            width: 229px;
            height: 37px;
        }
        .auto-style4 {
            height: 37px;
        }
        .auto-style5 {
            width: 321px;
            height: 37px;
        }

.primaryStaticMenu
{
   background-color: transparent;
   left: -10px;
   top:30%;
   position:fixed;
   margin-top: -2.5em;
   text-align:left !important;
}
.primaryStaticMenuItem
{
   width:10em;
   background-color: #f7f2ea; 
   border-width: 1px;
   border-color: #efefef #aaab9c #ccc #efefef; 
   border-style: solid;
   padding: 0.5em 0 0.5em 1em;
   color: #777777;
   text-align:left !important;


}
.primaryStaticHover
{
   color: #800000;
   background: #f0e7d7;
   text-align:left !important;
}

.primaryDynamicMenu
{   
   background-color: #f7f2ea;               
   border-bottom: solid 1px #ccc;
   text-align:left !important;
   width:13em;
}  
.primaryDynamicMenuItem
{
   width: 13em;
   background-color: #f7f2ea; 
   color: #777;
   padding: 0.5em 0 0.5em 1em;
   border-width: 1px;
   border-color: #f7f2ea #aaab9c #f7f2ea #efefef;  
   border-style: solid; 
   text-align:left !important;
}    
.primaryDynamicHover
{
   color: #800000;
   background: #f0e7d7;
   text-align:left !important;
}            

.secondaryLevelOne
{
   background-color: transparent;
   background-repeat: repeat-x;
   margin: 1.5em 0 0 0;
   padding: 5px 0 0 5px;
   width: 13em; 
   height: 30px;
   text-align:left !important;
}
.secondaryLevelTwo
{
   background: #FAFBFB;
   padding: 5px 0 5px 5px;
   text-align:left !important;
   width: 13em;  
}
.secondaryStaticHover
{
   color: #800000;
   text-align:left !important;
}


    </style>

</head>
<body>
    <form id="form1" runat="server" title="" 
    style="margin: 0px; border: thick outset #800000;">
    <table>
        <tr>
            <td class="style14">
                            <asp:Label ID="Label3" runat="server" Font-Bold="True" Font-Size="XX-Large" 
                                ForeColor="Maroon" style="text-align: center; font-size: XX-Large;" 
                                Text="Legal" Font-Names="Arial"></asp:Label>
                            <br />
                        </td>
            <td class="style4">
                <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/GVDM.png" 
                    Height="93px" Width="243px" />
            </td>
        </tr>
        <tr>
            <td class="style14" 

                style="border-bottom-style: outset; border-bottom-width: thick; border-color: #800000">
                &nbsp;</td>
            <td class="style3">
                <table style="border-color: #800000; width:100%; border-bottom-style: outset; border-bottom-width: thick;">
                    <tr>
                        <td class="auto-style1">
                            <asp:Label ID="Label4" runat="server" Font-Bold="True" Font-Size="Medium" 
                                ForeColor="Maroon" style="text-align: left; font-size: medium;" 
                                Text="UserName" Width="100%" Font-Names="Arial"></asp:Label>
                        </td>
                        <td class="auto-style5">
                            <asp:Label ID="Label5" runat="server" Font-Bold="True" Font-Size="Medium" 
                                ForeColor="Maroon" style="text-align: left; font-size: medium;" 
                                Text="Department" Width="100%" Font-Names="Arial"></asp:Label>
                        </td>
                        <td class="auto-style3" style="text-align: center">
                            <asp:ScriptManager ID="ScriptManager3" runat="server">
                            </asp:ScriptManager>
                        </td>
                        <td style="text-align: right" class="auto-style4">
                            <asp:Label ID="Label2" runat="server" Font-Bold="True" Font-Size="Medium" 
                                ForeColor="Maroon" style="text-align: left" Text="Date" Font-Names="Arial"></asp:Label>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Menu ID="Menu1"  runat="server" Orientation="Vertical" > 
                    <DynamicHoverStyle CssClass="primaryDynamicHover" />
                    <DynamicMenuItemStyle CssClass="primaryDynamicMenuItem" />
                    <DynamicMenuStyle CssClass="primaryDynamicMenu" />
                    <DynamicSelectedStyle CssClass="" />
                    <StaticHoverStyle CssClass="primaryStaticHover" />
                    <StaticMenuItemStyle CssClass="primaryStaticMenuItem" />
                    <StaticMenuStyle CssClass="primaryStaticMenu" />
                    <StaticSelectedStyle CssClass="" />
                    <Items>
                        <asp:MenuItem NavigateUrl="~/MasterContentPages/EmployeeDashboard.aspx" Text="Dashboard" Value="Dashboard"></asp:MenuItem>
                        <asp:MenuItem Text="Workflow" Value="Workflow">
                            <asp:MenuItem NavigateUrl="~/MasterContentPages/BookOutFilesToEmployee.aspx" Text="Book Out Files" Value="Book Out Files"></asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/MasterContentPages/FilesWorkflowHistory.aspx" Text="File History" Value="File History"></asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/MasterContentPages/MoveProblemFiles.aspx" Text="Move Problem Files" Value="Move Problem Files"></asp:MenuItem>
                        </asp:MenuItem>
                        <asp:MenuItem NavigateUrl="~/MasterContentPages/Matters.aspx" Text="Matters" Value="Matters"></asp:MenuItem>
                        <asp:MenuItem NavigateUrl="~/MasterContentPages/BulkActions.aspx" Text="Bulk Actions" Value="Bulk Actions"></asp:MenuItem>
                        <asp:MenuItem NavigateUrl="~/MasterContentPages/DebitOrders.aspx" Text="Debit Orders" Value="Debit Orders"></asp:MenuItem>
                        <asp:MenuItem NavigateUrl="~/MasterContentPages/CourtDetails.aspx" Text="Court Details" Value="Court Details"></asp:MenuItem>
                        <asp:MenuItem Text="Accounting" Value="Accounting">
                            <asp:MenuItem NavigateUrl="~/MasterContentPages/Bankstatement.aspx" Text="Bank Statement" Value="Bank Statement"></asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/MasterContentPages/BankstatementImport.aspx" Text="Bank Statment Import" Value="Bank Statment Import"></asp:MenuItem>
                            <asp:MenuItem Text="Find Unknown" Value="Find Unknown" NavigateUrl="~/MasterContentPages/FindUnknown.aspx"></asp:MenuItem>
                        </asp:MenuItem>
                        <asp:MenuItem Text="Reports" Value="Reports">
                            <asp:MenuItem NavigateUrl="~/MasterContentPages/BalanceAssessment.aspx" Text="Balance Assessment" Value="Balance Assessment"></asp:MenuItem>
                            <asp:MenuItem Text="Clients" Value="Clients">
                                <asp:MenuItem Text="Nimble" Value="Nimble">
                                    <asp:MenuItem NavigateUrl="~/MasterContentPages/NimbleActionsFile.aspx" Text="Actions File" Value="Actions File"></asp:MenuItem>
                                    <asp:MenuItem NavigateUrl="~/MasterContentPages/NimbleFinancialFile.aspx" Text="Nimble Financial File" Value="Nimble Financial File"></asp:MenuItem>
                                </asp:MenuItem>
                                <asp:MenuItem Text="Autopage" Value="Autopage">
                                    <asp:MenuItem NavigateUrl="~/MasterContentPages/AutopageStatusFile.aspx" Text="Status File" Value="Status File"></asp:MenuItem>
                                </asp:MenuItem>
                                <asp:MenuItem Text="HTN" Value="HTN">
                                    <asp:MenuItem NavigateUrl="~/MasterContentPages/HTNFinancialFile.aspx" Text="Financial File" Value="Financial File"></asp:MenuItem>
                                    <asp:MenuItem NavigateUrl="~/MasterContentPages/HTNStatusFile.aspx" Text="Status File" Value="Status File"></asp:MenuItem>
                                    <asp:MenuItem NavigateUrl="~/MasterContentPages/HTNArrangementFile.aspx" Text="Arrangement File" Value="Arrangement File"></asp:MenuItem>
                                </asp:MenuItem>
                            </asp:MenuItem>
                            <asp:MenuItem Text="Courts" Value="Courts">
                                <asp:MenuItem NavigateUrl="~/MasterContentPages/CourtProcessList.aspx" Text="Court Process List" Value="Court Process List"></asp:MenuItem>
                            </asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/MasterContentPages/Section129NoticeData.aspx" Text="Section 129 Notice Data" Value="Section 129 Notice Data"></asp:MenuItem>
                        </asp:MenuItem>
                        <asp:MenuItem Text="Setup" Value="Setup">
                            <asp:MenuItem Text="Accounting" Value="Accounting">
                                <asp:MenuItem NavigateUrl="~/MasterContentPages/BankstatementSplitRules.aspx" Text="Bank Statement Split Rules" Value="Bank Statement Split Rules"></asp:MenuItem>
                            </asp:MenuItem>
                            <asp:MenuItem Text="Clients" Value="Clients">
                                <asp:MenuItem Text="Clients" Value="Clients" NavigateUrl="~/MasterContentPages/Clients.aspx"></asp:MenuItem>
                                <asp:MenuItem Text="Client Contracts" Value="Client Contracts" NavigateUrl="~/MasterContentPages/ClientContracts.aspx"></asp:MenuItem>
                                <asp:MenuItem Text="Client Status Mapping" Value="Client Status Mapping">
                                    <asp:MenuItem NavigateUrl="~/MasterContentPages/PreLegalClientStatusMapping.aspx" Text="PreLegal Mapping" Value="PreLegal Mapping"></asp:MenuItem>
                                    <asp:MenuItem NavigateUrl="~/MasterContentPages/NelspruitLiveClientStatusMapping.aspx" Text="NelspruitLive Mapping" Value="NelspruitLive Mapping"></asp:MenuItem>
                                    <asp:MenuItem NavigateUrl="~/MasterContentPages/LegalClientStatusMapping.aspx" Text="Legal Mapping" Value="Legal Mapping"></asp:MenuItem>
                                </asp:MenuItem>
                            </asp:MenuItem>
                            <asp:MenuItem Text="Courts" Value="Courts">
                                <asp:MenuItem NavigateUrl="~/MasterContentPages/Courts.aspx" Text="Courts" Value="Courts"></asp:MenuItem>
                                <asp:MenuItem NavigateUrl="~/MasterContentPages/CourtClerks.aspx" Text="Court Clerks" Value="Court Clerks"></asp:MenuItem>
                                <asp:MenuItem NavigateUrl="~/MasterContentPages/CourtCorrespondents.aspx" Text="Court Correspondents" Value="Court Correspondents"></asp:MenuItem>
                                <asp:MenuItem NavigateUrl="~/MasterContentPages/CourtMagistrates.aspx" Text="Court Magistrates" Value="Court Magistrates"></asp:MenuItem>
                                <asp:MenuItem NavigateUrl="~/MasterContentPages/CourtProcessCourtLinks.aspx" Text="Court Process Court Links" Value="Court Process Court Links"></asp:MenuItem>
                                <asp:MenuItem NavigateUrl="~/MasterContentPages/CourtProcessDocumentLinks.aspx" Text="Court Process Document Links" Value="Court Process Document Links"></asp:MenuItem>
                            </asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/MasterContentPages/DocumentTypes.aspx" Text="Document Types" Value="Document Types"></asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/MasterContentPages/EmployerEmployeeLinks.aspx" Text="Employer Employee Links" Value="Employer Employee Links"></asp:MenuItem>
                            <asp:MenuItem Text="Geography" Value="Geography">
                                <asp:MenuItem NavigateUrl="~/MasterContentPages/Provinces.aspx" Text="Provinces" Value="Provinces"></asp:MenuItem>
                                <asp:MenuItem NavigateUrl="~/MasterContentPages/Towns.aspx" Text="Towns" Value="Towns"></asp:MenuItem>
                                <asp:MenuItem NavigateUrl="~/MasterContentPages/Districts.aspx" Text="Districts" Value="Districts"></asp:MenuItem>
                            </asp:MenuItem>
                        </asp:MenuItem>
                        <asp:MenuItem NavigateUrl="~/MasterContentPages/LegalSuiteImport.aspx" Text="Legal Import" Value="Legal Import"></asp:MenuItem>
                        <asp:MenuItem Text="Bulk Matching" Value="Bulk Matching">
                            <asp:MenuItem NavigateUrl="~/NonMasterContentPages/IdentityNumberMatch.aspx" Text="Identity Numbers" Value="Identity Numbers"></asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/NonMasterContentPages/BeenToLegalMatch.aspx" Text="Been To Legal Status" Value="Been To Legal Status"></asp:MenuItem>
                        </asp:MenuItem>
                    </Items>
                </asp:Menu>
            </td>
            <td class="style3" style="vertical-align: top">
                <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>

                        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                        </asp:ContentPlaceHolder>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </td>
        </tr>
    </table>
    </form>
    </body>
</html>

0 个答案:

没有答案
相关问题
最新问题