Question

我只使用css进行水平导航。

我无法将第一个子菜单放在较小宽度的父级中间。

我没有使用显示器：因为我需要转换。此外，第一个子菜单的最小宽度必须与其父级相同。

提前致谢！

它必须像http://i.stack.imgur.com/G4sUV.jpg

CSS

    nav {
    position:relative;
    border: 1px solid #222;
    background-image: linear-gradient(#444, #111);
    border-radius: 6px;
    box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    height:40px;
    margin:50px auto;
    padding:0;
    width:90%;
    z-index:10;
}
nav ul,
nav ul ul {
    list-style:none;
    padding:0;
    margin:0;
}
nav>ul {    
    clear:left;
    display:flex;
    justify-content:center;
    align-content: stretch;
    text-align:center;
    font:12px Arial, Helvetica, sans-serif;
    text-transform:uppercase;    
}
nav ul li {
    border-right: 1px solid #222;
    box-shadow: 1px 0 0 #444;
    height:40px;
    padding:0;
    margin:0;
    position: relative;
    text-align: center;  
}
nav ul li:last-child {
    border:none;
    box-shadow:none
}    
nav ul li a {
    display:block;
    text-align: center;
    color: #ccc;
    text-decoration: none;
    padding:13px 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
nav ul li a:hover {
    background-image: linear-gradient(#04acec, #0186ba);
    color: #fafafa
}
nav ul li ul {
    background: linear-gradient(#444, #111);        
    border-radius: 3px;
    transition: all 1s ease-in-out;
    text-transform:none;
    opacity: 0;
    visibility: hidden;
    font-size: 12px;
}
nav ul li:hover>ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
    width:auto;
}
nav ul li>ul {
    position: absolute;
    min-width: 100%;

}
nav ul li ul li ul {
    min-width: 0px;
}
nav ul li ul li {
    border:none;
    box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    float:none;
    margin:0;
}
nav ul li ul li:last-child {
    box-shadow: none;
}
nav ul li ul li a {
  padding:10px 8px;
  border:none
}
nav ul li ul li ul {
    left: 90%;
    right: auto;
    top: 10%;
    margin: 0% 0 0 20%;
    box-shadow: -1px 0 0 rgba(255,255,255,.3);
    z-index:20;
}
nav ul li:last-child ul li ul {
    left: auto;
    right: 90%;
    margin: 0 20% 0 0%;
}

HTML

<nav class ="topusermenu">
  <ul class="first">
    <li><a href=#>Home Veryyyyy LOOOOONNNNGGGGGGG Home Veryyyyy LOOOOONNNNGGGGGGG</a>
      <ul>
        <li><a href=#>Home 1Sub 1</a>
          <ul>
            <li><a href=#>Home 2Sub 1</a></li>
            <li><a href=#>Home 2Sub 2</a></li>
            <li><a href=#>Home 2Sub 3</a></li>
          </ul>
        </li>
        <li><a href=#>Home 1Sub 2</a></li>
        <li><a href=#>Home 1Sub 3</a>
          <ul>
            <li><a href=#>Home 2Sub 1</a></li>

          </ul>
        </li>
      </ul>
    </li>
    <li><a href=#>News Very LONG</a>
      <ul>
        <li><a href=#>News 1Sub 1 Very very bvery Long</a></li>
        <li><a href=#>News 1Sub 2</a>
          <ul>
            <li><a href=#>News 2Sub 1</a></li>
            <li><a href=#>News 2Sub 2 long</a>
              <ul>
                <li><a href=#>1</a></li>
                <li><a href=#>2</a>
                  <ul>
                    <li><a href=#>1</a></li>
                    <li><a href=#>22</a>
                      <ul>
                        <li><a href=#>1333</a></li>
                        <li><a href=#>2333</a></li>
                        <li><a href=#>3333</a></li>
                      </ul>
                    </li>
                    <li><a href=#>333</a></li>
                  </ul>

                </li>
                <li><a href=#>3</a></li>
              </ul>
            </li>
            <li><a href=#>News 2Sub 3</a></li>
          </ul>
        </li>
        <li><a href=#>News 1Sub 3</a></li>
      </ul>
    </li>
    <li><a href=#>Contact</a>
      <ul>
        <li><a href=#>Contact1</a></li>
        <li><a href=#>Contact2 long</a></li>
        <li><a href=#>Contact3</a></li>
      </ul>
    </li>
    <li><a href=#>About Lonoooooo o o o o</a>
      <ul>
        <li><a href=#>About1 Very Long</a></li>
        <li><a href=#>About2 Long</a>
          <ul>
            <li><a href=#>subAbout2</a></li>
            <li><a href=#>subAbout2</a>
              <ul>
                <li><a href=#>subAbout2</a></li>
                <li><a href=#>subAbout2</a>
                  <ul>
                    <li><a href=#>subAbout2</a></li>
                    <li><a href=#>subAbout2</a>
                      <ul>
                        <li><a href=#>22</a></li>
                        <li><a href=#>22</a>

                        </li>
                        <li><a href=#>s22</a></li>
                      </ul>
                    </li>
                    <li><a href=#>subAbout2</a></li>
                  </ul>
                </li>
                <li><a href=#>subAbout2</a></li>
              </ul>
            </li>
            <li><a href=#>2</a></li>
          </ul>
        </li>
        <li><a href=#>About3</a></li>
      </ul>
    </li>
  </ul>
</nav>

如何将子元素ul元素与流体宽度居中，相对于较小尺寸的父元素？

0 个答案: