Question

我得到了一个非常简单的下拉菜单，但子菜单宽度出现了问题。

在此处查看： http://dl.dropbox.com/u/70953/SOSfrontpage.html

我的HTML是：

<div id="navigation">
<div id="menu-dropdown">
    <ul class="menu">
        <li class="menu_punkt"><a href="http://itu.dk/people/lfel/Web-kodning/SOSfrontpage.html">Frontpage</a></li>
        <li class="menu_punkt"><a href="http://itu.dk/hvem_er_vi_menu/hvem_er_vi.html">Who are we?</a></li>
        <li class="menu_punkt"><a href="http://itu.dk/oplev_sos_menu/oplev_sos.html">This is a test</a>
                 <ul>
                    <li><a href="http://itu.dk/people/lfel/Web-kodning/xxx.html">Your profile</a></li>
                    <li><a href="http://itu.dk/people/lfel/Web-kodning/xxx.html">New profile</a></li>
                </ul>
        </li>
        <li class="menu_punkt"><a href="http://itu.dk/sos_profil_menu/sos_profil.html">SOS Profile</a>
                <ul>
                    <li><a href="http://itu.dk/people/lfel/Web-kodning/din_profil.html">Your profile</a></li>
                    <li><a href="http://itu.dk/people/lfel/Web-kodning/ny_bruger.html">New user</a></li>
                </ul>
           </li><li class="menu_punkt"><a href="http://itu.dk/log_ind.html">Log ind</a></li>        
</ul>
</div>
  </div>

我的CSS是：

/*horisontal navbar*/
#menu-dropdown {
    list-style: none;
    position: absolute;
    top: 600px;
}

#menu-dropdown ul li {
    float:left;
    list-style-type: none;
    font-size: 0.8em;
}

#menu-dropdown li ul {
    position: absolute;
    display: none;
    background-color:#cdc3a2;
    padding: 0px;
    margin-bottom:1px;
}

#menu-dropdown ul ul li {
    clear: both;    
}

#menu-dropdown ul li a {
    display: block;
    padding: 10px;
    color:#102B47;
    text-decoration:none;
    font-family:Verdana, Geneva, sans-serif;
    font-size: 1em;
}

#menu-dropdown ul li a:hover {
    background-color: #cdc3a2;

}

#menu-dropdown li:hover ul, li.over ul {
    display: block;
}

你可以在这里看到我的问题： http://dl.dropbox.com/u/70953/SOSfrontpage.html

此致 - 梅斯蒂卡

Answer 1

我认为你应该为menu-dropdown ul li类增加一个宽度。

构建css下拉菜单的一个好方法是son of a suckerfish。

Answer 2

是的，JAO是对的，我们应该给像这样的宽度

#menu-dropdown ul ul li {
clear:both;
width:107px;}

你可以从这里获得更多线索http://www.cssnewbie.com/example/css-dropdown-menu/

Answer 3

为子菜单锚添加宽度

.menu ul li a { width:200px;}

同样将悬停添加到li（不是主播），当你在子菜单中时顶部菜单保持选中状态

#menu-dropdown ul li:hover, #menu-dropdown ul li.hover {
    background-color: #cdc3a2;

}

Answer 4

尝试：

.menu ul li li {width: 100%}

Answer 5

当我学会编写css下拉菜单时，我基于这个网站上的大量示例进行了大量实验：http://www.cssplay.co.uk/menus/ - 非常清晰的css / html示例，最小，干净的代码

希望它有所帮助：）

通过CSS下拉

5 个答案: