无法在导航菜单中调整儿童UL的位置

时间：2017-01-09 14:51:57

标签： html css css3

我在导航ul菜单中调整所有子UL的位置时遇到困难。我希望所有的孩子们都能从他们各自的父母那里得到平等的定位。相反，当您将鼠标悬停在其父级li上时，它们都会显示在不同的位置。有些会直接显示在他们的父母下面，但是其他人往往会显示距离他们的父母几个像素，留下一个奇怪的空间[见图片]。此菜单是系统主页的SharePoint 2013 topnav。我能够让网站母版页的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

1 个答案:

答案 0 :(得分：0)

确定。子菜单中有一堆奇怪的CSS样式（除了你指出的那些）

据我所知...对于子菜单，您需要将position:relative设置为父li，将position:absolute;display:none设置为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;
}

请参阅以下代码段或＆gt;的 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>

相关问题
最新问题