html - 无法在导航菜单中调整子 UL 的位置

标签 html css

我很难调整导航 ul 菜单中所有子 UL 的位置。我希望所有 child ul 的位置与他们各自的 parent li 的位置相同。相反，当您将鼠标悬停在它们的父 li 上时，它们都会显示在不同的位置。有些会按预期直接显示在其父项下方，但其他人往往会在远离其父项 li 的地方显示几个像素，从而留下一个奇怪的空间 [见图]。此菜单是系统母版页的 SharePoint 2013 topnav。我能够让网站母版页的顶部导航按我想要的方式显示，但是，系统母版页有不同的 XHTML/HTML 布局，而不是这个:

<ul class="parent">
  <li>Category 1
      <ul><li>Link</li>
          <li>Link</li>
       </ul></li>
  <li>Category 2
     <ul><li>Link</li>
        <li>Link</li>
    </ul></li>
 </ul>

他们正在使用这个:

<ul class="parent">
 <li>
   <ul>
      <li>Category 1
          <ul><li>Link 1</li>
              <li>Link 2</li>
           </ul></li>
       <li>Category 2
          <ul><li>Link 1</li>
              <li>Link 2</li>
           </ul></li>
       </ul>
      </li>
    </ul>

不确定他们为什么决定这样做，因为这对我来说很愚蠢，但它给我带来了很多问题，连同他们分配给菜单的无数类。

请查看我的 jsfiddle 以了解我当前的 css 和 html:

https://jsfiddle.net/of2ek35c/ enter image description here

最佳答案

好的。子菜单有一堆奇怪的 css 样式(除了你指出的那些)

据我所知...对于子菜单，您需要将 position:relative 设置为父 li 和 position:absolute;display:无到ul.sub-menu

牢记这一点，我在您的代码中添加了以下几行

.topnav ul ul ul {
    margin:0!important;
    display:none;
    position:absolute;
    top:100%;
}
.topnav ul li > ul li {
     position:relative;
}
.topnav ul ul li.dynamic-children:hover > ul { 
    display:block;
}

请参阅下面的代码片段或> jsfiddle

让我知道它是否适合你

#menu {width:80%; margin-left:5px; display:flex; height:55px; background:#000}
.topnav ul {list-style-type: none; padding:0; margin:0; margin-left:-25px; text-transform: uppercase; color:#fff!important; text-align: center; height:55px; font:800 0.8em "Raleway"!important;}
.topnav ul li {list-style: none; height: 100%; width: 115px; display:inline;}
.topnav ul li > ul {height:100%; margin:0; position:relative; top:0px;}
.topnav ul li > ul li {display:inline-block; white-space:pre-wrap; font:inherit; margin-right:6px; padding:0; text-align:center; vertical-align:middle; height:100%; word-wrap:break-word;position:relative;}
.topnav ul li > ul li:hover > ul {opacity:1;}
.topnav ul li > ul li:hover > ul li {height:20px; overflow:visible; padding:0;}
.topnav ul ul ul {opacity:0; height:auto; margin:0!important; padding:3px; font:inherit!important; display:none; width:135px; background:#010831; border-top:1px solid #121a46; position:absolute; top:100%; left:0;}
.topnav ul ul ul > li {height: 0; overflow:hidden; padding:0;}
.topnav li a {color: #fff;  padding:5px 0px; text-decoration: none;}
.topnav ul ul li.dynamic-children:hover > ul { display:block;}
<nav class="topnav" id="menu">
<ul class="root ms-core-listMenu-root static" id="zz13_RootAspMenu">
  <li class="static"><a tabindex="0" class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" accesskey="1" href="/ecms/pages/home.aspx"><span class="additional-background ms-navedit-flyoutArrow"></span></a>
    <ul class="static">
      <li class="static selected"><a tabindex="0" title="ECMS Home" class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-bold ms-core-listMenu-selected ms-navedit-linkNode" href="/ecms/pages/home.aspx"><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 dynamic-children"><span tabindex="0" title="Final Navy EBS Documentation" class="static dynamic-children menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode"><span class="additional-background ms-navedit-flyoutArrow" aria-haspopup="true"><span class="menu-item-text">Final Navy EBS Documentation</span></span>
        </span>
        <ul class="dynamic" style="margin-top: 10px; z-index: 1100;">
          <li class="dynamic"><a tabindex="0" title="PMW220 Documents" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/FinalDocuments/Forms/Navy EBS Documents.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">PMW220 Documents</span></span></a></li>
          <li class="dynamic"><a tabindex="0" title="ePS Final Approved Documents" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/FinalDocuments/Forms/ePS Documents.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">ePS Documents</span></span></a></li>
          <li class="dynamic"><a tabindex="0" title="Click to open Navy ERP Final Approved Documents" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/FinalDocuments/Forms/Navy ERP Documents.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Navy ERP Documents</span></span></a></li>
          <li class="dynamic"><a tabindex="0" title="Click to open Final Approved SLDCADA Documents" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/FinalDocuments/Forms/SLDCADA Documents.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">SLDCADA Documents</span></span></a></li>
        </ul>
      </li>
      <li class="static dynamic-children"><span tabindex="0" title="Product Line Sites" class="static dynamic-children menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode"><span class="additional-background ms-navedit-flyoutArrow" aria-haspopup="true"><span class="menu-item-text">Product Line Sites</span></span>
        </span>
        <ul class="dynamic" style="z-index: 1100;">
          <li class="dynamic"><a tabindex="0" title="ePS" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/eps/SitePages/Home.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Navy ePS</span></span></a></li>
          <li class="dynamic"><a tabindex="0" title="Navy ERP" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/erp/SitePages/Home.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Navy ERP</span></span></a></li>
          <li class="dynamic"><a tabindex="0" title="eBusiness" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/ebus"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">eBusiness</span></span></a></li>
        </ul>
      </li>
      <li class="static dynamic-children"><span tabindex="0" title="PMO Collaboration Sites" class="static dynamic-children menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode"><span class="additional-background ms-navedit-flyoutArrow" aria-haspopup="true"><span class="menu-item-text">PMO Collaboration Sites</span></span>
        </span>
        <ul class="dynamic" style="z-index: 1100;">
          <li class="dynamic"><a tabindex="0" title="Acquisition Management" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/am/SitePages/Home.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Acquisition Management</span></span></a></li>
          <li class="dynamic"><a tabindex="0" title="Audit Readiness" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/ar/SitePages/Home.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Audit Readiness</span></span></a></li>
          <li class="dynamic"><a tabindex="0" title="Business Finance" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/bfm/SitePages/Home.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Business Finance</span></span></a></li>
          <li class="dynamic"><a tabindex="0" title="Configuration Management" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/cm/SitePages/Home.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Configuration Management</span></span></a></li>
          <li class="dynamic"><a tabindex="0" title="Corporate Operations" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/co/SitePages/Home.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Corporate Operations</span></span></a></li>
          <li class="dynamic"><a tabindex="0" title="Cyber Security" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/cs/SitePages/Home.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Cyber Security</span></span></a></li>
          <li class="dynamic"><a tabindex="0" title="Enterprise Architecture" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/ea/SitePages/Home.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Enterprise Architecture</span></span></a></li>
          <li class="dynamic"><a tabindex="0" title="Front Office" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/frontoffice"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Front Office</span></span></a></li>
          <li class="dynamic"><a tabindex="0" title="Interface Management" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/im/SitePages/Home.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Interface Management</span></span></a></li>
          <li class="dynamic"><a tabindex="0" title="Program Control" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/pc/SitePages/Home.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Program Control</span></span></a></li>
          <li class="dynamic"><a tabindex="0" title="Product Support" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/ps/SitePages/Home.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Product Support</span></span></a></li>
          <li class="dynamic"><a tabindex="0" title="Enterprise Engineering" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/ee/SitePages/Home.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Systems Engineering</span></span></a></li>
          <li class="dynamic"><a tabindex="0" title="Technical Director" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/td"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Technical Director</span></span></a></li>
          <li class="dynamic"><a tabindex="0" title="Test and Evaluation" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/te/SitePages/Home.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Test and Evaluation</span></span></a></li>
        </ul>
      </li>
      <li class="static dynamic-children"><span tabindex="0" title="Service Provider Collaboration Sites" class="static dynamic-children menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode"><span class="additional-background ms-navedit-flyoutArrow" aria-haspopup="true"><span class="menu-item-text">Service Provider Collaboration Sites</span></span>
        </span>
        <ul class="dynamic" style="z-index: 1100;">
          <li class="dynamic"><a tabindex="0" title="Enterprise Integration" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/ei/SitePages/Home.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Enterprise Integration</span></span></a></li>
          <li class="dynamic"><a tabindex="0" title="Enterprise Operations" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/eo/SitePages/Home.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Enterprise Operations</span></span></a></li>
          <li class="dynamic"><a tabindex="0" title="eBusiness Suite Technical Teams" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/ebustech"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">eBusiness Suite Technical Teams</span></span></a></li>
        </ul>
      </li>
      <li class="static dynamic-children"><span tabindex="0" class="static dynamic-children menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode"><span class="additional-background ms-navedit-flyoutArrow" aria-haspopup="true"><span class="menu-item-text">Program Tools</span></span>
        </span>
        <ul class="dynamic" style="z-index: 1100;">
          <li class="dynamic"><a tabindex="0" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/adc/SitePages/Dashboard2.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Audit PBC Requests</span></span></a></li>
          <li class="dynamic"><a tabindex="0" title="Conference Room Calendars" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/Pages/Conference-Rooms.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Conference Room Calendars</span></span></a></li>
          <li class="dynamic"><a tabindex="0" title="ECMS Service Requests" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/requests"><span class="additional-background ms-navedit-flyoutArrow"></span></a></li>
          <li class="dynamic"><a tabindex="0" title="Master Roster" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/Lists/Master Roster"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Master Roster</span></span></a></li>
          <li class="dynamic"><a tabindex="0" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/Lists/Program Calendar/calendar.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Navy EBS Calendar</span></span></a></li>
          <li class="dynamic"><a tabindex="0" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/search/Pages/PAL.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Process Asset Library</span></span></a></li>
          <li class="dynamic"><a tabindex="0" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/docPacket/SitePages/Home.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Document Routing</span></span></a></li>
        </ul>
      </li>
      <li class="static dynamic-children"><span tabindex="0" title="Working Groups" class="static dynamic-children menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode"><span class="additional-background ms-navedit-flyoutArrow" aria-haspopup="true"><span class="menu-item-text">Working Groups</span></span>
        </span>
        <ul class="dynamic" style="z-index: 1100;">
          <li class="dynamic"><a tabindex="0" title="Audit War Room" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/AWR/default.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Audit War Room</span></span></a></li>
          <li class="dynamic"><a tabindex="0" title="ePS Procurement IPT" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/IPT"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">ePS Procurement IPT</span></span></a></li>
          <li class="dynamic"><a tabindex="0" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/erpupgrade/default.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Navy ERP 2017 Upgrade</span></span></a></li>
        </ul>
      </li>
      <li class="static dynamic-children"><span tabindex="0" class="static dynamic-children menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode"><span class="additional-background ms-navedit-flyoutArrow" aria-haspopup="true"><span class="menu-item-text">Dashboards</span></span>
        </span>
        <ul class="dynamic" style="z-index: 1100;">
          <li class="dynamic"><a tabindex="0" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/PM/SitePages/Home.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Navy EBS Metrics (Testing)</span></span></a></li>
        </ul>
      </li>
      <li class="static dynamic-children"><a tabindex="0" class="static dynamic-children menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/Lists/NAVEBS Acronyms/AllItems.aspx"><span class="additional-background ms-navedit-flyoutArrow dynamic-children" aria-haspopup="true"><span class="menu-item-text">Resources</span></span></a>
        <ul class="dynamic" style="z-index: 1100;">
          <li class="dynamic"><a tabindex="0" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/Lists/NAVEBS Acronyms/AllItems.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">PMW220 Acronym List</span></span></a></li>
          <li class="dynamic">
            <a tabindex="0" title="This is the End User ECMS Quick Reference Guide." class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/ecms/pc/Working Team Documents/End_User_Quick_Reference.docx?Web=1"><span class="additional-background ms-navedit-flyoutArrow"></span></a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
</nav>

关于html - 无法在导航菜单中调整子 UL 的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41550636/

上一篇：javascript - 如何让 DIV 按顺序从数组中选择一个 ID

下一篇：css - 输入内的文本不是间距

相关文章：

jquery - 仅显示 DefaultContent 的数据表列值

javascript onsubmit 事件用于多个功能检查不起作用

javascript - 我想如果有 2 个元素具有相同的文本，一个在 jquery 中被删除

html - 将 facebook 提要嵌入到 html 中

css - 应用 CSS 时，Flex 按钮组件的边框模糊并改变宽度

css - shinyjqui orderinput 按钮大小 [CSS]

css - 如何编写水平子菜单而不是下拉菜单

javascript - 如何更改 <spring :message code> 中的代码值

jquery - 使用 jquery mobile 访问手机功能，例如相机和电话

css - 背景大小不工作的CSS

©2024 IT工具网  联系我们