Html Вертикальное меню, подменю появляются не ниже родительского

Я создал одну вертикальную строку меню с несколькими подменю, но ее подменю появляются не ниже родительского меню. 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>

Любые советы о том, как я могу всегда отображать подменю под своим родителем, будут оценены

NIKHIL K A 27.06.2017 источник

Ответы (2)

arrow_upward
0
arrow_downward

Я сделал что-то подобное недавно для стажировки, попробуйте это. 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;}

Rohit Jaiswal 27.06.2017

arrow_upward
0
arrow_downward

Просто обратитесь к примеру ниже с кодом

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; /* Нижняя линия у последнего пункта меню */
}

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

VISHAL SINGH 27.06.2017

comment

Как только я нажимаю на главное меню, мне нужны только соответствующие подменю. - NIKHIL K A; 27.06.2017

comment

просто добавьте .menu li:hover .sub-menu{display:block;} в конец файла и добавьте в каждое последнее меню в html-файле. - VISHAL SINGH; 27.06.2017

comment

Если я нажму на меню с несколькими вкладками, оно не откроется как новая вкладка. Это просто замена текущей вкладки. [Пример приведенного потока BIZ OPS -> ЗАГРУЗИТЬ ДАННЫЕ -> ЗАГРУЗИТЬ x1] - NIKHIL K A; 27.06.2017

comment

как я сказал в вашем html-коде, вы не добавляете классы должным образом. обратитесь к моему примеру jsfiddle. Вам нужно добавить меню, классы подменю, потому что я пишу css соответственно - VISHAL SINGH; 27.06.2017

comment

затем, пожалуйста, создайте еще одну скрипту js и вставьте туда свой код. - VISHAL SINGH; 28.06.2017

comment

код, который я упомянул в скрипке, показывает подменю рядом с главным меню - VISHAL SINGH; 28.06.2017

Html Вертикальное меню, подменю появляются не ниже родительского

Ответы (2)

Похожие вопросы