Question

下拉菜单有效，但它从底部推送链接我无法弄清楚为什么它会推动菜单也许它与宽度有关，或者我错过了什么。请帮帮我，我必须遗漏一些东西。这是我的html和css

<div class=linkbar>
<ul class="nav">
            <li><a href="index.html">Anasayfa</a></li>
            <li><a class="current-demo"  href="hakkimizda.html">Hakkımızda</a></li>
            <li><a href="vizyon.html">Vizyon ve Değerlerimiz</a></li>
            <li><a href="index3.html">Projelerimiz</a>
                <ul>
                    <li><a href="">Submenu1</a></li>
                    <li><a href="">Submenu2</a></li>
                </ul>
            </li>
            <li><a href="iletisim.html">İletişim</a></li>
        </ul>
</div>

和css

.linkbar{
width:200px;
height:300px;
padding-top:180px;
float:none;
margin:0 auto;
}

ul, ol {
            list-style:none;
            line-height: 25px;
        }

        .nav > li {
            float:left;
        }

        .nav li a {

            display:inline-block;
cursor:pointer;
color:#FFF;
font-family: 'Helvetica';
font-size:15px;
text-decoration:none;
text-transform:none;
text-align:left;
width:250px;
height:35px;
line-height:23px;
margin-top:1px;
margin-left:-25px;
        }

        .nav li a:hover {
            color:#999;
        }

        .nav li ul {
            display:none;
            position:relative;
            min-width:20px;
            right:-110px;
            top:-30px;
        }

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


        .nav li a.current-demo{
            color: #cc3333;
            text-shadow:none;

}

这里是jsfiddle http://jsfiddle.net/8f67K/

Answer 1

试试这个，

    .linkbar {
    width:200px;
    height:300px;
    padding-top:180px;
    float:none;
    margin:0 auto;
    }

    ul,ol {
    list-style:none;
    line-height:25px;
    }

    .nav > li {
    float:left;
    }

    .nav li a {
    display:inline-block;
    cursor:pointer;
    color:#FFF;
    font-family:Helvetica;
    font-size:15px;
    text-decoration:none;
    text-transform:none;
    text-align:left;
    width:250px;
    height:35px;
    line-height:23px;
    margin-top:1px;
    margin-left:-25px;
    }

    .nav li a:hover {
    color:#999;
    }

    .nav li ul {
    display:none;
    position:absolute;
    min-width:20px;
    margin-left:50px;
    margin-top:-35px;
    }

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

    .nav li a.current-demo {
    color:#c33;
    text-shadow:none;
    }

这是有效的fiddle

下拉菜单将底部链接向下推

1 个答案: