在其父代旁邊顯示一個垂直子列表

Question

是否可以在其父代旁邊僅使用css而沒有固定寬度顯示子列表？

我想在CSS中實現導航菜單。我設法顯示其父項下的第一個子菜單。 但是，當它進入子菜單的子菜單時，我只是將它放在它的父母身旁並且具有固定的偏移量。但是由於偏移量可能會根據父級的寬度以及父級更改的寬度（取決於所使用的瀏覽器）而有所不同，因此該解決方案不起作用。

這裏是我的CSS

.main-nav{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 0; 
    text-align: center; 
} 

.nav-centered { 
    display: inline-block; 
    text-align: left; 
    margin:0; 
    padding:0; 
    z-index:10; 
} 

.nav-main-menu { 
    list-style-type: none; 
    background-color:#91a056; 
    margin:0; 
    padding:0; 
    height:25px 
} 

.nav-main-menu li { 
    display: inline; 
    text-align: center;  
    float:left; 
    position:relative; 
} 

.nav-main-menu li a img { 
    padding-bottom:0px; 
    color: #fff; 
    background-color: #91a056; 
} 

.nav-main-menu li a:hover { 
    background-color: #bbc888; 
} 

.nav-main-menu li li a:hover, .nav-main-menu li li span:hover, .nav-main-menu li li span:hover { 
    background-color: #bbc888; 
} 

.nav-main-menu li:hover ul { 
    display:block; 
    float:left; 
} 

.nav-main-menu li li, .nav-main-menu li li li { 
    display:block; 
    text-align:left; 
    width:100%; 
    border: 3px ridge #91a056; 
} 

.nav-main-menu li ul, .nav-main-menu li li ul, .nav-main-menu li:hover li ul { 
    display:none; 
    position:absolute; 
} 

.nav-main-menu li li:hover ul { 
    display:block; 
    float:left; 
    top:0px; 
    left:176px; /* I want to get rid of this fixed offset */ 
} 

.nav-main-menu li li li a, .nav-main-menu li li a, .nav-main-menu li li span { 
    display:block; 
    text-align: left; 
    white-space: nowrap; 
    font-size:100%; 
    color: #FFF; 
    padding: 0 1em; 
    background-color: #91a056; 
} 

.nav-main-menu li li a span{ 
    padding: 0; 
} 

.nav-main-menu li a { 
    margin-left:auto; 
    margin-right:auto; 
    font-size:120%; 
    text-decoration: none; 
    padding: 0 1em; 
    color: #fff; 
    background-color: #91a056; 
} 

我想擺脫.nav-main-menu li li:hover ul的左側偏移。

這裏是我的HTML代碼中的revelant部分

<div xmlns="http://www.w3.org/1999/xhtml" class="main-nav"> 
<div class="nav-centered"> 
<ul class="nav-main-menu"> 
    <li><a href="/" ><span>Acceuil</span></a></li> 
    <li><a href="/?_=/page/regle" ><span>Regles de jeu</span></a> 
     <ul> 
      <li><span>Les personnages</span> 
       <ul> 
        <li><a href="/?_=/page/regle/commencer" ><span>Se creer un personnage</span></a></li> 
        <li><a href="/?_=/page/regle/race" ><span>Les Races</span></a></li> 
        <li><a href="/?_=/page/regle/alignement" ><span>Les Alignements</span></a></li> 
        <li><a href="/?_=/page/regle/entrainement" ><span>Les Entrainements</span></a></li> 
        <li><a href="/?_=/page/regle/conpetence" ><span>Les Competences</span></a></li> 
        <li><a href="/?_=/page/regle/handicape" ><span>Les Handicapes</span></a></li> 
        <li><a href="/?_=/page/regle/dieu" ><span>Les Dieux</span></a></li> 
        <li><a href="/?_=/page/regle/doamine" ><span>Les Domaines</span></a></li> 
        <li><a href="/?_=/page/regle/sort" ><span>Les Sorts</span></a></li> 
        <li><a href="/?_=/page/regle/profile" ><span>Les Profiles</span></a></li> 
        <li><a href="/?_=/page/regle/terrictoire" ><span>Les Terrictoires</span></a></li> 
        <li><a href="/?_=/page/regle/prestige" ><span>Les Prestiges</span></a></li> 
       </ul> 
      </li> 
      <li><span>Les reglements</span> 
       <ul> 
        <li><a href="/?_=/page/regle/combat" ><span>Les Combats</span></a></li> 
        <li><a href="/?_=/page/regle/etatAlterer" ><span>Les Etats Alteres</span></a></li> 
       </ul> 
      </li> 
      <li><span>L'univers</span> 
       <ul> 
        <li><a href="/?_=/page/regle/seigneurie" ><span>Les Seigneuries</span></a></li> 
        <li><a href="/?_=/page/regle/groupe" ><span>Les Groupes</span></a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li class="nav-login"><a href="/?_=/login" ><span>Inconnue</span></a> 
     <ul> 
      <li><a href="/?_=/login" ><span>Se connecter</span></a></li> 
     </ul> 
    </li> 
    <li><a href="/?_=/page/info" ><span>Qui sommes-nous?</span></a></li> 
    <li><a href="/?_=/forum" ><span>Forum</span></a></li> 
    <li><a href="https://www.facebook.com/" ><img alt="Page facebook" src="/img/icon-facebook.gif" style="max-width:19.0px;max-height:19.0px;" /></a></li> 
</ul> 
</div> 
</div> 

Answer 1

正如你絕對定位的子菜單，這是不可能允許它成長和第二子菜單下一個位置波動寬度父子，至少不是沒有JS。根據我的經驗，一般你很可能會想要一個固定寬度的子菜單而不是內容的擺佈，因爲如果內容很長，在設計中看起來不會很好，至少99％的時間。 所以我建議你限制子菜單的最大寬度，並且有一些規劃可以允許更大的內容，並且如果長內容不可避免地只允許它放在兩行上。

另外我明白，這可能只是用於提出問題的示例CSS，但是您的CSS樣式不是很好的佈局，也不會級聯得很好，這可以使高級CSS樣式變得困難和耗時。儘量避免使用冗長，不清楚和複雜的選擇器，CSS的美妙之處在於能夠輕鬆地級聯樣式。較小的簡潔選擇器也有助於提高性能。

使用類，你可以減少

.nav-main-menu li li li {} 

到

.submenu ul li{} 

我知道這不完全是你可能尋找答案，但我已經創建了一個快速的基本撥弄樣式風格你的子菜單的HTML與我的建議。我爲所有包含子菜單的li添加了.submenu類，包括輔助子菜單。

http://jsfiddle.net/lee_gladding/xRyMW/

希望這有助於