所有嵌套UL需要与父母LI的右边对齐。目前，嵌套的UL似乎是对齐到更高级别NAV元素的右侧。CSS下拉，将嵌套UL与父母LI的右边缘对齐LI

实时代码

链接here to fiddle with HTML and problem CSS

HTML

<body> 
     <div id="header"> 
      <div id="header-content-container"> <a href="/" title="Logo" id="logo">Logo!</a> 

       <div id="top-nav-container"> 
        <nav> 
         <ul> 
          <li><a href="/">HOME</a> 
          </li> 
          <li><a href="#">SERVICES</a> 

           <ul> 
            <li><a href="#">Item 00000000</a> 
            </li> 
            <li><a href="#">Item 000000000000000</a> 
            </li> 
            <li><a href="#">Item 000000000000000</a> 
            </li> 
            <li><a href="#">Item 00000000000000</a> 
            </li> 
            <li><a href="#">Item 0000000000000</a> 
            </li> 
            <li><a href="#">Item 000000000000</a> 
            </li> 
            <li><a href="#">Item 000000000</a> 
            </li> 
           </ul> 
          </li> 
          <li><a herf="#">LIBRARY</a> 
          </li> 
          <li><a href="/contact/">CONTACT</a> 

           <ul> 
            <li><a href="#">Item 0</a> 
            </li> 
            <li><a href="#">Item 00</a> 
            </li> 
            <li><a href="#">Item 000</a> 
            </li> 
           </ul> 
          </li> 
         </ul> 
        </nav> 
       </div> 
      </div> 
     </div> 
     <div class="clearer"></div> 
    </body>

CSS

.clearer { 
     clear: both; 
    } 

    body { 
     background: none repeat scroll 0 0 red; 
     font-family:sans-serif; 
     font-size: 13px; 
     margin: 0; 
     padding: 0; 
     position: relative; 
     vertical-align: baseline; 
    } 

    div#header { 
     background-color: white; 
     float: left; 
     height: 76px; 
     margin: 0; 
     padding: 0; 
     width: 100%; 
    } 

    div#header-content-container { 
     height: 100%; 
     margin: 0; 
     width: 768px; 
     background: black; 
    } 

    a#logo { 
     background: blue; 
     float: left; 
     height: 50px; 
     margin: 12px 0 0 19px; 
     width: 260px; 
    } 

    #top-nav-container { 
     float: right; 
     margin: 10px 0 0; 
     position: relative; 
     z-index: 9000; 
    } 

    nav { 
     float: right; 
     margin: 0 9px 0 0; 
    } 

    nav ul { 
     display: inline-table; 
     list-style: outside none none; 
     padding: 0; 
     position: relative; 
    } 

    nav ul::after { 
     clear: both; 
     content:""; 
     display: block; 
    } 

    nav ul li { 
     float: left; 
    } 

    nav ul li:hover { 
     background: green; 
    } 

    nav ul li:hover > ul { 
     display: block; 
    } 

    nav ul li a { 
     color: #eee; 
     display: block; 
     padding: 16px 15px; 
     text-decoration: none; 
    } 

    nav ul li:hover a { 
     color: orange; 
    } 

    nav ul ul { 
     background: none repeat scroll 0 0 #343434; 
     border-radius: 0; 
     left: auto; 
     padding: 0; 
     position: absolute; 
     right: 0; 
     top: 100%; 
     display: none; 
    } 

    nav ul ul li { 
     float: none; 
     border-top: 1px solid purple; 
     border-bottom: 1px solid blue; 
     position: relative; 
    } 

    nav ul ul li a { 
     padding: 15px 40px; 
     color: yellow; 
    } 

    nav ul ul li a:hover { 
     background: cyan; 
    }

问题

problem image

来源

2015-04-18 user743094

检查更新的fiddle。

我已经修改了nav ul ul类

nav ul ul { background: none repeat scroll 0 0 #343434; 
    border-radius: 0;   
    padding: 0; 
    position: absolute; 
    left: -48px;  
    top: 100%; 
    display: none; 
}

来源

2015-04-18 22:20:28

看看会发生什么，当你添加“联系”子菜单“左：-48px”的导航UL UL类。所有嵌套的UL需要与其父母LI对齐。 – user743094

以下是您所做的更改。谢谢！＃top-nav-container：position：absolute！important/* changed from relative * nav ul li：width：105px/* added * /; text-align：center/* added */ nav ul ul：position：relative/* changed from absolute *;左：0px/*从自动* /改变; float：right/* added * /; width：155px/* added */ 'nav ul ul li：width：155px/* added */ 'nav ul ul li a：padding：15px 0px 15px 14px/* changed from 15px 40px * / – user743094

CSS下拉，将嵌套UL与父母LI的右边缘对齐LI

实时代码

HTML

CSS

问题

回答

相关问题