制作一个下拉菜单

时间：2017-10-19 15:28:37

标签： html css drop-down-menu menu

你是否认为在悬停时可以制作一个上下菜单（可能使得菜单处于绝对位置并不足够）。我想制作一个双重菜单（首先是CR上下，之后更多。

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

这是我的实际菜单：

＆＃13;
＆＃13; 
@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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

感谢您的快速回复，我已经能够管理该菜单

@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&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>

相关问题
最新问题