固定大小的子菜单

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>