我想知道是否有机会使用css在sharepoint菜单上制作点击按钮：我不希望它悬停，因为这是在设备上进行
像素最大宽度：800px，我可以不用javascript吗？
CSS：
.ms-core-listMenu-horizontalBox {
border: 1px lime solid;
}
.ms-core-listMenu-horizontalBox::before {
content: "Menu";
color: #dd314d;
display: inline-block;
font-family: office365icons, o365Icons;
content: "\e020 Menu";
font-size: 1.5em;
padding: 0.2em;
}
.ms-core-listMenu-horizontalBox .ms-core-listMenu-root {
display: none;
}
.ms-core-listMenu-horizontalBox:hover::before,
.ms-core-listMenu-horizontalBox:focus::before,
.ms-core-listMenu-horizontalBox .showBurger::before {
background-color: #dd314d;
color: white;
}
.ms-core-listMenu-horizontalBox:hover .ms-core-listMenu-root,
.ms-core-listMenu-horizontalBox:focus .ms-core-listMenu-root,
.ms-core-listMenu-horizontalBox .showBurger .ms-core-listMenu-root {
box-sizing: border-box;
position: absolute;
left: 0px;
width: 100%;
display: block;
background-color: #dd314d;
color: white;
padding: 0.35em;
}
.ms-core-listMenu-horizontalBox:hover .ms-core-listMenu-root .static,
.ms-core-listMenu-horizontalBox:focus .ms-core-listMenu-root .static,
.ms-core-listMenu-horizontalBox .showBurger .ms-core-listMenu-root .static {
display: block;
line-height: 1.25em;
padding: 0.25em 0.5em;
}
.ms-core-listMenu-horizontalBox:hover .ms-core-listMenu-root .menu-item,
.ms-core-listMenu-horizontalBox:focus .ms-core-listMenu-root .menu-item,
.ms-core-listMenu-horizontalBox .showBurger .ms-core-listMenu-root .menu-item {
display: block;
color: white;
margin: 0px;
}
.ms-core-listMenu-horizontalBox:hover .ms-core-listMenu-root .menu-item:hover,
.ms-core-listMenu-horizontalBox:focus .ms-core-listMenu-root .menu-item:hover,
.ms-core-listMenu-horizontalBox .showBurger .ms-core-listMenu-root .menu-item:hover {
background-color: #ee9105;
}
.ms-core-listMenu-horizontalBox:hover .static.ms-navedit-editArea,
.ms-core-listMenu-horizontalBox:focus .static.ms-navedit-editArea,
.ms-core-listMenu-horizontalBox .showBurger .static.ms-navedit-editArea {
display: none;
}
HTML：
<div id="s4-workspace">
<div id="s4-bodyContainer">
<div class="ms-belltown-anonspacer">
</div>
<div id="ms-belltown-table" class="ms-table">
<div id="titlerow" class="ms-dialogHidden ms-core-header ms-tableRow">
<div id="titleAreaBox" class="ms-noList ms-table">
<div id="titleAreaRow" class="ms-tableRow">
<div id="siteIcon" class="ms-tableCell ms-verticalAlignTop">
<!--CS: Start Site Logo Snippet-->
<!--MS:<SharePoint:AjaxDelta id="DeltaSiteLogo" BlockElement="true" runat="server">-->
<!--MS:<SharePoint:SPSimpleSiteLink CssClass="ms-siteicon-a" runat="server" id="onetidProjectPropertyTitleGraphic">-->
<!--MS:<SharePoint:SiteLogoImage CssClass="ms-siteicon-img" name="onetidHeadbnnr0" id="onetidHeadbnnr2" LogoImageUrl="/_layouts/15/images/siteIcon.png?rev=41" runat="server">-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><img id="ctl00_onetidHeadbnnr2" class="ms-siteicon-img" name="onetidHeadbnnr0" Src="https://uanetab.sharepoint.com/_layouts/15/images/siteIcon.png?rev=41" alt="Content site" /><!--PE: End of READ-ONLY PREVIEW-->
<!--ME:</SharePoint:SiteLogoImage>-->
<!--ME:</SharePoint:SPSimpleSiteLink>-->
<!--ME:</SharePoint:AjaxDelta>-->
<!--CE:End Site Logo Snippet-->
</div>
<div class="ms-breadcrumb-box ms-tableCell ms-verticalAlignTop">
<h1 id="pageTitle" class="ms-core-pageTitle">
<!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderPageSiteName" class="ms-core-navigation" runat="server">-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderSiteName" runat="server">-->
<!--SPM:<SharePoint:SPLinkButton runat="server" NavigateUrl="~site/" id="onetidProjectPropertyTitle1">-->
<!--SPM:<SharePoint:ProjectProperty Property="Title" runat="server"/>-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->Default Publishing Site<!--PE: End of READ-ONLY PREVIEW-->
<!--SPM:</SharePoint:SPLinkButton>-->
<!--SPM:</asp:ContentPlaceHolder>-->
<!--SPM:</SharePoint:AjaxDelta>-->
</h1>
<!--SPM:<SharePoint:AjaxDelta id="DeltaHorizontalQuickLaunch" class="ms-core-navigation ms-belltown-quicklaunch" role="navigation" BlockElement="true" runat="server">-->
<div class="ms-quicklaunchouter">
<div class="ms-quickLaunch">
<!--PS: Start of READ-ONLY PREVIEW (do not modify) --><div><div class="noindex ms-core-listMenu-horizontalBox"><ul class="root ms-core-listMenu-root static"><li class="static selected"><span class="ms-core-listMenu-horizSeparator">|</span><a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" tabIndex="0" href="#"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Home</span><span class="ms-hidden">Currently selected</span></span></a></li><li class="static"><span class="ms-core-listMenu-horizSeparator">|</span><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabIndex="0" href="#"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">About Us</span></span></a></li><li class="static"><span class="ms-core-listMenu-horizSeparator">|</span><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabIndex="0" href="#"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Contact Us</span></span></a></li><li class="static"><span class="ms-core-listMenu-horizSeparator">|</span><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabIndex="0" href="#"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Directions</span></span></a></li></ul></div></div><!--PE: End of READ-ONLY PREVIEW -->
<!--SPM:<Sharepoint:SPNavigationManager id="QuickLaunchNavigationManager" runat="server" QuickLaunchControlId="V4QuickLaunchMenu" ContainedControl="QuickLaunch" EnableViewState="false">-->
<!--SPM:<SharePoint:DelegateControl runat="server" ControlId="QuickLaunchDataSource">-->
<!--SPM:<Template_Controls>-->
<!--SPM:<asp:SiteMapDataSource SiteMapProvider="SPNavigationProvider" ShowStartingNode="False" id="QuickLaunchSiteMap" StartingNodeUrl="sid:1025" runat="server"/>-->
<!--SPM:</Template_Controls>-->
<!--SPM:</SharePoint:DelegateControl>-->
<!--SPM:<SharePoint:AspMenu id="V4QuickLaunchMenu" runat="server" EnableViewState="false" DataSourceId="QuickLaunchSiteMap" UseSimpleRendering="true" Orientation="Horizontal" StaticDisplayLevels="1" DynamicHorizontalOffset="0" AdjustForShowStartingNode="true" MaximumDynamicDisplayLevels="2" StaticPopoutImageUrl="/_layouts/15/images/menudark.gif?rev=41" StaticPopoutImageTextFormatString="" SkipLinkText="" StaticSubMenuIndent="0"/>-->
<!--SPM:</Sharepoint:SPNavigationManager>-->
</div>
</div>
<!--SPM:</SharePoint:AjaxDelta>-->
</div>
<div class="ms-tableCell ms-verticalAlignTop">
<!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderPageHeader" class="ms-belltown-pageheader" BlockElement="true" runat="server">-->
<!--SPM:<SharePoint:DelegateControl runat="server" ControlId="PageHeader" AllowMultipleControls="false"/>-->
<!--SPM:</SharePoint:AjaxDelta>-->
<!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderSearchArea" class="ms-belltown-searcharea" BlockElement="true" runat="server">-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><div class="ms-belltown-searcharea" id="ctl00_DeltaPlaceHolderSearchArea"><!--PE: End of READ-ONLY PREVIEW-->
<div class="ms-pub-logon">
<!--SPM:<wssucw:Welcome id="IdOsloWelcome" runat="server" EnableViewState="false"/>-->
</div>
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">-->
<div id="searchInputBox">
<!--SPM:<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox"/>-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><div class="ms-webpart-chrome "><div WebPartID="00000000-0000-0000-0000-000000000000" HasPers="true" id="WebPart" width="100%" class="ms-WPBody noindex " OnlyForMePart="true" allowDelete="false" style=""><div componentid="ctl00_SmallSearchInputBox1_csr" id="ctl00_SmallSearchInputBox1_csr"><div id="SearchBox" name="Control"><div class="ms-srch-sb ms-srch-sb-border" id="ctl00_SmallSearchInputBox1_csr_sboxdiv"><input type="text" value="Search This Site..." maxlength="2048" accessKey="S" title="Search This Site..." id="ctl00_SmallSearchInputBox1_csr_sbox" autocomplete="off" autocorrect="off" class="ms-srch-sb-prompt ms-helperText" /><a title="Search" class="ms-srch-sb-searchLink" id="ctl00_SmallSearchInputBox1_csr_SearchLink" href="javascript: {}"><img src="https://uanetab.sharepoint.com/_layouts/15/images/searchresultui.png" class="ms-srch-sb-searchImg" id="searchImg" alt="Search" /></a></div></div></div><div componentid="ctl00_SmallSearchInputBox1_csr" id="ctl00_SmallSearchInputBox1_csr"></div><div id="ctl00_SmallSearchInputBox1"></div><div class="ms-clear"></div></div></div><!--PE: End of READ-ONLY PREVIEW-->
</div>
<!--SPM:</asp:ContentPlaceHolder>-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--></div><!--PE: End of READ-ONLY PREVIEW-->
<!--SPM:</SharePoint:AjaxDelta>-->
</div>
</div>
</div>
</div>
<div class="ms-tableRow">
<div class="ms-tableCell ms-verticalAlignTop">
</div>
</div>
<div class="ms-tableRow">
<div class="ms-tableCell">
<div class="contentwrapper">
<div class="ms-table ms-fullWidth">
<div class="ms-tableRow">
<div class="ms-tableCell ms-verticalAlignTop">
<div id="sideNavBox" class="ms-dialogHidden ms-forceWrap ms-noList">
<a id="startNavigation" name="startNavigation" tabIndex="-1">
</a>
<!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderLeftNavBar" Visible="true" class="ms-core-navigation ms-belltown-sideNavDelta" BlockElement="true" runat="server">-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" Visible="true" runat="server">-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderLeftNavBarTop" Visible="true" runat="server"/>-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderQuickLaunchTop" Visible="true" runat="server"/>-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderLeftNavBarDataSource" Visible="true" runat="server"/>-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderCalendarNavigator" Visible="true" runat="server"/>-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderLeftActions" Visible="true" runat="server"/>-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderQuickLaunchBottom" Visible="true" runat="server"/>-->
<!--SPM:</asp:ContentPlaceHolder>-->
<!--SPM:</SharePoint:AjaxDelta>-->
</div>
</div>
<div id="contentBox" class="ms-pub-contentLayout" aria-live="polite" aria-relevant="all">
<div id="notificationArea" class="ms-notif-box">
</div>
<!--SPM:<SharePoint:AjaxDelta id="DeltaPageStatusBar" BlockElement="true" runat="server">-->
<div id="pageStatusBar">
</div>
<!--SPM:</SharePoint:AjaxDelta>-->
<a id="mainContent" name="mainContent" tabindex="-1">
</a>
<h1 id="pageContentTitle" class="ms-belltown-pageName ms-noWrap ms-dialogHidden">
<!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">-->
<!--SPM:<SharePoint:SPTitleBreadcrumb runat="server" RenderCurrentNodeAsLink="true" SiteMapProvider="SPContentMapProvider" WelcomePageUsesWebTitle="false">-->
<!--SPM:<PATHSEPARATORTEMPLATE>-->
<!--SPM:<SharePoint:ClusteredDirectionalSeparatorArrow runat="server"/>-->
<!--SPM:</PATHSEPARATORTEMPLATE>-->
<!--SPM:</SharePoint:SPTitleBreadcrumb>-->
<!--SPM:</asp:ContentPlaceHolder>-->
<!--SPM:</SharePoint:AjaxDelta>-->
</h1>
<!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderMain" BlockElement="true" IsMainContent="true" runat="server">-->
<!--SPM:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">-->
<div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black;">
This area will be filled in by content you create in your page layouts.
</div>
<!--SPM:</asp:ContentPlaceHolder>-->
<!--SPM:</SharePoint:AjaxDelta>-->
</div>
<div class="ms-tableCell ms-verticalAlignTop">
<!--SPM:<SharePoint:AjaxDelta id="DeltaFormDigest" BlockElement="true" runat="server">-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderFormDigest" runat="server">-->
<!--SPM:<SharePoint:FormDigest runat="server"/>-->
<!--SPM:</asp:ContentPlaceHolder>-->
<!--SPM:</SharePoint:AjaxDelta>-->
<div class="ms-hide">
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server" Visible="false"/>-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderPageImage" runat="server" Visible="false"/>-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderTitleLeftBorder" runat="server" Visible="false"/>-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderMiniConsole" runat="server" Visible="false"/>-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderTitleRightMargin" runat="server" Visible="false"/>-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderTitleAreaSeparator" runat="server" Visible="false"/>-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderNavSpacer" runat="server" Visible="false"/>-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderLeftNavBarBorder" runat="server" Visible="false"/>-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderBodyLeftBorder" runat="server" Visible="false"/>-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderBodyRightMargin" runat="server" Visible="false"/>-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server" Visible="false"/>-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderTitleAreaClass" runat="server" Visible="false"/>-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderGlobalNavigation" runat="server" Visible="false"/>-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderGlobalNavigationSiteMap" runat="server" Visible="false"/>-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server" Visible="false"/>-->
<!--SPM:<asp:ContentPlaceHolder id="WSSDesignConsole" runat="server" Visible="false"/>-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server" Visible="false"/>-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server" Visible="false"/>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderFooter" BlockElement="true" runat="server">-->
<!--SPM:<SharePoint:DelegateControl runat="server" ControlId="PageFooter" AllowMultipleControls="false"/>-->
<!--SPM:</SharePoint:AjaxDelta>-->
</div>
</div>
</div>