Question

我的幻灯片菜单有一个小问题。幻灯片从下到上。这也很好。

但是现在我想把位置设置在左侧，这样我就可以在主菜单上找到一条线。

也许有人可以帮助我。这是我的样本......

This is my code...  [Menu][1]  https://jsfiddle.net/Tabes/eb52suo1/15/

Answer 1

这是您的解决方案

.flex-box {
  width: 100%;
  min-height: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
}

.navigation {
  background-image: linear-gradient(#444, #111);
  background-color: #111;
  width: 100%;
}


/* ******************************************************************************************* */


/* *****  Main Navigation - Main Level ******************************************************* */


/* ******************************************************************************************* */

.nav_main {
  background: transparent;
  list-style: none;
}

.nav_main ul:before,
.nav_main ul:after {
  content: "";
  display: table;
}

.nav_main ul {
  list-style: none outside none;
  position: relative;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  margin: 0px;
  padding: 0px;
  min-width: auto;
  min-height: auto;
  zoom: 1;
}

.nav_main ul li:before,
.nav_main ul li:after {
  content: "";
  display: inline;
}

.nav_main ul li.icon:before,
.nav_main ul li.icon:after {
  display: inline-block;
  margin: 2px 15px 0px 0px;
  width: 15px;
  height: 15px;
}

.nav_main ul li.icon:before {
  background: url("../pic/icons/glyphicons-387-log-in.png") no-repeat top right;
  background-size: 15px;
  float: left;
  margin: 2px 15px 0px 0px;
}

.nav_main ul li.icon:after {
  background: url("../pic/icons/glyphicons-415-disk-save.png") no-repeat top left;
  background-size: 15px;
  float: right;
  margin: 2px 0px 0px 15px;
}

.nav_main ul li>img.before,
.nav_main ul li>img.after {
  display: inline-block;
  margin: 2px 15px 0px 0px;
  width: 15px;
  height: auto;
}

.nav_main ul li>img.before {
  float: left;
  margin: 2px 15px 0px 0px;
}

.nav_main ul li>img.after {
  float: right;
  margin: 2px 0px 0px 15px;
}

.nav_main ul li:last-child {
  border-right: none;
  box-shadow: none;
}

.nav_main ul li:hover {
  background: #444;
  display: inline-block;
  margin: 0px;
  padding: 10px 35px;
  min-width: auto;
  min-height: auto;
}

.nav_main ul li {
  border-right: 1px solid #222;
  box-shadow: 1px 0 0 #444;
  cursor: pointer;
  text-align: center;
  display: inline-block;
  flex: 0 0 auto;
  position: relative;
  margin: 0px;
  padding: 10px 35px;
  min-width: auto;
  min-height: auto;
}

.nav_main ul li>a:hover {
  color: #fafafa;
}

.nav_main ul li>a {
  font: bold 12px Arial, Helvetica;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 0 #000;
  color: #999;
}

.nav_main ul li:hover>ul {
  visibility: visible;
  opacity: 1;
  margin: 0;
}


/* ******************************************************************************************* */


/* *****  Main Navigation - Level #1  ******************************************************** */


/* ******************************************************************************************* */

.nav_main ul ul {
  list-style: none outside none;
  position: absolute;
  background: #444;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  flex-direction: column;
  align-items: flex-start;
  visibility: hidden;
  opacity: 0;
  top: 40px;
  left: 0;
  z-index: 5;
  transition: all 0.2s ease-in-out;
  margin: 10px 0px 0px 0px;
  padding: 0px;
  min-width: 185px;
  min-height: 35px;
  width: auto;
}

.nav_main ul ul li:before,
.nav_main ul ul li:after {
  content: "";
  display: inline;
}

.nav_main ul ul li.icon:before,
.nav_main ul ul li.icon:after {
  display: inline-block;
  margin: 4px 35px 0px 0px;
  width: 15px;
  height: 15px;
}

.nav_main ul ul li.icon:before {
  background: url("../pic/icons/glyphicons-387-log-in.png") no-repeat top right;
  background-size: 15px;
  float: left;
  margin: 4px 35px 0px 0px;
}

.nav_main ul ul li.icon:after {
  background: url("../pic/icons/glyphicons-415-disk-save.png") no-repeat top left;
  background-size: 15px;
  float: right;
  margin: 4px 0px 0px 35px;
}

.nav_main ul ul li>img.before,
.nav_main ul ul li>img.after {
  display: inline-block;
  margin: 4px 35px 0px 0px;
  width: 15px;
  height: auto;
}

.nav_main ul ul li>img.before {
  float: left;
  margin: 4px 35px 0px 0px;
}

.nav_main ul ul li>img.after {
  float: right;
  margin: 4px 0px 0px 35px;
}

.nav_main ul ul li:hover {
  background: #444;
  background-image: linear-gradient(#04acec, #0186ba);
  background-color: #0186ba;
  display: inline-block;
  margin: 0px;
  padding: 5px 15px;
  min-width: 185px;
  min-height: 35px;
}

.nav_main ul ul li:first-child:hover {
  border-radius: 3px 3px 0px 0px;
}

.nav_main ul ul li:last-child:hover {
  border-radius: 0px 0px 3px 3px;
}

.nav_main ul ul li {
  border: none;
  box-shadow: none;
  text-align: left;
  display: inline-block;
  flex: 0 0 auto;
  margin: 0px;
  padding: 5px 15px;
  min-width: 185px;
  min-height: 35px;
}

.nav_main ul ul li>a:hover {
  color: #fafafa;
}

.nav_main ul ul li>a {
  font: bold 12px Arial, Helvetica;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 0 #000;
  color: #999;
}

.nav_main ul ul li:hover>ul {
  visibility: visible;
  opacity: 1;
  margin: 0;
}

<!-- Main Navigation (Container for JavaScript Function)-->
<div id="Navigation" class="navigation">
  <!-- ### Main Navigation Link Liste ### -->
  <nav id="Nav_Main" class="nav_main">
    <ul class="flex-box">
      <li>
        <a href="home.html">Home</a>
        <ul class="flex-box">
          <li>
            <a href="home/referenzen.html">Referenzen</a>
          </li>
          <li>
            <a href="home/downloads.html">Downloads</a>
          </li>
          <li>
            <a href="home/partner.html">Partner Programm</a>
          </li>
          <li>
            <a href="home/existenz.html">Existenzgr&uuml;nder</a>
          </li>
          <li>
            <!-- <a href="home/philosophie.html">Philosophie</a> -->
            <a href="oopsy.html">Philosophie</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="hosting.html">Hosting</a>
        <ul class="flex-box">
          <li>
            <a href="hosting/webhosting.html">Web Hosting</a>
          </li>
          <li>
            <a href="hosting/cms/typo3.html">TYPO3</a>
          </li>
          <li>
            <a href="hosting/cms/wordpress.html">WordPress</a>
          </li>
          <li>
            <a href="hosting/shop/mgento.html">Magento</a>
          </li>
          <li>
            <a href="hosting/shop/prestashop.html">PrestaShop</a>
          </li>
        </ul>
      </li>
      <li>
        <a class="ajaxy" href="webdesign.html">WebDesign</a>
      </li>
    </ul>
  </nav>
  <!-- ### Main Navigation Link Liste End ### -->
</div>
<!-- Main Navigation Container End -->

Answer 2

在flex-box课程中，您可以添加margin-left: -35px;，它会根据片段修复子菜单的位置。但是，您应该提一下，这可能会导致您网站的响应部分出现问题。

子菜单，更左侧设置位置

2 个答案: