html - 使用 CSS 对齐和正确定位子菜单

Question

我如何定位一级菜单，以便它准确地弹出在相应菜单选项的底部，因为它向右偏移了大约 2 个像素。问题是，如果我指定某个距离，例如“left: 20px;”，因为定位因素是绝对的，它会在水平方向上滚动所有页面，而不停留在特定位置。

二级子菜单更差。它显示在离菜单很远的地方，在底部，而且由于定位是相对的，我根本无法改变它的坐标。

代码如下:

HTML

    <nav class="meniu">
        <ul>
        <li>option1</li>
        <li>option2
            <ul class="prezentare">
            <li class="prezentare">suboption2.1</li>        
            <li class="prezentare">suboption2.2</li>                
            </ul>
        </li>   
        <li>option3
            <ul class="resurse">
            <li class="resurse">suboption3.1</li>       
            <li class="resurse">suboption3.2
                <ul>
                <li>suboption3.2.1</li>
                <li>suboption3.2.2</li>
                <li>suboption3.2.3</li>
                </ul>
            </li>       
            <li class="resurse">suboption3.3</li>                   
            </ul>
        </li>
        <li>option4
            <ul class="oferta">
            <li class="oferta">suboption4.1</li>        
            <li class="oferta">suboption4.2</li>                
            </ul>
        </li>
        <li>option5</li>        
        <li>option6
            <ul class="activitati">
            <li class="activitati">suboption6.1
                <ul>
                <li>suboption6.1.1</li>
                <li>suboption6.1.2</li>
                </ul>           
            </li>       
            <li class="activitati">suboption6.2</li>                
            </ul>
        </li>   
        <li>option7</li>            
        </ul>
    </nav>

CSS

    nav.meniu
        {
        cursor: pointer;

        font-family: "Georgia";
        }

     li:hover
        {
        background-color: red;
        }

    /*meniu grad I*/
    ul 
        {
        display:inline;
        list-style:none;
        }

    ul li
        {
        padding: 5px;
        float: left;
        }

    /*First degree submenu*/
    ul li ul 
        {
        display: none;
        }

    ul li:hover ul 
        {
        display: block;
        position: absolute;
        margin: 0px;
        padding: 0px;
        top: 227px;
        font-size: 10px;
        }

    ul li ul li
        {
        background-color: white;
        }

    /*second degree submenu*/
    ul li ul li ul li
        { 
        display: none;
        }

    ul li ul li:hover  ul  li
        {
        display: block;
        right: -178px;
        top:-205px;
        }

    /*formating on elements*/
    .prezentare
        {
        width: 160px;
        }

.resurse
    {
    width: 110px;
    }

.oferta
    {
    width: 120px;   
    }

.activitati
    {
    width: 160px;   
    }

Answer 1

您必须添加相对于父级 li 的 position，然后相应地设置子级 ul 的定位。

   nav.meniu {
     cursor: pointer;
     font-family: "Georgia";
   }
   li:hover {
     background-color: red;
   }
   /*meniu grad I*/
   ul {
     display: inline;
     list-style: none;
   }
   ul li {
     padding: 5px;
     float: left;
     position: relative;
     /* sets the positioning context */
   }
   /*First degree submenu*/
   ul li ul {
     display: none;
   }
   ul li:hover ul {
     display: block;
     position: absolute;
     margin: 0px;
     padding: 0px;
     top: 100%;
     left: 0;
     font-size: 10px;
   }
   ul li ul li {
     background-color: white;
   }
   /*second degree submenu*/
   ul li ul li ul li {
     display: none;
   }
   ul li ul li:hover ul li {
     display: block;
     right: -178px;
     top: -205px;
   }
   /*formating on elements*/
   .prezentare {
     width: 160px;
   }
   .resurse {
     width: 110px;
   }
   .oferta {
     width: 120px;
   }
   .activitati {
     width: 160px;
   }

<nav class="meniu">
  <ul>
    <li>Acasă</li>
    <li>Prezentare
      <ul class="prezentare">
        <li class="prezentare">Istoric</li>
        <li class="prezentare">Personalitatea "Ion Lovinescu"</li>
      </ul>
    </li>
    <li>Resurse
      <ul class="resurse">
        <li class="resurse">Echipa managerială</li>
        <li class="resurse">Profesori
          <ul>
            <li>Preşcolar</li>
            <li>Primar</li>
            <li>Gimnazial</li>
          </ul>
        </li>
        <li class="resurse">Baza materială</li>
      </ul>
    </li>
    <li>Oferta educaţională
      <ul class="oferta">
        <li class="oferta">Plan de şcolarizare</li>
        <li class="oferta">Cursuri opţionale</li>
      </ul>
    </li>
    <li>Proiecte</li>
    <li>Activităţi
      <ul class="activitati">
        <li class="activitati">"Ion Lovinescu", Rădăşeni
          <ul>
            <li>Parteneriate</li>
            <li>Excursii</li>
          </ul>
        </li>
        <li class="activitati">"Mihai Niculaiasa", Lămăşeni</li>
      </ul>
    </li>
    <li>Contact</li>
  </ul>
</nav>

对于第三级菜单，您可能需要调整顶部/左侧的值。