导航子菜单从顶部

时间：2015-10-08 21:36:04

标签： javascript jquery html css toggle

所以，我有一个简单的点击（而不是悬停）＆＃34; megamenu＆＃34;看起来像这样： enter image description here

一旦用户点击链接，它就会显示在菜单下面，覆盖下面的任何内容。

但是，不是这样，我需要在导航栏上方显示这个子菜单（蓝色区域）（也就是说，一旦打开导航条和下面的内容），它就会从顶部显示。

我试过玩绝对定位，使用几个偏移插件......什么都没有，我完全卡住了（JS新手）。

我想知道任何人都可以提供帮助（我知道我要求很多）...... 这是一段代码：

<div class="container">
  <div class="main">
    <nav id="cbp-hrmenu" class="cbp-hrmenu">
      <ul>
        <li>
          <a href="#">Parent</a>
          <div class="cbp-hrsub">
            <div class="cbp-hrsub-inner"> 
              <div>
                <h4>Submenu</h4>
                <ul>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                </ul>
              </div>

            </div><!-- /cbp-hrsub-inner -->
          </div><!-- /cbp-hrsub -->
        </li>
        <li>
          <a href="#">Parent 2</a>
          <div class="cbp-hrsub">
            <div class="cbp-hrsub-inner"> 
              <div>
                <h4>Submenu 2</h4>
                <ul>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                </ul>
              </div>

            </div><!-- /cbp-hrsub-inner -->
          </div><!-- /cbp-hrsub -->
        </li>
        <li>
          <a href="#">Parent 3</a>
          <div class="cbp-hrsub">
            <div class="cbp-hrsub-inner"> 
              <div>
                <h4>Submenu 3</h4>
                <ul>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                </ul>
              </div>

            </div><!-- /cbp-hrsub-inner -->
          </div><!-- /cbp-hrsub -->
        </li>
        <li>
          <a href="#">Parent 4</a>
          <div class="cbp-hrsub">
            <div class="cbp-hrsub-inner"> 
              <div>
                <h4>Submenu 4</h4>
                <ul>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                </ul>
              </div>

            </div><!-- /cbp-hrsub-inner -->
          </div><!-- /cbp-hrsub -->
        </li>

      </ul>
    </nav>
  </div>
</div>
<div style="display:block; height:500px">Lorem Ipsum</div>

小提琴在https://jsfiddle.net/dca1eLqq/ P.S抱歉我的英语可能不好

P.P.S由于我的英语不好，我没有正确解释，所以这里有一个关于它应该如何看的快速模型 http://i.imgur.com/enDhe5S.png

2 个答案:

答案 0 :(得分：0)

＆＃34;我需要将此子菜单（蓝色区域）显示在导航栏上方（也就是说，一旦打开导航条和下面的内容），它就会从顶部显示。＆＃34; < / em>不太清楚。

  

您是否还希望所选菜单项位于子菜单下方   菜单的其余部分

OR

  

仅选定的菜单项位于子菜单上方，而其余部分   菜单位于子菜单下方。

根据我的理解，它是您正在寻找的OR语句的第二部分。

要实现这一目标，您只需进行一些更改即可。首先，您需要删除绝对定位。也就是说，.cbp-hrmenu .cbp-hrsub需要更改为：

/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
    display: none;
    position: relative;       /*change*/
    background: #47a3da;
    width: 100%;
    left: 0;
}

其次，您需要添加课程.cbp-hrmenu > ul > li.cbp-hropen 

.cbp-hrmenu > ul > li.cbp-hropen {
    display: block;
}

请参阅下面的代码段。我认为这就是你要找的东西。

