下拉菜单位置错误，无法使地图全高

Question

我正在创建以下web应用程序：https://mobigas.herokuapp.com/我对它的css有一些问题。

当您将鼠标放在"ENTRAR"链接上时，它会在错误的位置显示登录表单（其左边距应与链接的左边距对齐）。

此外，我试图让带有地图的DIV使用其余可用的可见区域，但没有成功。

这是菜单的HTML和CSS，不过，我认为查看Heroku链接会更有帮助。

<div class="header-nav-main header-nav-main-light header-nav-main-effect-1 header-nav-main-sub-effect-1 collapse">
     <nav>
         <ul class="nav nav-pills" id="mainNav">
             <li class="dropdown dropdown-mega dropdown-mega-signin signin" id="headerAccount">
                 <a class="dropdown-toggle" href="page-login.html">
                     <i class="fa fa-user"></i> ENTRAR
                     <i class="fa fa-caret-down"></i><i class="fa fa-caret-down"></i>
                 </a>
                 <ul class="dropdown-menu">
                     <li>
                         <div class="dropdown-mega-content">
                             <div class="row">
                                 <div class="col-md-12"> <!--content-->
                                 </div>
                             </div>    
                         </div>
                      </li>
                 </ul>
            </li>
        </ul>
    </nav>
</div>

mapdiv位于<header>元素下方的<div class="body">中。

<div role="main" class="main">
    <!-- Google Maps -->
    <div id="googlemaps" class="google-map full-height mt-none mb-sm"></div>
</div>

这是我在ThemeForest上购买的Porto模板的定制，它使用Bootstrap 3。

更新

目前，<li class="dropdown dropdown-mega dropdown-mega-signin signin">元素和<ul class="dropdown-menu">正在使用position:static，并根据另一位用户的建议更改下拉菜单，使下拉菜单变小。

我增加了下拉菜单的宽度，并固定了<a class="dropdown-toggle">的宽度，但这使得Google Mapsdiv下降。

Answer 1

首先登录表单：

您可以通过给.下拉菜单一个相对位置来实现定位

.dropdown-menu{
  position: relative;
  top: 0px;
  left: 0px;
}

通过这种方式，可以计算相对于链接的位置。