html - 固定大小的子菜单

Question

我正在尝试制作一个菜单和子菜单，我想制作为所有固定大小的元素显示的子菜单。类似于本网站的菜单:http://designscrazed.org/

<div id="menu">
<ul>
<li class="current-menu-item"> element 1
<ul>
<li> <a href="#">sub element 1.2</a></li>
<li> sub element 2.2</li>
</ul>
</li>
<li> element 2
<ul>
<li> sub element 1.2</li>
<li> sub element 2.2</li>
</ul>
</li>
<li> element 3
<ul>
<li> sub element 1.3</li>
<li> sub element 2.3</li>
</ul>
</li>
 <li> element 4
 <ul>
 <li> sub element 1.4</li>
 <li> sub element 2.4</li>
 </ul>
 </li>
 <li> element 5
 <ul>
 <li> sub element 1.5</li>
 <li> sub element 2.5</li>
 </ul>
</li>
<li> element 6
<ul>
<li> sub element 1.6</li>
 <li> sub element 2.6</li>
</ul>
</li>
 <li> element 7
 <ul>
<li> sub element 1.7</li>
<li> sub element 2.7</li>
</ul>
</li>

</ul>






</div>

这是我的 CSS:

    #menu{
    background-color:magenta;
    float:right;
    width:auto;
    height:auto;
    /*display:inline-block;*/
    margin:10px 90px;
    padding: 0 0px;
    text-align:center;

    }

    #menu ul li{
    width:100px;
    height:20px;
    list-style:none;
    position:relative;
    top:0px; 
    float:left;
    margin:0 5px;
    padding:8px 0;
    cursor:pointer;




    }
#menu ul  li.current-menu-item
{

background:#ddd
} 

#menu ul li:hover{

background-color:#7F7F7F;

}

#menu ul ul{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0;
right: 50%;
margin-right: -85px;



}


#menu ul ul li{
float:none;
width:20em;
background-color:cyan;
margin:0px 0;


    }

#menu ul li:hover > ul{

display:block;  
left:auto;
right:0;
margin-right:-10px;

         }

Answer 1

这是你要找的吗？

我所做的是将 position: absolute 元素的目标更改为 #menu，方法是将其设置为 position: relative 而不是li 的

通过这样做，左/上/右值根据 #menu 进行计算，因此将 submenu 定位在其左/底部位置。

#menu{
  background-color:magenta;
  float:right;
  width:auto;
  height:auto;
  /*display:inline-block;*/
  margin:10px 90px;
  padding: 0 0px;
  text-align:center;
  position:relative;  
}

#menu ul li { 
  width:100px;
  height:20px;
  list-style:none;
  top:0px; 
  float:left;
  margin:0 5px;
  padding:8px 0;
  cursor:pointer;
}
#menu ul  li.current-menu-item {
  background:#ddd
} 

#menu ul li:hover{
  background-color:#7F7F7F;
}
#menu ul ul {
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  padding:0;
  right: 0;
}
#menu ul ul li{
  float:none;
  width:20em;
  background-color:cyan;
  margin:0px 0;
}
#menu ul li:hover > ul{
  display:block;  
}

<div id="menu">
  <ul>
    <li class="current-menu-item"> element 1
      <ul>
        <li> <a href="#">sub element 1.2</a></li>
        <li> sub element 2.2</li>
      </ul>
    </li>
    <li> element 2
      <ul>
        <li> sub element 1.2</li>
        <li> sub element 2.2</li>
      </ul>
    </li>
    <li> element 3
      <ul>
        <li> sub element 1.3</li>
        <li> sub element 2.3</li>
      </ul>
    </li>
    <li> element 4
      <ul>
        <li> sub element 1.4</li>
        <li> sub element 2.4</li>
      </ul>
    </li>
    <li> element 5
      <ul>
        <li> sub element 1.5</li>
        <li> sub element 2.5</li>
      </ul>
    </li>
    <li> element 6
      <ul>
        <li> sub element 1.6</li>
        <li> sub element 2.6</li>
      </ul>
    </li>
    <li> element 7
      <ul>
        <li> sub element 1.7</li>
        <li> sub element 2.7</li>
      </ul>
    </li>

  </ul>

</div>