＆＃13;
＆＃13; 
/**
 * cbpHorizontalMenu.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
var cbpHorizontalMenu = (function() {

	var $listItems = $( '#cbp-hrmenu > ul > li' ),
		$menuItems = $listItems.children( 'a' ),
		$body = $( 'body' ),
		current = -1;

	function init() {
		$menuItems.on( 'click', open );
		$listItems.on( 'click', function( event ) { event.stopPropagation(); } );
	}

	function open( event ) {

		if( current !== -1 ) {
			$listItems.eq( current ).removeClass( 'cbp-hropen' );
		}

		var $item = $( event.currentTarget ).parent( 'li' ),
			idx = $item.index();

		if( current === idx ) {
			$item.removeClass( 'cbp-hropen' );
			current = -1;
		}
		else {
			$item.addClass( 'cbp-hropen' );
			current = idx;
			$body.off( 'click' ).on( 'click', close );
		}

		return false;

	}

	function close( event ) {
		$listItems.eq( current ).removeClass( 'cbp-hropen' );
		current = -1;
	}

	return { init : init };

})();
$(function() {
    cbpHorizontalMenu.init();
});
＆＃13; 
.container > header {
	width: 90%;
	max-width: 69em;
	margin: 0 auto;
	padding: 0 1.875em 3.125em 1.875em;
}

.container > header {
	padding: 2.875em 1.875em 1.875em;
}

.container > header h1 {
	font-size: 2.125em;
	line-height: 1.3;
	margin: 0 0 0.6em 0;
	float: left;
	font-weight: 400;
}

.container > header > span {
	display: block;
	position: relative;
	z-index: 9999;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5em;
	padding: 0 0 0.6em 0.1em;
}

.container > header > span span:after {
	width: 30px;
	height: 30px;
	left: -12px;
	font-size: 50%;
	top: -8px;
	font-size: 75%;
	position: relative;
}

.container > header > span span:hover:before {
	content: attr(data-content);
	text-transform: none;
	text-indent: 0;
	letter-spacing: 0;
	font-weight: 300;
	font-size: 110%;
	padding: 0.8em 1em;
	line-height: 1.2;
	text-align: left;
	left: auto;
	margin-left: 4px;
	position: absolute;
	color: #fff;
	background: #47a3da;
}

.container > header nav {
	float: right;
	text-align: center;
}

.container > header nav a {
	display: inline-block;
	position: relative;
	text-align: left;
	width: 2.5em;
	height: 2.5em;
	background: #fff;
	border-radius: 50%;
	margin: 0 0.1em;
	border: 4px solid #47a3da;
}

.container > header nav a > span {
	display: none;
}

.container > header nav a:hover:before {
	content: attr(data-info);
	color: #47a3da;
	position: absolute;
	width: 600%;
	top: 120%;
	text-align: right;
	right: 0;
	pointer-events: none;
}

.container > header nav a:hover {
	background: #47a3da;
}
.cbp-hrmenu {
	width: 100%;
	margin-top: 2em;
	border-bottom: 1px solid #47a3da;
	border-top: 1px solid #47a3da;
}

/* general ul style */
.cbp-hrmenu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

/* first level ul style */
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
	width: 90%;
	max-width: 70em;
	margin: 0 auto;
	padding: 0 1.875em;
}

.cbp-hrmenu > ul > li {
	display: inline-block;
}

.cbp-hrmenu > ul > li > a {
	font-weight: 700;
	padding: 1em 2em;
	color: #999;
	display: inline-block;
}

.cbp-hrmenu > ul > li.cbp-hropen {
    display: block;
}

.cbp-hrmenu > ul > li > a:hover {
	color: #47a3da;
}

.cbp-hrmenu > ul > li.cbp-hropen a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
	color: #fff;
	background: #47a3da;
}

/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
	display: none;
	position: relative;
	background: #47a3da;
	width: 100%;
	left: 0;
}

.cbp-hropen .cbp-hrsub {
	display: block;
	padding-bottom: 3em;
}

.cbp-hrmenu .cbp-hrsub-inner > div {
	width: 33%;
	float: left;
	padding: 0 2em 0;
}

.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
	content: " ";
	display: table;
}

.cbp-hrmenu .cbp-hrsub-inner:after {
	clear: both;
}

