下拉导航菜单仅阻止

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

我想只显示Admin块，而不是完整的标题。只有一个黑色可见并且在左侧。

有人可以帮助我吗？

Answer 1

您的问题令人困惑..无论如何您需要 this? 如果不是，请更详细地提出您的问题。

<强> 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{
        float:left;
        margin:0 auto;
        text-align:left;  
    background-color:#333;
    }

    #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;
    }

Answer 2

我想你想要这样......

只需从

中替换该类

#nav{
    background-color:#333;
}

到

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