基础 6.4.1 - 如何修复下拉菜单宽度?

Question

如何修复下拉菜单项的宽度？

.row,
.grid-container {
border: 1px solid blue;
}
.menu>li>a {
line-height: 40px;
}
.menu>li>a:hover {
border-bottom: 1px solid red;
}
.menu ul li a {
line-height: normal;
width: 100%;
text-align: center;
}
.menu ul li:hover {
background-color: #eee;
}
.menu ul {
max-width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"></script>
<div class="row">
<ul class="menu align-center dropdown" data-dropdown-menu>
<li>
<a href="#">One</a>
<ul class="menu vertical">
<li><a href="#">One One One One One very long title</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<script>
$(document).foundation();
</script>

如您所见，我已经将下拉菜单项固定为200px，但带有长文本的项目在框外运行。如何固定宽度以使文本始终在框中？正确的方法是什么？如果文本很长，则应将文本分成多行。

这可能吗？

Answer 1

尝试添加这个类 "ul.vertical li a">

并为 A 标签添加标题

.row,
.grid-container {
border: 1px solid blue;
}
.menu>li>a {
line-height: 40px;
}
.menu>li>a:hover {
border-bottom: 1px solid red;
}
.menu ul li a {
line-height: normal;
width: 100%;
text-align: center;
}
.menu ul li:hover {
background-color: #eee;
}
ul.vertical li a {
display: inline-block;
max-width: 100%;
white-space: nowrap;
overflow: hidden!important;
text-overflow: ellipsis;
}
.menu ul {
max-width: 100px;
}
.dropdown.menu>li.opens-right>.is-dropdown-submenu{
min-width: 100px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"></script>
<div class="row">
<ul class="menu align-center dropdown" data-dropdown-menu>
<li>
<a href="#">One</a>
<ul class="menu vertical">
<li><a href="#" title="One One One One One very long title<">One One One One One very long title</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<script>
$(document).foundation();
</script>