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

时间:2014-04-21 12:23:22

标签: html css

下拉菜单有效,但它从底部推送链接 我无法弄清楚为什么它会推动菜单 也许它与宽度有关,或者我错过了什么。 请帮帮我,我必须遗漏一些东西。这是我的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/

1 个答案:

答案 0 :(得分: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