个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
您认为悬停时可以制作上下菜单吗(也许在绝对位置制作向上菜单在我看来还不够)。我想制作一个双菜单(首先在 CR 上向上和向下，然后在更多上。
我实际上做了 2 个子菜单，但我希望其中一个显示在我的标签上。
这是我的实际菜单:
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
body,
html {
font-family: 'Open Sans';
}
.contentwrapper {
margin-left: 0px!important;
margin-right: 0px!important;
}
nav {
position: relative;
margin-top: 0px;
padding: 0 2vw;
background: rgba(232, 227, 227, 1.05);
}
nav ul {
position: relative;
list-style: none;
margin: 0;
padding: 0;
display: inline;
}
nav>ul:last-of-type {
float: right;
}
nav ul > li > a, nav ul > li > a:focus {
background-color:rgba(232, 227, 227, 1.05);
}
nav>ul>li {
display: inline;
position: relative;
margin: 0;
padding: 0;
background-color: rgba(232, 227, 227, 1.05);
}
nav ul>li>a,
nav ul>li>a:focus {
color: #000;
font-weight: 600;
font-size: 13px;
display: table-cell;
height: 100%;
padding: 15px 20px;
text-decoration: none;
transition: all linear 0.1s;
-webkit-transition: all linear 0.1s;
-moz-transition: all linear 0.1s;
}
nav ul>li>a>span {
margin-left: 10px;
transition: all linear 0.1s;
-webkit-transition: all linear 0.1s;
-moz-transition: all linear 0.1s;
}
nav ul ul.submenu {
display: none;
position: absolute;
left: 0;
top: 100%;
list-style: none;
top: 100%;
background: rgba(232, 227, 227, 1.05);
z-index: 99;
}
nav ul ul.submenu li,
nav ul ul.submenu li a {
width: 200px;
}
nav>ul>li:hover ul.submenu {
display: inline-block;
}
nav ul>li:hover>a {
color: #fff !important;
background: #ce0000;
text-decoration: none;
}
nav ul.submenu>li:hover>a,
nav ul.submenu>li>a.active {
background: rgba(206, 0, 0, 0.8);
}<xz xmlns="http://www.w3.org/1999/xhtml"><nav id="navbar" class="navigation">
<!-- KEEP NAV MINIFIED - NEEDED FOR LAYOUT -->
<ul>
<li><a href="/personaldetails">Action Prospection</a>
<ul class="submenu">
<li><a href="https://genoway69.sharepoint.com/ssmteam/SitePages/testepage.aspx">Congress management<br /> - SSM / ADV</a></li>
<li><a href="https://genoway69.sharepoint.com/ssmteam/_layouts/15/guestaccess.aspx?docid=0e5a745b5adb945d08c00368b3762fc9b&authkey=ARiX_xa4YNZd2nI6DtCiX98">Prospection visit<br /><br /> - SSM / ADV</a></li><li>
</li><li><a href="https://genoway69.sharepoint.com/ssmteam/ProcedureSSM/B-Data%20Bases%20Procedures/PU-SSM-BBDUse_FilesCreation-20170912.pdf">BDDUse - FilesCreation<br /> - ADV</a></li>
<li><a href="https://genoway69.sharepoint.com/ssmteam/ProcedureSSM/A-Commercial%20Contact%20Procedures/PU-SSM-Website%20Live%20Chat_20161121.pdf">Website live chat<br /> - SSM / ADV</a></li>
</ul>
</li>
<li><a href="/company">CR</a>
<ul class="submenu">
<li><a href="https://genoway69.sharepoint.com/ssmteam/ProcedureSSM/B-Data%20Bases%20Procedures/PU-SSM-BBDUse_FilesCreation-20170912.pdf">BDDUse - FilesCreation<br /> - ADV</a></li>
<li><a href="https://genoway69.sharepoint.com/ssmteam/ProcedureSSM/A-Commercial%20Contact%20Procedures/PU-SSM-Website%20Live%20Chat_20161121.pdf">Website live chat<br /> - SSM / ADV</a></li>
<li><a href="https://genoway69.sharepoint.com/ssmteam/ProcedureSSM/A-Commercial%20Contact%20Procedures/PU-SSM-Management%20of%20the%20Info%20Box.pdf">Management<br /> of the Infobox - ADV</a></li>
</ul>
<ul class="submenu">
<li><a href="https://genoway69.sharepoint.com/ssmteam/ProcedureSSM/B-Data%20Bases%20Procedures/PU-SSM-BBDUse_FilesCreation-20170912.pdf">CR Process 1:<br />CR creation /<br />qualification /<br />TC requests<br/>- SSM / ADV</a></li>
</ul>
</li>
<li><a href="/invoice">Contact</a>
<ul class="submenu">
<li><a href="https://genoway69.sharepoint.com/ssmteam/ProcedureSSM/A-Commercial%20Contact%20Procedures/PU-SSM-Gene%20search%20161005-VF.pdf">Gene search - SSM</a></li>
<li><a href="https://genoway69.sharepoint.com/ssmteam/ProcedureSSM/A-Commercial%20Contact%20Procedures/PU-SSM-TC%20and%20Webinar%20Set%20Up.pdf">TC and Webinar Set Up - ADV</a></li>
<li><a href="https://genoway69.sharepoint.com/ssmteam/ProcedureSSM/A-Commercial%20Contact%20Procedures/PU-SSM-Gestion%20CDA_MSA_Letters.pdf">Gestion CDA/MSA - ADV</a></li>
</ul>
</li>
<li><a href="/invoice">Offer</a>
<ul class="submenu">
<li><a href="/invList">create Offer using ZBD - SSM</a></li>
</ul>
</li>
<li><a href="/contact">FUP</a></li>
<li><a href="/expenses">Expenses</a>
<ul class="submenu">
<li><a href="/expenselist">View All Expenses</a></li>
</ul>
</li>
<li><a href="/personaldetails">CS</a>
<ul class="submenu">
<li><a href="/yourmoney">congress managment -ssm / adv</a></li>
<li><a href="/mydetails">My Details</a></li>
<li><a href="/admindetails">Admin Details</a></li>
<li><a href="/contracts">Contracts</a></li>
</ul>
</li>
<li><a href="/company">Nego</a>
<ul class="submenu">
<li><a href="/taxsettings">Tax Settings</a></li>
</ul>
</li>
<li><a href="/invoice">Deal Closing</a>
<ul class="submenu">
<li><a href="/invList">View All Invoices</a></li>
</ul>
</li>
<li><a href="/contact">Kick off project</a></li>
<li><a href="/home">Project development</a></li>
</ul>
</nav>最佳答案
感谢您的快速回复，我已经能够管理该菜单了
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
body,
html {
font-family: 'Open Sans';
}
.contentwrapper {
margin-left: 0px!important;
margin-right: 0px!important;
}
nav {
position: relative;
margin-top: 200px;
padding: 0 2vw;
background: rgba(232, 227, 227, 1.05);
}
nav ul {
position: relative;
list-style: none;
margin: 0;
padding: 0;
display: inline;
}
nav>ul:last-of-type {
float: right;
}
nav ul > li > a, nav ul > li > a:focus {
background-color:rgba(232, 227, 227, 1.05);
}
nav>ul>li {
display: inline;
position: relative;
margin: 0;
padding: 0;
background-color: rgba(232, 227, 227, 1.05);
}
nav ul>li>a,
nav ul>li>a:focus {
color: #000;
font-weight: 600;
font-size: 13px;
display: table-cell;
height: 100%;
padding: 15px 20px;
text-decoration: none;
transition: all linear 0.1s;
-webkit-transition: all linear 0.1s;
-moz-transition: all linear 0.1s;
}
nav ul>li>a>span {
margin-left: 10px;
transition: all linear 0.1s;
-webkit-transition: all linear 0.1s;
-moz-transition: all linear 0.1s;
}
nav ul ul.submenu {
display: none;
position: absolute;
left: 0;
top: 100%;
list-style: none;
top: 100%;
background: rgba(232, 227, 227, 1.05);
z-index: 99;
}
nav ul ul.upmenu {
display: none;
position: absolute;
left: 0;
top: -130px;
background: rgba(232, 227, 227, 1.05);
z-index: 100;
}
nav ul ul.upmenu li,
nav ul ul.upmenu li a {
width: 140px;
}
nav ul ul.submenu li,
nav ul ul.submenu li a {
width: 200px;
}
nav>ul>li:hover ul.submenu {
display: inline-block;
}
nav>ul>li:hover ul.upmenu {
display: inline-block;
}
nav ul>li:hover>a {
color: #fff !important;
background: #ce0000;
text-decoration: none;
}
nav ul.submenu>li:hover>a,
nav ul.submenu>li>a.active {
background: rgba(206, 0, 0, 0.8);
}<xz xmlns="http://www.w3.org/1999/xhtml"><nav id="navbar" class="navigation">
<!-- KEEP NAV MINIFIED - NEEDED FOR LAYOUT -->
<ul>
<li><a href="/personaldetails">Action Prospection</a>
<ul class="submenu">
<li><a href="https://genoway69.sharepoint.com/ssmteam/SitePages/testepage.aspx">Congress management<br /> - SSM / ADV</a></li>
<li><a href="https://genoway69.sharepoint.com/ssmteam/_layouts/15/guestaccess.aspx?docid=0e5a745b5adb945d08c00368b3762fc9b&authkey=ARiX_xa4YNZd2nI6DtCiX98">Prospection visit<br /><br /> - SSM / ADV</a></li><li>
</li><li><a href="https://genoway69.sharepoint.com/ssmteam/ProcedureSSM/B-Data%20Bases%20Procedures/PU-SSM-BBDUse_FilesCreation-20170912.pdf">BDDUse - FilesCreation<br /> - ADV</a></li>
<li><a href="https://genoway69.sharepoint.com/ssmteam/ProcedureSSM/A-Commercial%20Contact%20Procedures/PU-SSM-Website%20Live%20Chat_20161121.pdf">Website live chat<br /> - SSM / ADV</a></li>
</ul>
</li>
<li><a href="/company">CR</a>
<ul class="submenu">
<li><a href="https://genoway69.sharepoint.com/ssmteam/ProcedureSSM/B-Data%20Bases%20Procedures/PU-SSM-BBDUse_FilesCreation-20170912.pdf">BDDUse - FilesCreation<br /> - ADV</a></li>
<li><a href="https://genoway69.sharepoint.com/ssmteam/ProcedureSSM/A-Commercial%20Contact%20Procedures/PU-SSM-Website%20Live%20Chat_20161121.pdf">Website live chat<br /> - SSM / ADV</a></li>
<li><a href="https://genoway69.sharepoint.com/ssmteam/ProcedureSSM/A-Commercial%20Contact%20Procedures/PU-SSM-Management%20of%20the%20Info%20Box.pdf">Management<br /> of the Infobox - ADV</a></li>
</ul>
<ul class="upmenu">
<li><a href="https://genoway69.sharepoint.com/ssmteam/ProcedureSSM/B-Data%20Bases%20Procedures/PU-SSM-BBDUse_FilesCreation-20170912.pdf">CR Process 1<br /> CR creation / qualification /<br />TC requests<br/>- SSM / ADV</a></li>
</ul>
</li>
<li><a href="/invoice">Contact</a>
<ul class="submenu">
<li><a href="https://genoway69.sharepoint.com/ssmteam/ProcedureSSM/A-Commercial%20Contact%20Procedures/PU-SSM-Gene%20search%20161005-VF.pdf">Gene search - SSM</a></li>
<li><a href="https://genoway69.sharepoint.com/ssmteam/ProcedureSSM/A-Commercial%20Contact%20Procedures/PU-SSM-TC%20and%20Webinar%20Set%20Up.pdf">TC and Webinar Set Up - ADV</a></li>
<li><a href="https://genoway69.sharepoint.com/ssmteam/ProcedureSSM/A-Commercial%20Contact%20Procedures/PU-SSM-Gestion%20CDA_MSA_Letters.pdf">Gestion CDA/MSA - ADV</a></li>
</ul>
</li>
<li><a href="/invoice">Offer</a>
<ul class="submenu">
<li><a href="/invList">create Offer using ZBD - SSM</a></li>
</ul>
<ul class="upmenu">
<li><a href="https://genoway69.sharepoint.com/ssmteam/ProcedureSSM/B-Data%20Bases%20Procedures/PU-SSM-BBDUse_FilesCreation-20170912.pdf">CR Process 2: Contact /offer /Fups - SSM /ADV</a></li>
</ul>
</li>
<li><a href="/contact">FUP</a></li>
<li><a href="/expenses">Expenses</a>
<ul class="submenu">
<li><a href="/expenselist">View All Expenses</a></li>
</ul>
</li>
<li><a href="/personaldetails">CS</a>
<ul class="submenu">
<li><a href="/yourmoney">congress managment -ssm / adv</a></li>
<li><a href="/mydetails">My Details</a></li>
<li><a href="/admindetails">Admin Details</a></li>
<li><a href="/contracts">Contracts</a></li>
</ul>
<ul class="upmenu">
<li><a href="https://genoway69.sharepoint.com/ssmteam/ProcedureSSM/B-Data%20Bases%20Procedures/PU-SSM-BBDUse_FilesCreation-20170912.pdf">CR Process 1<br /> CR creation / qualification /<br />TC requests<br/>- SSM / ADV</a></li>
</ul>
</li>
<li><a href="/company">Nego</a>
<ul class="submenu">
<li><a href="/taxsettings">Tax Settings</a></li>
</ul>
</li>
<li><a href="/invoice">Deal Closing</a>
<ul class="submenu">
<li><a href="/invList">View All Invoices</a></li>
</ul>
</li>
<li><a href="/contact">Kick off project</a></li>
<li><a href="/home">Project development</a></li>
</ul>
</nav>关于html - 制作下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46833530/
25
4
0
使用 Foundation 6.3.1，我希望在桌面上显示 Canvas 外菜单，在移动设备上显示 Accordion 菜单。例如 This is the desktop view with a co
function HideandUNhideObj(ThisObj) { var nav = document.getElementById(ThisObj).style if (nav.displ
我正在处理一个页面，该页面有一个显示“更新”的链接。当用户单击此链接时，我希望表单使用幻灯片效果并显示在链接下方。提交表单后，它会更新数据库，并且菜单会显示。 我知道这可以用 JavaScript 来
这是我的运行时创建菜单的关键部分: GtkWidget *menu, *menu_item; menu = gtk_menu_new(); menu_item = gtk_image_menu_ite
您好，我想实现一个像这样的 donut 菜单 http://dribbble.com/shots/610433-Wheel-Nav我知道有一种在 css3 中制作 donut 的简单方法。 .doug
我的应用程序中有一个菜单，当菜单打开时我会触发触觉反馈(来自 onTagGesture Action )。 然而 有时当我点击菜单打开触发器时，菜单实际上不会打开，但我仍然收到触觉反馈。我只在菜单实际
也许这是一个简单的解决方案，但我坚持了下来。 这里有我的代码 http://jsbin.com/ejomuv纯CSS菜单 我想要做的是在悬停时在下拉按钮底部设置 0px 边框半径，但仅在下拉菜单上设置
下拉列表、菜单和组合框都是非常常见的用户界面元素。用户习惯于在 native 应用程序和 Web 应用程序中看到这些元素，但它们存在一些问题。 您必须瞄准鼠标。当您将鼠标移开时，有些菜单会折叠，而有些
我有 codeigniter 背景。现在，我正在学习 Laravel。所以，我处于这种情况(示例)，我正在尝试创建一个具有多个用户的 web 应用程序。用户类型 A ，他们可以访问菜单 a、菜单 b
我正在学习 JQuery 的基础知识，我的老师显示的 menu() 看起来根本不像我的。 这是我创建的菜单的 LAF: 代码: Hello Hi Welcome World
- SELECT - 上面的显示:none不起作用。我也尝试过“隐藏”，但没有成功。 如何隐藏此选择菜单？ 最佳答案 换行与 或并将 id 添加到标签。 - SELECT
我使用 Jquery 创建菜单，如下所示: homeinfo2info3 Jquery 代码如下: $(document).ready(function(){ $(".prof_info1").unb
我是 C 新手，我需要为项目构建一个带有循环的菜单。我有两个问题。 1) 我想在 else 中添加一个字符，如果在主菜单中按“2”后询问某事，问题将是“你要去参加事件吗？”用户可以输入聊天“Y”或“N
大家好，过去几个小时我一直在为类(class)编写这个程序，但似乎无法解决最后两个问题。它基本上是一个略微修改的 CashRegister 类，通过菜单提供基本功能。我遇到的问题是: 1) 用户第一次
List studentInfo = new LinkedList(); int choice; boolean flag = true; Student student =
我正在使用 bootsrap 4 alpha 6 和 midnight.js 来更改导航菜单切换器的颜色。我想在它旁边插入一个文本(菜单)。捕获中的示例。对于文本切换器，我使用 fontawesome
我正在尝试使用 CSS 菜单解决菜单在 IE 6 中无法正确显示的问题 alt text http://content.screencast.com/users/Dokmanc/folders/Jin
我无法让这段代码工作 - 我想要的是当我将鼠标悬停在圆圈上时，菜单会出现，然后如果我将鼠标从圆圈或菜单上移开，它就会消失。我尝试做的任何事情都是非常错误的，例如 onmouseover 在圆圈上然后在
我有一个典型的 CSS 顶部导航，当您滑过不同的父菜单项时，它会显示一个子菜单。如何更改代码以保持显示事件子菜单。因此，如果您在该父菜单项或其子项之一的页面上，它将保持显示该子菜单，除非您将鼠标悬停在
我很亲近。我怎样才能在我的 上有 MENU 1。 fiddle显示为默认菜单选项，然后在 MENU 2 悬停时更改？ 提前致谢。继续编码! :) 最佳答案 要根据您的响应完全远离 jquery 进行编
我是一名优秀的程序员,十分优秀！