Question

让我的子子列表显示为内联时遇到麻烦。我尝试了一堆没有帮助解决问题的东西。

<header>
    <nav class="nav">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="services.html">Services</a>
            <ul>
            <li><a href="addiction.html"> Drug and addiction consoling</a></li>
            <li><a href="life.html"> Life coaching</a></li>
            </ul>
            </li>
            <li><a href="articles.html">Articles</a>
            <ul>
                <li><a href="famlies.html">Addiction and famlies</a></li>
                <li><a href="steps.html">What is the first step?</a>
                <ul>
                <li><a href="one.html"><span>Step 1</span></a></li>
                <li><a href="two.html"><span>Step 2</span></a></li>
                <li><a href="three.html"><span>Step 3</span></a></li>
                </ul>
                </li>
                <li><a href="religion.html">Relgion and breaking addition</a></li>
            </ul>
            </li>
            <li><a href="inspiration.html">Inspiration</a></li>
        </ul>
    </nav>
</header>

这是我的css

body
{
    background-color: #ff9900;
    font-family: 'Merriweather', serif;
    width: 100%;
    margin: 0 auto;
}

header
{
    text-align: center;
    width: 100%;
    background: rgb(116, 206, 126); 
    display: nowrap;
    margin-bottom: 10px;
}

nav ul ul 
{
    display: none;
}

nav ul li:hover > ul 
{
    display: block;
}

nav ul 
{
    padding: 0;
    border-radius: 0px;  
    list-style: none;
    position: relative;
    display: inline-table;

}

nav ul:after
{
    display: inline-block;

}

nav ul li
{
    float: left;

}

nav ul li:hover
{
    background-color:  #6559ff;
    border-radius: 10px;
    -webkit-transition: background-color 500ms ease-out;
    -moz-transition: background-color 500ms ease-out;
    -o-transition: background-color 500ms ease-out;
    transition: background-color 500ms ease-out;
}

nav ul li:hover a
{
    color: #fff;

}

nav ul li a
{
    display: block; 
    padding: 10px 70px;
    color: #000080; 
    text-decoration: none;  
    -webkit-transition: background-color 500ms ease-out;
}

nav ul ul
{
    background: #5f6975;
    border-radius: 0px; 
    position: absolute; 
    top: 100%; /*wat?*/
    padding: 0;
    text-align: left;
}

nav ul ul li
{
    float: none;/*wat?*/
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
    padding: 0;
    text-align: left;
}

nav ul ul li a 
{
    color: #fff;
    padding: 15px;
}

nav ul ul li a:hover
{
    background-color: #f2f2f2;
    padding: 15px;
    color: #000000;
}

nav ul ul ul 
{
    position: absolute; 
    left: 100%; 
    top:0;
}

我意识到这看起来像一团糟。这是一个jsfiddle.我非常感谢你的帮助。感谢您的时间和考虑。

Answer 1

在我看来，如果我理解这个问题是正确的：

nav ul li a {
   clear: none;
   float: left;
   display: inline;
}

见小提琴 - ＆gt;的 http://jsfiddle.net/Pvtqu/

Answer 2

您必须为列表指定宽度，因为其定位为absolute

nav ul ul ul 
{
    position: absolute; 
    left: 100%; 
    top:0;
    width: 100%; /* XXpx or whatever */
}

http://jsfiddle.net/BWZfr/276/

为什么我的子子列表不显示内联？

2 个答案: