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代码的重要部分

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

希望这会有所帮助

在其父级旁边显示垂直子列表

1 个答案: