html - 仅下拉导航菜单 block

Question

HTML 代码:

<div id="nav">
            <div id="nav_wrapper">
                <ul>
                    <li>
                    <a href="#">Admin <img src="" /></a>
                        <ul>
                            <li><a href="#">Adicionar Eventos</a></li>
                            <li><a href="#">Actualizar Eventos</a></li>
                            <li><a href="#">Eliminar Eventos</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

        </div>

CSS:

body{
        padding:0;
        margin:0;
        overflow-y:scroll;
        font-family:Arial;
        font-size:18px;
    }

    #nav{
        background-color:#333;
    }

    #nav_wrapper{
        width:960px;
        margin:0 auto;
        text-align:left;    
    }

    #nav ul{
        list-style-type:none;
        padding:0;
        margin:0;
        position:relative;  
    }

    #nav ul li{
        display:inline-block;
    }

    #nav ul li:hover{
        background-color:#333;      
    }

    #nav ul li img{
        vertical-align:middle;
        padding-left:5px;
    }

    #nav ul li a,visited{
        color:#ccc;
        display:block;
        padding:15px;
        text-decoration:none;   
    }

    #nav ul li a:hover{
        color:#ccc;
        text-decoration:none;
    }

    #nav ul li:hover ul{
        display:block;
    }

    #nav ul ul{
        display:none;
        position:absolute;
        background-color:#333;
        border: 5px solid #222;
        border-top:0;
        margin-left:-5px;
        min-width:200px;
    }

    #nav ul ul li{
        display:block;  
    }

    #nav ul ul li a,visited{
        color:#ccc; 
    }

    #nav ul ul li a:hover{
        color:#099;
    }

我收到这个:http://imgur.com/eMzuvfg

我只想让管理 block 可见，而不是完整的标题。只有一 block 黑色可见且位于左侧。

有人可以帮助我吗？

Answer 1

我想你想要这样..

只需替换来自

的类

#nav{
    background-color:#333;
}

到

#nav{
    width:100px;
    background-color:#333;
}