Question

我最近一直在研究一个小CSS菜单，但是我无法正常工作。我一直在摆弄现有的菜单，试图让定位和字体等工作。

基本上我首先得到了我的主菜单，它的工作方式正常。现在，当我尝试在其中一个选项中添加一个下拉菜单时，它真的很混乱，我完全无法解决这个问题：S

我需要帮助：将下拉菜单定位在正确的菜单项下方（现在它们总是浮动在左侧）。另外，我希望子菜单项与主菜单项完全相同的样式/大小/字体/等，由于某种原因我也无法正常工作。

感谢任何帮助，我将菜单的CSS / HTML代码提交到pastebin文件中：

CSS：http://pastebin.com/rJEgvnK1

HTML：http://pastebin.com/e52RuH4r

Answer 1

不完美，但这应该让你更进一步： jsfiddle

要获取每个链接下方的块（在您的CSS中），只需从#mainMenu ul li a{

中删除a-Tag

This one is a little nicer !!!

Answer 2

它不完美，但你仍然可以正确找出定位而不是字体。请检查此jsfiddle

使用的CSS：

#mainMenu ul{
        width:954px;
        padding:0;
        margin:5px 0 10px 0;
        list-style-type:none;
        border:solid 2px #ddd;
        font-size: 18px;
        text-transform: uppercase;
}  
#mainMenu ul li a{
        text-decoration:none;
        color:#000000;
        background-color:#eee;
        padding:0.2em 0.6em;
        border-right:0px solid white;
        display:block;
}     
#mainMenu a:hover{
        color:#FFFFFF;
        background-color:#2E9AFE;
}      
#mainMenu ul li{
    display:inline-block;
    position: relative;
}
#mainMenu ul ul {
        background-color: #eee;
        display: none;
        width: 133px;
        height: auto;
        position: absolute;
        border: solid 1px #ddd;
        top: 23px;
}
#mainMenu ul li:hover > ul{
        display:block;
        padding:0;
        margin:5px 0 10px 0;
        list-style-type:none;
        border:solid 2px #ddd;
        font-size:18px;
        text-transform:uppercase;
} 
#mainMenu ul ul li:hover a{
        color:#FFFFFF;
        background-color:#2E9AFE;
}
#mainMenu ul ul li:hover {  
        cursor:pointer;
} 
#mainMenu ul ul li {
        float:none;
        padding:10px;
} 
#mainMenu ul ul li{
        font-size:16px;
        padding:0 10px;
}

CSS下拉菜单有问题

2 个答案: