文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >制作下拉菜单和下拉菜单

问制作下拉菜单和下拉菜单
EN

Stack Overflow用户
提问于 2017-10-19 23:28:37
回答 1查看 148关注 0票数 0

你认为在鼠标悬停的时候做一个向上和向下菜单是可能的吗(也许在绝对位置上做向上菜单是不够的)。我想做一个双重菜单(先在CR上上下移动，然后再做更多。

我实际上做了两个子菜单，但我希望其中一个显示在我的标签上。

这是我的实际菜单：

​

代码语言：javascript
复制
@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);
}
代码语言：javascript
复制
<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&amp;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>

​

html
css
drop-down-menu
menu
EN

回答 1

Stack Overflow用户

发布于 2017-10-20 15:54:43

谢谢你的快速回复，我已经管理好了菜单。

​

代码语言：javascript
复制
@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);
}
代码语言：javascript
复制
<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&amp;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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/46833530

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档