首页新闻找找看学习计划

求大神帮忙看看CSS那里错了 第二级菜单和第三级菜单的UL都重叠了

0
悬赏园豆:80 [已解决问题] 解决于 2014-07-21 16:51
<div id="content">
        <div id="col_1">
            <div id="letter-menu">
                <navl>
                    <ul>
                        <li>
                            <a>aaa</a>
                            <ul>
                                <li>
                                    <a>bbbb</a>
                                    <ul>
                                        <li>
                                            <a>ccccc</a>
                                        </li>
                                    </ul>
                                    <ul>
                                        <li>
                                            <a>dddddd</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a>eeee</a>
                                    <ul>
                                        <li>
                                            <a>ffff</a>
                                        </li>
                                    </ul>
                                    <ul>
                                        <li>
                                            <a>gggg</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </navl>
            </div>
        </div>
    </div>    
navl {
    margin: 0;
}
navl a:link, navl a:visited{
    color: #B3B3C1;
}
navl ul ul {
    display: none;
}


navl ul li:hover > ul {
    display:block;
}
navl ul {
    padding: 0;
    margin: 0px 0px 15px 0px;
    list-style: none;
    position: relative;
    display: inline-table;
    z-index:1000;
}

navl ul li {
    float: left;    
}
navl ul li:hover {
    background: #FFFFFF;
}
navl ul li:hover a {
    background-color: #175581;
    color: #FFFFFF;
}
    
navl ul li a {
    display: block; 
    padding: 1px 5px;
    border: solid 1px #B3B3C1;
    margin-right: 5px;
    width: 10px;
    text-decoration: none;
}
navl ul ul {
    border-radius: 0px; 
    padding: 0;
    position:absolute; 
    top: 22px;
    width: 120px;
    background: #F5F5FA;
}
navl ul ul li {
    float: none; 
    position: relative;
}
navl ul ul li a {
    padding: 5px;
    color: #fff;
    width: 150px;
    background: #FFFFFF;
    border: 1px solid #B3B3C1;
}    
navl ul ul li a:hover {
    background: #F5F5FA;
    color: #175581;
}
navl ul ul ul {
    border-radius: 0px; 
    padding: 0;
    position: absolute; 
    top: 0px;
    left: 161px;
    width: 120px;
    background: #F5F5FA;
}
navl ul ul ul li {
    float: none; 
    position: relative;
}
navl ul ul ul li a {
    padding: 5px;
    color: #fff;
    width: 150px;
    background: #FFFFFF;
    border: 1px solid #B3B3C1;
}    
navl ul ul ul li a:hover {
    background: #F5F5FA;
    color: #175581;
}
#content {
    float: left;
    padding: 0 15px;
    width: 720px;
    margin-bottom: 15px;
}
#col_1 { float: left; width: 720px; }
小孩小孩的主页 小孩小孩 | 初学一级 | 园豆:116
提问于:2014-07-21 14:34
< >
分享
最佳答案
1

  <div id="content">
        <div id="col_1">
            <div id="letter-menu">
                <navl>
                    <ul>
                        <li>
                            <a>aaa</a>
                            <ul>
                                <li>
                                    <a>bbbb</a>
                                    <ul>
                                        <li>
                                            <a>ccccc</a>
                                        </li>
                                         <li>
                                            <a>dddddd</a>
                                        </li>
                                    </ul>
                                </li>
                                 <li>
                                    <a>eeee</a>
                                    <ul>
                                        <li>
                                            <a>ffff</a>
                                        </li>
                                        <li>
                                            <a>gggg</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </navl>
            </div>
        </div>
    </div>   

 

    <style type="text/css">
*{padding:0;margin:0;}

navl a:link, navl a:visited{
    color: #B3B3C1;
}
navl ul ul {
    display:none;
}


navl ul li:hover > ul {
    display:block;
}
navl ul {
    padding: 0;
    margin: 0px 0px 15px 0px;
    list-style: none;
    position: relative;
    display: inline-table;
    z-index:1000;
}

navl ul li {
    float: left;    
}
navl ul li:hover {
    background: #FFFFFF;
}
navl ul li:hover a {
    background-color: #175581;
    color: #FFFFFF;
}
    
navl ul li a {
    display: block;
    padding: 1px 5px;
    border: solid 1px #B3B3C1;
    margin-right: 5px;
    width: 10px;
    text-decoration: none;
}
navl ul ul {
    top: 22px;
    width: 120px;
    background: #F5F5FA;
}
navl ul ul li {
    float: none;
    position: relative;
}
navl ul ul li a {
    padding: 5px;
    color: #fff;
    width: 150px;
    background: #FFFFFF;
    border: 1px solid #B3B3C1;
}    
navl ul ul li a:hover {
    background: #F5F5FA;
    color: #175581;
}
navl ul ul ul {
    position:absolute;
    margin-top:-1.4em;
    left: 161px;
    width: 120px;
    background: #F5F5FA;
}
navl ul ul ul li {
    float: none;
    position:relative;
    display:block;
}
navl ul ul ul li a {
    padding: 5px;
    color: #fff;
    width: 150px;
    background: #FFFFFF;
    border: 1px solid #B3B3C1;
}    
navl ul ul ul li a:hover {
    background: #F5F5FA;
    color: #175581;
}
#content {
    float: left;
    padding: 0 15px;
    width: 720px;
    margin-bottom: 15px;
}
#col_1 { float: left; width: 720px; }
    </style>

我把你的html结构改了一下,css也有变化,请你和你的原代码对照一下看看变化吧

收获园豆:80
Albert Fei | 老鸟四级 |园豆:2102 | 2014-07-21 15:51

谢谢  中东自己错在那里了 嵌套结构也错了

小孩小孩 | 园豆:116 (初学一级) | 2014-07-21 16:50

@小孩小孩: 问题解决了就好

Albert Fei | 园豆:2102 (老鸟四级) | 2014-07-21 17:18
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册