Question

我正在创建以下网络应用：https://mobigas.herokuapp.com/并且我的css遇到了一些问题。

当您将鼠标放在＆＃34; ENTRAR＆＃34;链接它显示登录表单在错误的位置（其左边距应该与链接的左边距对齐）。

而且，我试图使用地图的DIV使用剩余的可用可见区域，但没有运气。

这是菜单和CSS的HTML，但是，我认为查看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>

地图div位于<div class="body">元素下面的<header>内。

<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 Maps div下降。

Answer 1

首先登录表格：

您可以通过向 .dropdown-menu 提供相对位置来实现后处理

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

这样，相对于链接计算位置。

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

更新

1 个答案: