- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在尝试制作一个具有三个级别的下拉菜单。但是当我将鼠标悬停在第一层时,第二层会出现在第一层上方和左侧。我想在第一级的中间有第二级。而且我不知道我怎么能在第二层的右边有第三层。
.middle,
.bottom {
background-color: #1565c0;
width: 100%;
overflow: hidden;
}
.middle ul.top-level-menu li:after,
.bottom ul.top-level-menu li:after {
height: 3px;
width: 0px;
content: '';
display: block;
margin: auto;
background: transparent;
transition: width 0.5s ease, background-color 0.5s ease;
}
.middle ul.top-level-menu li:hover:after,
.bottom ul.top-level-menu li:hover:after {
width: 100%;
background: #003c8f;
}
.middle ul.top-level-menu,
.bottom ul.top-level-menu {
padding: 0;
margin: 0;
list-style-type: none;
}
.middle ul.top-level-menu>li,
.bottom ul.top-level-menu>li {
width: 25%;
padding: 10px;
float: left;
text-align: center;
text-align: -webkit-center;
text-align: -moz-center;
z-index: 1;
}
.middle ul.top-level-menu>li:hover,
.bottom ul.top-level-menu>li:hover {
cursor: hand;
}
.middle ul.top-level-menu>li:hover>ul.second-level-menu,
.bottom ul.top-level-menu>li:hover>ul.second-level-menu {
display: block;
position: absolute;
padding: 10px 14px;
list-style-type: none;
}
.middle ul.top-level-menu a,
.bottom ul.top-level-menu a {
font-family: 'Kanit', sans-serif;
font-size: 17px;
color: #fff;
text-decoration: none;
}
.middle ul.top-level-menu li ul.second-level-menu,
.bottom ul.top-level-menu li ul.second-level-menu {
display: none;
background-color: #1565c0;
z-index: 1;
emphasized text border-top: 5px solid #f00;
}
.middle ul.top-level-menu li ul.second-level-menu li ul.third-level-menu,
.bottom ul.top-level-menu li ul.second-level-menu li ul.third-level-menu {
display: none;
z-index: 1;
}
<nav role="navigation">
<div class="middle">
<ul class="top-level-menu">
<li>
<a href="#!">Acerca</a>
<ul class="second-level-menu">
<li><a href="https://es.wikipedia.org/wiki/Historia" target="_blank">Historia</a></li>
<li><a href="{{ route('missionvision') }}">Misión y Visión</a></li>
<li><a href="#">Organigrama</a></li>
</ul>
</li>
<li>
<a href="#!">Carreras</a>
<ul class="second-level-menu">
<li><a href="#">Enfermería</a></li>
<li><a href="#">Informática</a></li>
<li><a href="#">Gastronomía</a>
<li>
<li><a href="#">Contabilidad</a></li>
</ul>
</li>
<li>
<a href="#!">Admisión</a>
<ul class="second-level-menu">
<li><a href="#">Chicago</a></li>
<li><a href="#">Los Angeles</a></li>
<li>
<a href="#">New York</a>
<ul class="third-level-menu">
<li><a href="#">Information</a></li>
<li><a href="#">Book a Meeting</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Jobs</a></li>
</ul>
</li>
<li><a href="#">Seattle</a></li>
</ul>
</li>
<li><a href="#!">Calendario</a></li>
</ul>
</div>
</nav>
这里是输出的小图片:
最佳答案
我已经在下面更新了您的代码 - 我添加了许多小的更改。
一些要记住的注意事项:
1).绝对元素(几乎总是)应该有一个“相对”的父元素。您的子“ul”容器设置为绝对,但父“li”元素未设置为“position:relative”,因此无法正确定位“ul”-s。
2).为了将您的第 2 层定位到中心,我给了它一个宽度:70%,左右 10%,左右填充 5%。
.middle,
.bottom {
background-color: #1565c0;
width: 100%;
display: table;
}
.middle ul.top-level-menu li:after,
.bottom ul.top-level-menu li:after {
height: 3px;
width: 0px;
content: '';
display: block;
margin: auto;
background: transparent;
transition: width 0.5s ease, background-color 0.5s ease;
}
.middle ul.top-level-menu li:hover:after,
.bottom ul.top-level-menu li:hover:after {
width: 100%;
background: #003c8f;
}
.middle ul.top-level-menu,
.bottom ul.top-level-menu {
padding: 0;
margin: 0;
list-style-type: none;
}
.middle ul.top-level-menu>li,
.bottom ul.top-level-menu>li {
width: 23%;
padding: 10px 1%;
float: left;
text-align: center;
text-align: -webkit-center;
text-align: -moz-center;
position: relative;
}
.middle ul.top-level-menu>li:hover,
.bottom ul.top-level-menu>li:hover {
cursor: hand;
}
.middle ul.top-level-menu a,
.bottom ul.top-level-menu a {
font-family: 'Kanit', sans-serif;
font-size: 17px;
color: #fff;
text-decoration: none;
}
.middle ul.top-level-menu li ul.second-level-menu,
.bottom ul.top-level-menu li ul.second-level-menu {
display: none;
background-color: #1565c0;
border-top: 5px solid #f00;
}
.middle ul.top-level-menu>li:hover>ul.second-level-menu,
.bottom ul.top-level-menu>li:hover>ul.second-level-menu {
display: table;
position: absolute;
left: 10%;
width: 70%;
padding: 10px 5%;
list-style-type: none;
background: #333;
z-index: 2;
}
.middle ul.top-level-menu li ul.second-level-menu li,
.bottom ul.top-level-menu li ul.second-level-menu li{
position: relative;
}
.middle ul.top-level-menu li ul.second-level-menu li ul.third-level-menu,
.bottom ul.top-level-menu li ul.second-level-menu li ul.third-level-menu {
display: none;
z-index: 1;
}
.middle ul.top-level-menu li ul.second-level-menu li:hover > ul.third-level-menu,
.bottom ul.top-level-menu li ul.second-level-menu li:hover > ul.third-level-menu {
display: block;
z-index: 1;
position: absolute;
left: 95%;
background: red;
text-align: left;
list-style: none;
padding: 10px 14px;
top: 0px;
}
<nav role="navigation">
<div class="middle">
<ul class="top-level-menu">
<li>
<a href="#!">Acerca</a>
<ul class="second-level-menu">
<li><a href="https://es.wikipedia.org/wiki/Historia" target="_blank">Historia</a></li>
<li><a href="{{ route('missionvision') }}">Misión y Visión</a></li>
<li><a href="#">Organigrama</a></li>
</ul>
</li>
<li>
<a href="#!">Carreras</a>
<ul class="second-level-menu">
<li><a href="#">Enfermería</a></li>
<li><a href="#">Informática</a></li>
<li><a href="#">Gastronomía</a>
<li>
<li><a href="#">Contabilidad</a></li>
</ul>
</li>
<li>
<a href="#!">Admisión</a>
<ul class="second-level-menu">
<li><a href="#">Chicago</a></li>
<li><a href="#">Los Angeles</a></li>
<li>
<a href="#">New York</a>
<ul class="third-level-menu">
<li><a href="#">Information</a></li>
<li><a href="#">Book a Meeting</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Jobs</a></li>
</ul>
</li>
<li><a href="#">Seattle</a></li>
</ul>
</li>
<li><a href="#!">Calendario</a></li>
</ul>
</div>
</nav>
关于html - 如何用三个级别修复 'my dropdown',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56696328/
我正在尝试让 Bootstrap 下拉菜单与我的 Jade 布局一起使用。但实际上,当我尝试在我的 Jade 文件中执行 $(".dropdown-toggle").dropdown 时出现此错误:
我正在使用 Semantic React UI's Dropdown ,并且我希望它在其父组件安装后立即获得焦点:用户应该能够立即搜索。 我尝试在父级的 render() 中使用 ref: (thi
我有一个脚本如下: var i = 0; function add_relation() { i = i + 1; var key = $('', {
我在 MVC 中有 2 个 DropDowns 并尝试使用 AngularJS。我的第一个 DropDown 填充了正确来自数据库的数据。当用户在第一个 DropDown 上进行选择时,第二个 Dro
我是一名开发新手,但我偶然发现了一个我无法解决的案例。我将 ASP.NET MVC 与 C# 以及一些 javascript(JQuery、JSON...)结合使用。 我要做的是根据在 other 中
在 Bootstrap 文档中,似乎有两种不同的方法来创建下拉列表: .dropdown .btn-group first如下: Dropdown ...
我确实在 kv 文件中定义了一个基本的自定义 DropDown。应用程序 GUI 非常简单,顶部有一个按钮栏,屏幕的其余部分有一个 TextInput。这是代码: dropdowntrialgui.p
在移动 View 中单击 .dropdown 菜单时,.dropdown 和 .dropdown-menu 之间有一个小空间. 如图所示 Question is it possible to remo
我正在尝试创建一个类似于 DataEntry 网格/表的结构,其中用户在单击按钮时追加新行。该行将包含文本框、下拉菜单、日历控件。所有这些都应该在客户端完成。到目前为止,我已经有了这个,正如你所看到的
我有一个带有使用 ul 和 li ( jsfiddle ) 的下拉列表的 jsfiddle。尝试将其转换为选择选项下拉列表时,我没有得到相同的选项 ([jsfiddle]) 2 .我猜这与我重命名某个
我正在使用@atlaskit/dropdown-menu (https://atlaskit.atlassian.com/packages/core/dropdown-menu)。我想在 Item 点
我在我的 angular 应用程序中使用 PrimeNG,我有 p-dropdown 的问题 问题 我为 country 和 caste_category 有两个下拉菜单,我只为 India 提供 c
我有一个表单 View ,在编辑模板中我有两个下拉菜单。 下拉 1 明确设置了允许值的列表。它也设置为自动回发。 下拉 2 是数据绑定(bind)到 objectdatasource,这个 objec
我有一个名为 Agency 的下拉菜单,其中包含 2 个选项: 文凭 PPS 如果选择 SPM,则不会出现下拉菜单。但是,如果选择 PPS,则会出现另外 2 个名为 Department 和 Offi
我是 Angular 的新手,所以这可能是一个非常简单的问题。我正在使用 ngx-select-dropdown (下拉控件)。页面上有两个下拉控件,当第一个下拉列表更改时,第二个下拉列表应更新下拉选
我有一个包含文本区域的下拉菜单。当在文本区域按下返回键时,我希望关闭下拉菜单。这是以下内容的作用: $(document).ready(function(){ $('#edit').keypres
我的页面中有这些SELECT Pending Confirmed Cancelled Refunded Shipped Paid Complete 还有这个 Pending Confirme
我有兴趣学习以智能、优雅的方式在整个站点中构建导航项,这些导航项具有胡萝卜,单击后会展开菜单项列表。 我希望动态构建菜单项(不一定全部使用 ajax)。但它们不应在页面上进行硬编码。 这似乎是像 TW
我有一个选择下拉菜单,一个是 Bootstrap 导航下拉菜单,而不是单击以打开 Bootstrap 导航下拉菜单我在鼠标悬停时更改了它但是当选择下拉菜单打开并且鼠标悬停在 Bootstrap 导航上
我对此很陌生,所以如果我的问题没有按应有的方式提出,我深表歉意。 基本上,我使用 jQuery 的目的是,当从第一个下拉框中选择名为“Apple”的字段时,第二个下拉框将只允许选择“Firm”字段,而
我是一名优秀的程序员,十分优秀!