Question

尝试创建一个简单的下拉菜单，但它适用于百分比大小的导航栏。

一切都按预期工作，但下拉标题的样式无效。

我希望它的导航栏高度为100％，当出现下拉菜单时，它会直接位于导航栏下方。

目前，标题不会调整其高度，因此下拉菜单直接位于内容之下。

我也希望移动整个下拉菜单，以便将右侧与div的右侧对齐。

这是当前的小提琴：

只是为了表演，下面是代码：

<div id="topbar">
<div id="topbarcentre">
    <div class="pagecontrol1">
        <div id="showbuildfollowers">
            <div class="buildscore">
                <ul class="menu-buildpoints">
                    <li>
                    <a class="buildpointstitle" href="#">
                        <div class="buildscoretext">3.2k</div>
                    </a>
                        <ul>
                        <li><a href="#">Views: 1372</a></li>
                        <li><a href="#">Followers: 89</a></li>
                        <li><a href="#">Comments: 102</a></li>
                        </ul>
                    </li>
                </ul>   
            </div>      
        </div>
    </div>
</div>

* {padding: 0px; margin: 0px;text-decoration:none;}
#topbar {
height: 6%; 
width: 100%; 
background-color:#444; 
position:fixed; 
z-index: 950;
}

.pagecontrol1 {
color:#FFF;
padding-top: 0%;
height: 100%;
}

#topbarcentre {
width: 82%;
margin:auto;
height: 100%;
}

#showbuildfollowers {
width: 10%;
float:right;
margin-right: 22%;
margin-left: 1px;
padding: 0%;
height: 100%;
}

.buildscore {
width: 100%;
border-right: 1px solid #444;
background-color: #666;
color:#fff;
font-size: 12px;
float:left;
-webkit-appearance: none;
height: 100%;
outline: none;
display: table;
}

.buildscore:hover {
background-color:#555;
cursor: pointer;
 }

.menu-buildpoints {
color: #fff;
display: table-cell;
text-align: center;
vertical-align: middle;
height: 100%;
background-color:#999;
 }

.buildpointstitle {
color: #fff;
width: 100%;
height: 100%;
}

.buildscoretext {
background-color: #f00;
}

/* DROP IT CSS */

.dropit {
list-style: none;
padding: 0;
margin: 0;
}
.dropit .dropit-trigger { position: relative; }
.dropit .dropit-submenu {
position: absolute;
top: 100%;
left: 0; /* dropdown left or right */
z-index: 1000;
display: none;
min-width: 150px;
list-style: none;
padding: 0;
margin: 0;
}
.dropit .dropit-open .dropit-submenu { display: block; }

.menu-buildpoints ul {
display:none;
}
.menu-buildpoints ul.dropit-submenu {
background-color:#555;
border:1px solid #444;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.15);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.15);
box-shadow:0px 1px 3px rgba(0,0,0,0.15);
}
.menu-buildpoints ul.dropit-submenu a {
display:block;
font-size:14px;
line-height:25px;
color:#fff;
padding:0 18px;
border-bottom: 1px solid #333;
}
.menu-buildpoints ul.dropit-submenu a:hover{
color:#fff;
text-decoration:none;
}

你可以看到标题的红色背景显示其高度，一旦它的高度为100％，整个div也可以点击。

对这些问题有任何帮助吗？使用名为Dropit的jquery片段。所有代码都可以在小提琴上看到。

Answer 1

只是为了正确理解你，点击3.2k后，下拉菜单应该在导航栏下面正确吗？

如果是这种情况，可以尝试以下几种选择：

.buildscoretext{
margin:auto;
display:block;
height:100%;
}

这应该将导航变成一个块，强制下拉到正确的高度。

如果这不起作用，您还可以尝试将margin-top添加到.dropit ul类。

不要成为那些家伙之一但是试图限制你对div的使用。使用HTML 5，使用类和ID可以使事情变得更加简单。您在导航之前有几个div，并且不需要复杂性。下次你可以尝试类似的东西：

<div id="header-container">
<header>
<nav>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>
</header>
</div>

希望这有帮助，如果不是，我会很乐意再试一次。

Answer 2

子菜单是position: absolute，这意味着它将根据父容器（根li）的边界定位。你需要给它一个固定的top: x高度，它等于导航栏的高度。

example

Answer 3

阻止和高度

我通过添加以下内容修复了它：

.dropit, .dropit-trigger, .dropit-trigger a{display:block}
.dropit, .dropit-trigger, .dropit-trigger a, .dropit-trigger div{height:100%;}

并删除此内容：

.menu-buildpoints { display: table-cell }
.buildscore {display: table}

made a fiddle

height:100%通常是相对于父级的，所以从导航到锚内的div，一切都应该有height:100%

下拉菜单中没有100％高度的元素

3 个答案: