0

Is it possible to display a sub-list beside it's parent using only css and no fixed width?

I'm trying to implement a navigation menu in css. I managed to display the first submenu under it's parent. But when it come to the submenu of the submenu, I only manged to put it beside it's parent with a fixed offset. But since the offset can differ depending on the width of the parent, and the width of the parent change depending of the browser used, that solution does not work.

here is my 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;
}

I want to get rid of the .nav-main-menu li li:hover ul left offset.

And here is the revelant part of my html code

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

1 回答 1

1

当您绝对定位子菜单时，不可能允许它增长并将第二个子菜单定位在宽度波动的父子菜单旁边，至少在没有 JS 的情况下不会。

根据我的经验，通常你很可能想要一个固定宽度的子菜单，而不是受制于内容，因为如果内容很长，这在设计中看起来不太好，至少 99% 的情况。因此，我建议您限制子菜单的最大宽度，并通过一些规划，您可以允许更大的内容，如果无法避免长内容，只需让它下降到两行。

另外我知道这可能只是用于询问问题的示例 CSS，但是您的 CSS 样式布局不是很好，也不能很好地级联，这会使高级 CSS 样式变得困难且耗时。尽量避免使用冗长、不清楚和复杂的选择器，CSS 的美妙之处在于能够轻松地级联样式。较小的简洁选择器也有助于提高性能。

使用可以减少的类

.nav-main-menu li li li {}

至

.submenu ul li{}

我意识到这并不完全是您可能正在寻找的答案，但我已经创建了一个快速的基本风格，可以根据我的建议设置子菜单的 HTML 样式。我在.submenu所有包含子菜单的 li 中添加了一个类，包括二级子菜单。

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

希望这可以帮助

于 2013-09-05T21:00:44.910 回答