下拉菜单向右拉

时间:2016-04-21 16:09:19

标签: html css

您好我一直在为我的社区的新论坛激活编写一个新的phpbb菜单,我只有一个问题,它让我很烦恼我的问题是当我设置所有代码它工作正常然后当我添加了另一个下拉菜单,它开始做得很好......

[.navbar2   {
    position: absolute; /* Ensures that the menu doesn’t affect other elements */
    border-radius: 4px 0;
    }
.navbar2 li     {   
    left: auto;
    display: inline;
    padding: 0 5px;
    float: left;  /* This lines up the menu items horizontally */
    list-style: none;  /* Removes the default styling (bullets) for the list */ 
}
.navbar2 li ul  {
    position: absolute;
    z-index: 100;
    display: none;  /* Hides the drop-down menu */
    color: #565656;
    min-width: 150px;
    max-height: 1000px;
    border-radius: 4px 0;
}       
.navbar2 li ul li {
    background-color: #fff;
    min-width: 150px;
    padding: 0 5px 0 20px;
}
.navbar2 li:hover ul    {
    display: block; /* Displays the drop-down box when the menu item is hovered over */ 
    border-radius: 4px;
} 

/*NAV 3*/

.navbar3    {
    border-radius: 4px 0;
    }
.navbar3 li     {
    display: inline-block;
    list-style: none;  /* Removes the default styling (bullets) for the list */ 
}
.navbar3 li ul  {
    position: absolute;
    z-index: 100;
    min-width: 150px;
    display: none;  /* Hides the drop-down menu */
    color: #565656;
    float:right;
    margin-left:2px;
}       
.navbar3 ul li {
    background-color: #fff;
    min-width: 150px;
    padding: 0 5px 0 20px;
}
.navbar3 li:hover ul    {
    display: block; /* Displays the drop-down box when the menu item is hovered over */ 
    border-radius: 4px;
    margin-left:-10px;
    float:right;
    margin-left:2px;
}]

dropdown bug 1

dropdown bug 2

1 个答案:

答案 0 :(得分:0)

在浮动之后塞满了一些东西:左边的代码我发现问题我已经全部固定了

此处提供的代码..

.navbar2    {
    position: absolute; /* Ensures that the menu doesn’t affect other elements */
    border-radius: 4px 0;
    }
.navbar2 li     {   
    left: auto;
    padding: 0 5px;
    list-style: none;  /* Removes the default styling (bullets) for the list */ 
}
.navbar2 li ul  {
    position: absolute;
    z-index: 100;
    display: none;  /* Hides the drop-down menu */
    color: #565656;
    min-width: 150px;
    max-height: 1000px;
    border-radius: 4px 0;
}       
.navbar2 li ul li {
    background-color: #fff;
    min-width: 150px;
}
.navbar2 li:hover ul    {
    display: block; /* Displays the drop-down box when the menu item is hovered over */ 
    border-radius: 4px;
    margin-left:-10px;
    float:right;
    margin-left:2px;
} 

/*NAV 3*/

.navbar3    {
    border-radius: 4px 0;
    }
.navbar3 li     {
    list-style: none;  /* Removes the default styling (bullets) for the list */ 
}
.navbar3 li ul  {
    position: absolute;
    z-index: 100;
    min-width: 150px;
    display: none;  /* Hides the drop-down menu */
    color: #565656;
    float:right;
    margin-left:2px;
}       
.navbar3 ul li {
    background-color: #fff;
    min-width: 150px;
    padding: 0 5px 0 20px;
}
.navbar3 li:hover ul    {
    display: block; /* Displays the drop-down box when the menu item is hovered over */ 
    border-radius: 4px;
    margin-left:-10px;
    float:right;
    margin-left:2px;
}