下拉菜单有效,但它从底部推入链接
我想不通为什么为什么要推下菜单
也许这与宽度有关,或者我错过了一些东西。
请帮助我,我一定会丢失一些东西。这是我的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/

最佳答案

尝试这个,

    .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

关于html - 下拉菜单将底部链接下推,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23197395/

10-11 15:05
查看更多