Question

我正在尝试创建一个翻转导航菜单，当主要导航选项上悬停时，辅助导航显示为主导航下方的水平线。

以下是我希望悬停在主要导航选项上时所看到的链接的预览。 preview image

下面是我的代码，下面是工作演示链接。

    <div style="text-align:center; width:100%;">Stuff that goes above nav.<BR>More stuff.</div>

    <div id="wrapper">
    <div id="my-menu">

    <ul class="nav" >
    <li id="pri1"><a href="#">Primary 1</a>
    <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
    <li><a href="#">Link 6</a></li>
    </ul>
    </li>
    <li id="pri2"><a href="#">Primary 2</a>
    <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
    <li><a href="#">Link 6</a></li>
    </ul>
    </li>
    <li id="pri3"><a href="#">Primary 3</a>
    <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
    <li><a href="#">Link 6</a></li>
    </ul>
    </li>
    <li id="pri4"><a href="#">Primary 4</a>
    <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
    <li><a href="#">Link 6</a></li>
    </ul>
    </li>
    <li id="pri5"><a href="#">Primary 5</a>
    <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
    <li><a href="#">Link 6</a></li>
    </ul>
    </li>
    <li id="pri6"><a href="#">Primary 6</a>
    <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
    <li><a href="#">Link 6</a></li>
    </ul>
    </li>

    </ul>

    <!-- hp navigation end -->
    </div>
    </div>



      <div style="text-align:center; width:100%; margin-top:65px;">Stuff that below above nav.<BR>More stuff.</div>

    #wrapper {

        width:100%; 
        background: #ff6633;
      margin 0 auto;
    }



      #nav{

            margin 0 auto;
            width:100%;


    }


    #nav ul  {
        list-style-type: none;

        padding: 0;
    }

     .nav { text-align:center;}


    #pri1 a {
       background: #ff6633;
        color: white;
        width: 95px;

    }

    #pri2 a {
       background: #ff6633;
       color: white;
         width: 137px;
    }

    #pri3 a {
       background: #ff6633;
        color: white;
        width: 138px;
    }

    #pri4 a {
       background: #ff6633;
        color: white;
        width: 142px;
    }


    #pri5 a {
       background: #ff6633;
        color: white;
        width: 126px;
    }

    #pri6 a {
       background: #ff6633;
        color: white;
        width: 77px;
    }





    .nav > li > a {
        display:  block;
        height: 100%;
        padding: 0px;
        color: #000000;
        text-decoration: none;

        line-height: 32px;
        outline: none;
          border-right: 1px solid #D6D3D3
    }

    .nav > li:hover > a {
        color:#333;


    }


    .nav > li {
        padding: 0;
        height: 30px;
        font-family:   Arial, Helvetica, sans-serif;
        letter-spacing: -0.5px;
        font-size: 14px;

    }

    .nav li {

      display:inline-block;
    }


    .nav li > ul {
        position: absolute;
        display: none;
        border-bottom: 0;
        width: 1024px;
        z-index: 9999;

    }


    #about {


    }



    .nav li > ul > li > a {
        text-decoration: none;
        color: #0f2992;
        display: inline-block;


    }


    .nav li:hover > ul {
        display: inline-block;

    }

http://codepen.io/trevoray/pen/dPabKW

Answer 1

基本上，您必须在子菜单级别使用CSS position:absolute and width:100%属性来实现您想要实现的目标。

我已经清理了你的代码，只是为了解决你的特定问题不需要的所有东西，并添加了几个类以便于阅读。

可以找到解决方案的小提琴（草稿）here。现在按照您想要的方式设置相应的样式。

代码段如下......

＆＃13;

 #nav-wrapper {
   width: 100%;
   margin: 0 auto;
   padding: 0;
   min-height: 1.1em;
   background: #ff6633;
   display: table;
 }
 #navmenu {
   width: 100%;
   margin: 0;
   padding: 0;
   display: table-cell;
   vertical-align: middle;
 }
 .nav {
   margin: 0;
   padding: 0;
   /*height:20px;*/
 }
 .nav > li {
   list-style: none;
   display: block;
   float: left;
   margin: 0;
   padding: 0;
   width: 20%;
   box-sizing: border-box;
   text-align: center;
 }
 .submenu {
   height: 20px;
   display: none;
   margin: 0;
   padding: 0;
   width: 100%;
   position: absolute;
   left: 0;
   text-align: center;
 }
 .submenu > li {
   list-style: none;
   display: inline-block;
   margin: 0 10px;
   padding: 1px 20px;
   box-sizing: border-box;
   background: #ff6633;
 }
 .nav > li:hover .submenu {
   display: block;
 }

＆＃13;

<div style="text-align:center; width:100%;">Stuff that goes above nav.
  <BR/>More stuff.</div>
<div id="nav-wrapper">
  <div id="navmenu">
    <ul class="nav">
      <li id="about"><a href="#">About</a>

        <ul class="submenu">
          <li><a href="#">Link 1</a>

          </li>
          <li><a href="#">Link 3</a>

          </li>
          <li><a href="#">Link 4</a>

          </li>
        </ul>
      </li>
      <li id="members"><a href="#">Members & Groups</a>

        <ul class="submenu">
          <li><a href="#">Link 1</a>

          </li>
          <li><a href="#">Link 2</a>

          </li>
          <li><a href="#">Link 3</a>

          </li>
          <li><a href="#">Link 4</a>

          </li>
          <li><a href="#">Link 5</a>

          </li>
          <li><a href="#">Link 6</a>

          </li>
        </ul>
      </li>
      <li id="careers"><a href="#">Careers</a>

        <ul class="submenu">
          <li><a href="#">Link 1</a>

          </li>
          <li><a href="#">Link 2</a>

          </li>
          <li><a href="#">Link 3</a>

          </li>
          <li><a href="#">Link 4</a>

          </li>
        </ul>
      </li>
      <li id="education"><a href="#">Education</a>

        <ul class="submenu">
          <li><a href="#">Link 1</a>

          </li>
          <li><a href="#">Link 2</a>

          </li>
        </ul>
      </li>
      <li id="mylinks"><a href="#">My Links</a>

        <ul class="submenu">
          <li><a href="#">Link 1</a>

          </li>
          <li><a href="#">Link 2</a>

          </li>
          <li><a href="#">Link 3</a>

          </li>
          <li><a href="#">Link 4</a>

          </li>
          <li><a href="#">Link 5</a>

          </li>
          <li><a href="#">Link 6</a>

          </li>
        </ul>
      </li>
    </ul>
    <!-- hp navigation end -->
  </div>
</div>
<div style="text-align:center; width:100%; margin-top:65px;">Stuff that below above nav.
  <BR>More stuff.</div>

＆＃13;

希望这会有所帮助。 快乐编码：）

带有辅助导航的导航栏，位于水平线下方

1 个答案: