Question

我需要你的帮助。

我的子子菜单看起来与子菜单重叠，这很好，但是我想将它向右推，只是为了让子菜单文本不被切断。

以下是正在发生的事情的图片：

enter image description here

这是我的HTML和CSS标记：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>List of Frequently Used Templates for Road Safety</title>
<style type="text/css">
#navigation {
    width: 150px;
    font-size: 0.75em;
}
#navigation ul {
    margin: 0px;
    padding: 0px;
}

ul.top-level {
    background: #666;
}

#navigation li {
    list-style: none;
}
ul.top-level li {
    border-bottom: #fff solid;
    border-top: #fff solid;
    border-width: 1px;
}

#navigation a {
    color: #fff;
    cursor: pointer;
    display:block;
    height:25px;
    line-height: 25px;
    text-indent: 10px;                  
    text-decoration:none;
    width:100%;
}
#navigation a:hover{ 
    text-decoration:underline;
}
#navigation li:hover {
    background: #f90;
    position: relative;
}
ul.sub-level {
    display: none;
}
li:hover .sub-level {
    background: #999;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 75px;
    top: 5px;
}
ul.sub-level li {
    border: none;
    float:left;
    width:150px; 
}

#navigation .sub-level {
    background: #999;
}
#navigation .sub-level .sub-level {
    background: #09C;
}

li:hover .sub-level .sub-level {
    display:none;
}

.sub-level li:hover .sub-level {
    display:block;
}   
</style>
</head>
    <body>
        <div id="navigation">
            <ul class="top-level">
                <li><a href="#">Home</a>
                    <ul class="sub-level">
                        <li><a href="#">Sub Menu Item 1</a>
                        </li>
                        <li>
                            <a href="#">Sub Menu Item 2</a>
                            <ul class="sub-level">
                                <li><a href="#">Sub Sub Menu Item 1</a></li>
                                <li><a href="#">Sub Sub Menu Item 2</a></li>
                                <li><a href="#">Sub Sub Menu Item 3</a></li>
                                <li><a href="#">Sub Sub Menu Item 4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Sub Menu Item 3</a></li>
                        <li><a href="#">Sub Menu Item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
                <li>
                    <a href="#">FAQ</a>
                    <ul class="sub-level">
                        <li><a href="#">Sub Menu Item 1</a></li>
                        <li>
                            <a href="#">Sub Menu Item 3</a>
                            <ul class="sub-level">
                                <li><a href="#">Sub Sub Menu Item 1</a></li>
                                <li><a href="#">Sub Sub Menu Item 2</a></li>
                                <li><a href="#">Sub Sub Menu Item 3</a></li>
                                <li><a href="#">Sub Sub Menu Item 4</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">News</a>
                    <ul class="sub-level">
                        <li><a href="#">Sub Menu Item 1</a>
                            <ul class="sub-level">
                                <li><a href="#">Sub Sub Menu Item 1</a></li>
                                <li><a href="#">Sub Sub Menu Item 2</a></li>
                                <li><a href="#">Sub Sub Menu Item 3</a></li>
                                <li><a href="#">Sub Sub Menu Item 4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Sub Menu Item 2</a></li>
                        <li><a href="#">Sub Menu Item 3</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>

Answer 1

您可以尝试添加此

li:hover .sub-level li:hover .sub-level { 
    left: 175px;
}

Answer 2

调整代码以匹配以下内容。工作样本：http://codepen.io/BJack/full/Cflem

＆lt;的宽度li＆gt;是150px，因此当绝对定位时，将左侧属性偏移150px。

li:hover .sub-level {
    background: #999;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 150px;
    top: 0px;
}

.sub-level li:hover .sub-level {
  display:block;
  position: absolute;
  left: 150px;
}

进一步推送子子菜单

2 个答案: