Question

我有一个带有下拉菜单的导航栏，可以正常使用，但由于左侧的徽标（bootstrap统一主题），我上方有很多空白空间

所以我想将导航栏菜单保持40px。当我使用margin-top：-40px时，它会向上移动导航栏菜单，但只有当我在菜单底部移动鼠标时才会显示下拉菜单。如果我使用margin-top：-50px我完全丢失了

标题代码如下所示

<div class="header" >
<!-- Topbar -->
<div class="container">
    <div class="topbar" >
    <!--logo-->
     <%= link_to image_tag("logo_d_white.png",size: "180x62", :class => "logo" ), root_path %>     
    <!-- logo end -->
       <ul class="loginbar pull-right">
                <li class="hoverSelector">
                    <i class="fa fa-globe"></i>
                    <a>Jazyky/Languages</a>
                    <ul class="languages hoverSelectorBlock">
                        <li class="active">
                            <a href="#">Slovenský <i class="fa fa-check"></i></a>
                        </li>
                        <li><a href="#">English</a></li>   
                    </ul>
                </li></ul>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="fa fa-bars"></span>
        </button>
</div>
<!--  End Topbar -->
<!-- Navbar -->
<div class="collapse navbar-collapse mega-menu navbar-responsive-collapse">
   <div class="container">
            <ul class="nav navbar-nav" >
                <!-- Home -->
                <%= content_tag(:li, link_to('Úvod', home_url)) %>
                <li class="dropdown">
                    <a href="" class="dropdown-toggle" data-toggle="dropdown">
                        Pre Investorov
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="index.html">aaa</a></li>
                        <li><a href="index.html">bbb</a></li>
                        <li><a href="index.html">ccc</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="" class="dropdown-toggle" data-toggle="dropdown">
                        Projekty
                    </a>
                    <ul class="dropdown-menu">
                        <%= content_tag(:li, link_to('Založiť nový projekt', project_terms_url)) %>
                        <li><a href="index.html">Úspešne ukončené kampane</a></li>
                    </ul>
                </li>
              </ul>
            </div>
            </div>

<!-- End Navbar -->

header.css很大..我正在寻找建议在哪里查看css中的哪个类来解决这个问题，所以我的悬停将在整个文本上激活，而不仅仅是文本下方1毫米感谢

为徽标添加css：

   .header .logo {
    height: 100%;
    min-height: 40px;
    min-width: 100px;
    /*display: table-cell;*/
    display: inline-block;
    /*vertical-align: middle;*/
    vertical-align: bottom;
}

.header .logo img {
    z-index: 1;
    margin: 20px 0;
    position: relative;
}

我必须对表格单元格进行注释并将其更改为内联，因为表格单元格与顶栏一起打破

为topbar添加css：

.header .topbar {
    z-index: 12;
    /*padding: 8px 0;*/
    padding: 8px 0 25px 0;
    position: relative;
}
@media (max-width: 991px) {
    .header .topbar {
        margin-bottom: 20px;
    }
}

/*languages*/
.header .topbar ul.languages {
    top: 25px;
    left: -5px;
    display: none;
    padding: 4px 0;
    padding-left: 0;
    list-style: none;
    min-width: 100px;
    position: absolute;
    background: #f0f0f0;

当我在导航栏上使用负边距顶部时，悬停不起作用

0 个答案: