Html垂直菜单，子菜单显示不在父级下方

Question

我创建了一个带有多个子菜单的垂直菜单栏，但它的子菜单显示在父菜单的下方。 下面给出的Html代码

.vertical-menu {
  width: 400px;
  /* Set a width if you like */
}

.vertical-menu a {
  background-color: #eee;
  /* Grey background color */
  color: black;
  /* Black text color */
  display: block;
  /* Make the links appear below each other */
  padding: 12px;
  /* Add some padding */
  text-decoration: none;
  /* Remove underline from links */
}

.vertical-menu a:hover {
  background-color: #ccc;
  /* Dark grey background on mouse-over */
}

.vertical-menu a.active {
  background-color: #4CAF50;
  /* Add a green color to the "active/current" link */
  color: white;
}

#menu-v li ul {
  position: absolute;
  width: 200px;
  /*Sub Menu Items width */
  visibility: hidden;
}

#menu-v li a {
  font: normal 12px Arial;
  border-top: 1px solid #ccc;
  display: block;
  /*overflow: auto; force hasLayout in IE7 */
  color: black;
  text-decoration: none;
  line-height: 26px;
  padding-left: 26px;
}

#menu-v li,
#menu-v a {
  zoom: 1;
}


/* Hacks for IE6, IE7 */

#menu-v,
#menu-v ul {
  width: 180px;
  /* Main Menu Item widths */
  border: 1px solid #ccc;
  border-top: none;
  position: relative;
  font-size: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  z-index: 9;
}

<div class="vertical-menu">
  <ul id="menu-v" class="main">
    <li><a href="#">BIZ OPS -> </a>
      <ul class="menu">
        <li><a href="#">UPLOAD DATA -></a>
          <ul class="sub-menu">
            <li><a href="x1.jsp">UPLOAD x1</a></li>
            <li><a href="x2.jsp">UPLOAD x2</a></li>
            <li><a href="x3.jsp">UPLOAD x3</a></li>
          </ul>
        </li>
        <!--             <li><a href="worklist.jsp">WORK LIST</a></li> -->
        <li><a href="#">IOT -></a>
          <ul class="sub-menu">
            <li><a href="europe.jsp">EUROPE</a></li>
            <li><a href="apac.jsp">APAC</a></li>
            <li><a href="ag.jsp">AG</a></li>
            <li><a href="internalt.jsp">INTERNAL MOVEMENT</a></li>
            <li><a href="supportiotworklist.jsp">SUPPORT</a></li>
          </ul>

        </li>
      </ul>
    </li>
    <li><a href="#">GENERATE REPORTS-> </a>
      <ul class="sub">
        <li><a href="downloadexcel.jsp">x1 REPORT</a></li>
        <li><a href="downloadhc.jsp">x2 REPORT</a></li>
        <li><a href="error.jsp">x3 REPORT</a></li>
      </ul>
    </li>
    <li><a href="#">COST CASE -></a>
      <ul class="sub">
        <li><a href="index1.jsp">ADD CCN/PCR</a></li>
        <li><a href="viewcostcase.jsp">DEBAND COST CASE</a></li>
        <li><a href="cirelease.jsp">CI RELEASE</a></li>
        <li><a href="simplecc.jsp">VIEW COST CASE</a></li>
        <li><a href="IotCostCaseView.jsp">IOT COST CASE VEIW & EDIT</a></li>
      </ul>
    </li>
    <li><a href="#">HIRE EMPLOYEE -></a>
      <ul class="sub">
        <li><a href="#">GRB -></a>
          <ul class="sub">
            <li><a href="int.jsp">INTERNAL HIRE</a></li>
            <li><a href="ext.jsp">EXTERNAL HIRE</a></li>
          </ul>
        </li>
        <li><a href="#">PROMOTIONS -></a>
          <ul class="sub">
            <li><a href="promolist.jsp">PROMOTIONS WORKLIST</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">WORK LIST -></a>
      <ul class="sub">
        <li><a href="GrbPage.jsp">GRB WORKLIST</a></li>
        <li><a href="CcnPcrWorklist.jsp">CCN/PCR WORKLIST</a></li>
        <li><a href="DebandWorklist.jsp">DEBAND WORKLIST</a></li>
        <li><a href="LowUtemForm.jsp">LOW UTE WORKLIST</a></li>
        <li><a href="nvp.jsp">NEGATIVE VACANT POSITION WL</a></li>
      </ul>
    </li>
    <li><a href="GrbList">GRB STATUS</a></li>

    <li><a href="#">USER MANAGEMENT</a></li>
  </ul>
</div>

有关如何始终使子菜单显示在其父级下方的任何建议将不胜感激

Answer 1

我最近做了类似这样的实习尝试。 PS：您需要根据问题陈述进行编辑

这是html部分

<div id="topnav">
      <ul>
        <li class="active"><div class="dropdown"><a href="index.html" class="dropbtn">Home</a>
        <div class="dropdown-content">
                <a href="#">Link 1</a>
                 <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
          </div>
          </div>
          </li>
        <li><div class="dropdown"><a href="pages/style-demo.html" class="dropbtn">About Us</a>
         <div class="dropdown-content">
                <a href="#">Link 1</a>
                 <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
          </div>
          </div>
          </li>
        <li><div class="dropdown"><a href="pages/full-width.html" class="dropbtn">Admissions</a>
        <div class="dropdown-content">
                <a href="#">Link 1</a>
                 <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
          </div>
          </div>
          </li>
        <li><div class="dropdown"><a href="pages/3-columns.html" class="dropbtn">Rules</a>
        <div class="dropdown-content">
                <a href="#">Link 1</a>
                 <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
          </div>
          </div>
          </li>
        <li><div class="dropdown"><a href="pages/portfolio.html" class="dropbtn">Achievements</a>
        <div class="dropdown-content">
                <a href="#">Link 1</a>
                 <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
          </div>
          </div>
          </li>
        <li><div class="dropdown"><a href="pages/gallery.html" class="dropbtn">Gallery</a><div class="dropdown-content">
                <a href="#">Link 1</a>
                 <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
          </div>
          </div>
          </li>
        <li><div class="dropdown"><a href="#" class="dropbtn">Information Coner</a><div class="dropdown-content">
                <a href="#">Link 1</a>
                 <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
          </div>
          </div>
          </li>
        <li class="last"><div class="dropdown"><a href="#" class="dropbtn">Contact us</a><div class="dropdown-content">
                <a href="#">Link 1</a>
                 <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
          </div>
          </div>
          </li>

这是css

    .dropdown {
        float: left;
        overflow: visible;
    }

    .dropdown .dropbtn {
        font-size: 16px;    
        border: none;
        outline: none;

        padding: 12px 12px;
        background-color: inherit;
    }

    .dropdown:hover .dropbtn {
        background-color: #white;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #grey;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .dropdown-content a:hover {
        background-color: #ddd;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

#topnav{display:block; clear:both; width:960px; margin:0; padding:15px 0; text-align:center;}
#topnav, #topnav a{text-transform:uppercase; color:#FFFFFF; background-color:black;}
#topnav a:hover, #topnav li.active a{color:#c0c0c0; background-color:#33333;}
#topnav ul, #topnav li{margin:0; padding:0; list-style:none;}
#topnav li{display:inline; margin-right:30px;}
#topnav li.last{margin:0;}

Answer 2

请参阅下面的示例代码

[ ]{2}

ul {
    width: 180px; /* Ширина меню */
    list-style: none; /* Убираем маркеры */
    margin: 0; /* Нет отступов вокруг */
    padding: 0; /* Убираем поля вокруг текста */
    font-family: Arial, Verdana, Tahoma; /* Шрифт для текста меню */
    font-size: 8pt; /* Размер текста в пунктах меню */
}
li ul {
    position: absolute; /* Подменю позиционируются абсолютно */
    display: none; /* Скрываем подменю */
    margin-left: 165px; /* Сдвигаем подменю вправо */
    margin-top: -2em; /* Сдвигаем подменю вверх */
}

li a {
    display: block; /* Ссылка как блочный элемент */
    padding: 25px; /* Поля вокруг надписи */
    text-decoration: none; /* Подчеркивание у ссылок убираем */
    color: #666; /* Цвет текста */
    border: 1px solid #ccc;/* Рамка вокруг пунктов меню */
    background-color: #f0f0f0; /* Цвет фона */
    border-bottom: none; /* Границу снизу не проводим */
}
li a:hover {
    color: #ffe; /* Цвет текста активного пункта */
    background-color: #207cca; /* Цвет фона активного пункта */
}
@keyframes move {
    0% {margin-left: 0px; margin-right: 0px;}
    50% {margin-left: -2.5px; margin-right: -2.5px; color:#53cbf1;}
    100% {margin-left: 0px; margin-right: 0px;}
}
li a:hover {
    animation-name: move;
    /* Задержка до начала анимации */
    animation-delay: 0s;
    /* Длительность анимации */
    animation-duration: 2s;
}
li:hover ul {
    display: block; /* Делает видимым блок с меню путем подмены состояния отображения display:none на display:block */
}
li:last-child {
    border-bottom: 1px solid #ccc; /* Нижняя линия у последнего пункта меню */
}

Answer 3

ALTER

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Oxygen+Mono);
/* Starter CSS for Flyout Menu */
#cssmenu {
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 1;
}
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu ul {
  position: relative;
  z-index: 597;
  float: left;
}
#cssmenu ul li {
  float: left;
  min-height: 1px;
  line-height: 1em;
  vertical-align: middle;
  position: relative;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
}
#cssmenu ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 598;
  width: 100%;
}
#cssmenu ul ul li {
  float: none;
}
#cssmenu ul ul ul {
  top: -2px;
  right: 0;
}
#cssmenu ul li:hover > ul {
  visibility: visible;
}
#cssmenu ul ul {
  top: 1px;
  left: 99%;
}
#cssmenu ul li {
  float: none;
}
#cssmenu ul ul {
  margin-top: 1px;
}
#cssmenu ul ul li {
  font-weight: normal;
}
/* Custom CSS Styles */
#cssmenu {
  width: 200px;
  background: #999999;
  font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
  font-size: 12px;
  zoom: 1;
}
#cssmenu:before {
  content: '';
  display: block;
}
#cssmenu:after {
  content: '';
  display: table;
  clear: both;
}
#cssmenu a {
  display: block;
  padding: 15px 20px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}
#cssmenu > ul {
  width: 200px;
}
#cssmenu ul ul {
  width: 200px;
}
#cssmenu > ul > li > a {
  border-right: 4px solid #666666;
  color: #fff;
}
#cssmenu > ul > li > a:hover {
  color: #fff;
}
#cssmenu > ul > li.active a {
  background: #666666;
}
#cssmenu > ul > li a:hover,
#cssmenu > ul > li:hover a {
  background: #666666;
}
#cssmenu li {
  position: relative;
}
#cssmenu ul li.has-sub > a:after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -6px;
}
#cssmenu ul ul li.first {
  -webkit-border-radius: 0 3px 0 0;
  -moz-border-radius: 0 3px 0 0;
  border-radius: 0 3px 0 0;
}
#cssmenu ul ul li.last {
  -webkit-border-radius: 0 0 3px 0;
  -moz-border-radius: 0 0 3px 0;
  border-radius: 0 0 3px 0;
  border-bottom: 0;
}
#cssmenu ul ul {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}
#cssmenu ul ul {
  border: 1px solid #4d4d4d;
}
#cssmenu ul ul a {
  font-size: 12px;
  color: #fff;
}
#cssmenu ul ul a:hover {
  color: #fff;
}
#cssmenu ul ul li {
  border-bottom: 1px solid #4d4d4d;
}
#cssmenu ul ul li:hover > a {
  background: #808080;
  color: #fff;
}
#cssmenu.align-right > ul > li > a {
  border-left: 4px solid #666666;
  border-right: none;
}
#cssmenu.align-right {
  float: right;
}
#cssmenu.align-right li {
  text-align: right;
}
#cssmenu.align-right ul li.has-sub > a:before {
  content: '+';
  position: absolute;
  top: 50%;
  left: 15px;
  margin-top: -6px;
}
#cssmenu.align-right ul li.has-sub > a:after {
  content: none;
}
#cssmenu.align-right ul ul {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 598;
  width: 100%;
}
#cssmenu.align-right ul ul li.first {
  -webkit-border-radius: 3px 0 0 0;
  -moz-border-radius: 3px 0 0 0;
  border-radius: 3px 0 0 0;
}
#cssmenu.align-right ul ul li.last {
  -webkit-border-radius: 0 0 0 3px;
  -moz-border-radius: 0 0 0 3px;
  border-radius: 0 0 0 3px;
}
#cssmenu.align-right ul ul {
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}