jquery - 下拉菜单中没有 100% 高度的元素

Question

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

一切正常，但下拉列表标题的样式不起作用。

我希望它的导航栏高度为 100%，这样当下拉菜单出现时，它就位于导航栏的正下方。

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

我还希望移动整个下拉菜单，使其右侧与 div 的右侧对齐。

这是电流的 fiddle :

http://jsfiddle.net/aaMjp/1/

只是为了展示，这里是代码:

<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 片段。所有代码都可以在 fiddle 上看到。

Answer 1

为了正确理解您的意思，点击 3.2k 后，下拉菜单应该就在导航栏下方，对吗？

如果是这种情况，您可以尝试以下几个选项:

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

这应该将导航变成一个 block ，强制下拉菜单处于正确的高度。

如果这不起作用，您还可以尝试将 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>

希望这对您有所帮助，否则我很乐意再试一次。