.cbp-hrmenu .cbp-hrsub-inner > div a {
	line-height: 2em;
}

.cbp-hrsub h4 {
	color: #afdefa;
	padding: 2em 0 0.6em;
	margin: 0;
	font-size: 160%;
	font-weight: 300;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
      <div class="main">
        <nav id="cbp-hrmenu" class="cbp-hrmenu">
          <ul>
            <li>
              <a href="#">Parent</a>
              <div class="cbp-hrsub">
                <div class="cbp-hrsub-inner"> 
                  <div>
                    <h4>Submenu</h4>
                    <ul>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                    </ul>
                  </div>

                </div><!-- /cbp-hrsub-inner -->
              </div><!-- /cbp-hrsub -->
            </li>
            <li>
              <a href="#">Parent 2</a>
              <div class="cbp-hrsub">
                <div class="cbp-hrsub-inner"> 
                  <div>
                    <h4>Submenu 2</h4>
                    <ul>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                    </ul>
                  </div>
                  
                </div><!-- /cbp-hrsub-inner -->
              </div><!-- /cbp-hrsub -->
            </li>
            <li>
              <a href="#">Parent 3</a>
              <div class="cbp-hrsub">
                <div class="cbp-hrsub-inner"> 
                  <div>
                    <h4>Submenu 3</h4>
                    <ul>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                    </ul>
                  </div>
                  
                </div><!-- /cbp-hrsub-inner -->
              </div><!-- /cbp-hrsub -->
            </li>
            <li>
              <a href="#">Parent 4</a>
              <div class="cbp-hrsub">
                <div class="cbp-hrsub-inner"> 
                  <div>
                    <h4>Submenu 4</h4>
                    <ul>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                    </ul>
                  </div>
                  
                </div><!-- /cbp-hrsub-inner -->
              </div><!-- /cbp-hrsub -->
            </li>
            
          </ul>
        </nav>
      </div>
    </div>
    <div style="display:block; height:500px">Lorem Ipsum</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

问题的根源是这个CSS：

.cbp-hrmenu .cbp-hrsub{
    ...
    position:absolute;
    ...
}

从那里取出position:absolute;，菜单会在打开时将页面内容向下推，而不是浮动在页面上。

然而，您会立即注意到一个相关的问题，即没有绝对定位，将元素宽度设置为100％只会让它变得与包含它的li元素一样宽。

或许更好的方法是保留position:absolute;，但根据内容为margin-bottom函数动态设置li元素的open()属性。子菜单，因此它会将页面内容向下推。

您更新的open()方法可能如下所示：

function open( event ) {
    if( current !== -1 ) {
        $listItems.eq( current ).removeClass( 'cbp-hropen' ).css("margin-bottom",0);
    }
    var $item = $( event.currentTarget ).parent( 'li' ),
    idx = $item.index();
    if( current === idx ) {
        $item.removeClass( 'cbp-hropen' );
        $item.css("margin-bottom",0);
        current = -1;            
    }
    else {
        $item.addClass( 'cbp-hropen' );
        $item.css("margin-bottom",$item.find(".cbp-hrsub").get(0).getBoundingClientRect().height+3);
        current = idx;
        $body.off( 'click' ).on( 'click', close );
    }
    return false;
}

示例：

＆＃13;
＆＃13; 
/**
 * cbpHorizontalMenu.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
var cbpHorizontalMenu = (function() {

  var $listItems = $('#cbp-hrmenu > ul > li'),
    $menuItems = $listItems.children('a'),
    $body = $('body'),
    current = -1;

  function init() {
    $menuItems.on('click', open);
    $listItems.on('click', function(event) {
      event.stopPropagation();
    });
  }

  function open(event) {

    if (current !== -1) {
      $listItems.eq(current).removeClass('cbp-hropen').css("margin-bottom", 0);
    }

    var $item = $(event.currentTarget).parent('li'),
      idx = $item.index();
    if (current === idx) {
      $item.removeClass('cbp-hropen');
      $item.css("margin-bottom", 0);
      current = -1;
    } else {
      $item.addClass('cbp-hropen');
      $item.css("margin-bottom", $item.find(".cbp-hrsub").get(0).getBoundingClientRect().height + 3);
      current = idx;
      $body.off('click').on('click', close);
    }

    return false;

  }

  function close(event) {
    $listItems.eq(current).removeClass('cbp-hropen');
    current = -1;
  }

  return {
    init: init
  };

})();
$(function() {
  cbpHorizontalMenu.init();
});
＆＃13; 
.container > header {
  width: 90%;
  max-width: 69em;
  margin: 0 auto;
  padding: 0 1.875em 3.125em 1.875em;
}
.container > header {
  padding: 2.875em 1.875em 1.875em;
}
.container > header h1 {
  font-size: 2.125em;
  line-height: 1.3;
  margin: 0 0 0.6em 0;
  float: left;
  font-weight: 400;
}
.container > header > span {
  display: block;
  position: relative;
  z-index: 9999;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  padding: 0 0 0.6em 0.1em;
}
.container > header > span span:after {
  width: 30px;
  height: 30px;
  left: -12px;
  font-size: 50%;
  top: -8px;
  font-size: 75%;
  position: relative;
}
.container > header > span span:hover:before {
  content: attr(data-content);
  text-transform: none;
  text-indent: 0;
  letter-spacing: 0;
  font-weight: 300;
  font-size: 110%;
  padding: 0.8em 1em;
  line-height: 1.2;
  text-align: left;
  left: auto;
  margin-left: 4px;
  position: absolute;
  color: #fff;
  background: #47a3da;
}
.container > header nav {
  float: right;
  text-align: center;
}
.container > header nav a {
  display: inline-block;
  position: relative;
  text-align: left;
  width: 2.5em;
  height: 2.5em;
  background: #fff;
  border-radius: 50%;
  margin: 0 0.1em;
  border: 4px solid #47a3da;
}
.container > header nav a > span {
  display: none;
}
.container > header nav a:hover:before {
  content: attr(data-info);
  color: #47a3da;
  position: absolute;
  width: 600%;
  top: 120%;
  text-align: right;
  right: 0;
  pointer-events: none;
}
.container > header nav a:hover {
  background: #47a3da;
}
.cbp-hrmenu {
  width: 100%;
  margin-top: 2em;
  border-bottom: 1px solid #47a3da;
  border-top: 1px solid #47a3da;
}
/* general ul style */

.cbp-hrmenu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
/* first level ul style */

.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
  width: 90%;
  max-width: 70em;
  margin: 0 auto;
  padding: 0 1.875em;
}
.cbp-hrmenu > ul > li {
  display: inline-block;
}
.cbp-hrmenu > ul > li > a {
  font-weight: 700;
  padding: 1em 2em;
  color: #999;
  display: inline-block;
}
.cbp-hrmenu > ul > li > a:hover {
  color: #47a3da;
}
.cbp-hrmenu > ul > li.cbp-hropen a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
  color: #fff;
  background: #47a3da;
}
/* sub-menu */

.cbp-hrmenu .cbp-hrsub {
  display: none;
  position: absolute;
  background: #47a3da;
  width: 100%;
  left: 0;
}
.cbp-hropen .cbp-hrsub {
  display: block;
  padding-bottom: 3em;
}
.cbp-hrmenu .cbp-hrsub-inner > div {
  width: 33%;
  float: left;
  padding: 0 2em 0;
}
.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
  content: " ";
  display: table;
}
.cbp-hrmenu .cbp-hrsub-inner:after {
  clear: both;
}
.cbp-hrmenu .cbp-hrsub-inner > div a {
  line-height: 2em;
}
.cbp-hrsub h4 {
  color: #afdefa;
  padding: 2em 0 0.6em;
  margin: 0;
  font-size: 160%;
  font-weight: 300;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <div class="main">
    <nav id="cbp-hrmenu" class="cbp-hrmenu">
      <ul>
        <li>
          <a href="#">Parent</a>
          <div class="cbp-hrsub">
            <div class="cbp-hrsub-inner">
              <div>
                <h4>Submenu</h4>
                <ul>
                  <li><a href="#">Link</a>
                  </li>
                  <li><a href="#">Link</a>
                  </li>
                  <li><a href="#">Link</a>
                  </li>
                  <li><a href="#">Link</a>
                  </li>
                  <li><a href="#">Link</a>
                  </li>
                </ul>
              </div>

            </div>
            <!-- /cbp-hrsub-inner -->
          </div>
          <!-- /cbp-hrsub -->
        </li>
        <li>
          <a href="#">Parent 2</a>
          <div class="cbp-hrsub">
            <div class="cbp-hrsub-inner">
              <div>
                <h4>Submenu 2</h4>
                <ul>
                  <li><a href="#">Link</a>
                  </li>
                  <li><a href="#">Link</a>
                  </li>
                  <li><a href="#">Link</a>
                  </li>
                  <li><a href="#">Link</a>
                  </li>
                  <li><a href="#">Link</a>
                  </li>
                </ul>
              </div>

            </div>
            <!-- /cbp-hrsub-inner -->
          </div>
          <!-- /cbp-hrsub -->
        </li>
        <li>
          <a href="#">Parent 3</a>
          <div class="cbp-hrsub">
            <div class="cbp-hrsub-inner">
              <div>
                <h4>Submenu 3</h4>
                <ul>
                  <li><a href="#">Link</a>
                  </li>
                  <li><a href="#">Link</a>
                  </li>
                  <li><a href="#">Link</a>
                  </li>
                  <li><a href="#">Link</a>
                  </li>
                  <li><a href="#">Link</a>
                  </li>
                </ul>
              </div>

            </div>
            <!-- /cbp-hrsub-inner -->
          </div>
          <!-- /cbp-hrsub -->
        </li>
        <li>
          <a href="#">Parent 4</a>
          <div class="cbp-hrsub">
            <div class="cbp-hrsub-inner">
              <div>
                <h4>Submenu 4</h4>
                <ul>
                  <li><a href="#">Link</a>
                  </li>
                  <li><a href="#">Link</a>
                  </li>
                  <li><a href="#">Link</a>
                  </li>
                  <li><a href="#">Link</a>
                  </li>
                  <li><a href="#">Link</a>
                  </li>
                </ul>
              </div>

            </div>
            <!-- /cbp-hrsub-inner -->
          </div>
          <!-- /cbp-hrsub -->
        </li>

      </ul>
    </nav>
  </div>
</div>
<div style="display:block; height:500px">Lorem Ipsum</div>
＆＃13;
＆＃13;
＆＃13;

编辑：使子菜单显示在第一层菜单上方

如果您希望标题链接显示在子菜单下方以及页面内容的其余部分，请设置margin-top属性而不是margin-bottom，并确保您的子菜单CSS（{{ 1}}）将.cbp-hrmenu .cbp-hrsub属性设置为0 ..

示例：

＆＃13;
＆＃13; 
top
＆＃13; 
/**
 * cbpHorizontalMenu.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
var cbpHorizontalMenu = (function() {

  var $listItems = $('#cbp-hrmenu > ul > li'),
    $menuItems = $listItems.children('a'),
    $body = $('body'),
    current = -1;

  function init() {
    $menuItems.on('click', open);
    $listItems.on('click', function(event) {
      event.stopPropagation();
    });
  }

  function open(event) {

    if (current !== -1) {
      $listItems.eq(current).removeClass('cbp-hropen').css("margin-top", 0);
    }

    var $item = $(event.currentTarget).parent('li'),
      idx = $item.index();
    if (current === idx) {
      $item.removeClass('cbp-hropen');
      $item.css("margin-top", 0);
      current = -1;
    } else {
      $item.addClass('cbp-hropen');
      $item.css("margin-top", $item.find(".cbp-hrsub").get(0).getBoundingClientRect().height);
      current = idx;
      $body.off('click').on('click', close);
    }

    return false;

  }

  function close(event) {
    $listItems.eq(current).removeClass('cbp-hropen');
    current = -1;
  }

  return {
    init: init
  };

})();
$(function() {
  cbpHorizontalMenu.init();
});
＆＃13; 
.container > header {
	width: 90%;
	max-width: 69em;
	margin: 0 auto;
	padding: 0 1.875em 3.125em 1.875em;
}

.container > header {
	padding: 2.875em 1.875em 1.875em;
}

.container > header h1 {
	font-size: 2.125em;
	line-height: 1.3;
	margin: 0 0 0.6em 0;
	float: left;
	font-weight: 400;
}

.container > header > span {
	display: block;
	position: relative;
	z-index: 9999;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5em;
	padding: 0 0 0.6em 0.1em;
}

.container > header > span span:after {
	width: 30px;
	height: 30px;
	left: -12px;
	font-size: 50%;
	top: -8px;
	font-size: 75%;
	position: relative;
}

.container > header > span span:hover:before {
	content: attr(data-content);
	text-transform: none;
	text-indent: 0;
	letter-spacing: 0;
	font-weight: 300;
	font-size: 110%;
	padding: 0.8em 1em;
	line-height: 1.2;
	text-align: left;
	left: auto;
	margin-left: 4px;
	position: absolute;
	color: #fff;
	background: #47a3da;
}

.container > header nav {
	float: right;
	text-align: center;
}

.container > header nav a {
	display: inline-block;
	position: relative;
	text-align: left;
	width: 2.5em;
	height: 2.5em;
	background: #fff;
	border-radius: 50%;
	margin: 0 0.1em;
	border: 4px solid #47a3da;
}

.container > header nav a > span {
	display: none;
}

.container > header nav a:hover:before {
	content: attr(data-info);
	color: #47a3da;
	position: absolute;
	width: 600%;
	top: 120%;
	text-align: right;
	right: 0;
	pointer-events: none;
}

.container > header nav a:hover {
	background: #47a3da;
}
.cbp-hrmenu {
	width: 100%;
	margin-top: 2em;
	border-bottom: 1px solid #47a3da;
	border-top: 1px solid #47a3da;
}

/* general ul style */
.cbp-hrmenu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

/* first level ul style */
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
	width: 90%;
	max-width: 70em;
	margin: 0 auto;
	padding: 0 1.875em;
}

.cbp-hrmenu > ul > li {
	display: inline-block;
}

.cbp-hrmenu > ul > li > a {
	font-weight: 700;
	padding: 1em 2em;
	color: #999;
	display: inline-block;
}

.cbp-hrmenu > ul > li > a:hover {
	color: #47a3da;
}

.cbp-hrmenu > ul > li.cbp-hropen a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
	color: #fff;
	background: #47a3da;
}

/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
	display: none;
	position: absolute;
	background: #47a3da;
	width: 100%;
	left: 0;
    top:0;
}

.cbp-hropen .cbp-hrsub {
	display: block;
	padding-bottom: 3em;
}

.cbp-hrmenu .cbp-hrsub-inner > div {
	width: 33%;
	float: left;
	padding: 0 2em 0;
}

.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
	content: " ";
	display: table;
}

.cbp-hrmenu .cbp-hrsub-inner:after {
	clear: both;
}

.cbp-hrmenu .cbp-hrsub-inner > div a {
	line-height: 2em;
}

.cbp-hrsub h4 {
	color: #afdefa;
	padding: 2em 0 0.6em;
	margin: 0;
	font-size: 160%;
	font-weight: 300;
}
＆＃13;
＆＃13;
＆＃13;

我意识到这并不完美，但剩下的就是清理标题周围的间距（例如行高，填充和边距）。我希望有所帮助！

相关问题
最新问题