CSS菜单子对齐

Question

需要一些下拉菜单帮助。 我在这里做了一个小提琴： http : //jsfiddle.net/bLL0rmbd/
我想像图像中那样对齐悬停子菜单：

HTML：

<div id="wrapper">
    <div id="navbar">
        <ul>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a>
                <ul>
                    <li><a href="#">SubMenu 1</a></li>
                    <li><a href="#">SubMenu 2</a></li>
                    <li><a href="#">SubMenu 3</a></li>
                </ul>       
            </li>                 
        </ul>
    </div>
</div>

CSS：

<style>
    #wrapper {padding: 0; margin: 30px}

    #navbar ul {
        padding: 0; 
        margin:0px; 
        list-style: none; 
        float:left; 
        background:#FF6;
    }
    #navbar ul li { display: inline-block; margin-right:20px;}
    #navbar ul li a {text-decoration:none;}
    #navbar ul ul { 
        position:absolute;
        display: none;
    }
    #navbar ul ul li {display:block;}

    #navbar ul li:hover > ul {
        display: block; 
        background-color:#CFC;
    }
</style>

Answer 1

我希望这对你有用。

     #navbar ul {
padding: 0; 
  margin:0px; 
  list-style: none; 
 float:left; 
    background:#FF6;
  position: relative;

        }
    #navbar ul ul { 
position:absolute;
display: none;
  right: 0;
 top: 100%;
    }

我只添加了3行代码pos：ul上的相对值和dropdown上的绝对值。

或者，您可以相对于#navbar li设置pos：并根据需要更改下拉菜单的绝对值。

干杯

链接到小提琴

Answer 2

在子菜单上添加一个负margin-left ，它应该可以工作：

#navbar ul li:hover > ul 
{   display: block; 
    background-color:#CFC;
    margin-left:-25px;                                            
}

更新的小提琴： http : //jsfiddle.net/bLL0rmbd/3/

Answer 3

你这个css在这里

  #navbar ul {
  padding: 0; 
  margin:0px; 
  float:left; 
  background:#CFC;
  position: relative;
  }

 #navbar ul ul { 
  position:absolute;
  display: none;
  right: 0;
  top: 100%;
  }

在这里检查小提琴

Answer 4

为您最近的问题添加此CSS样式：

li:hover{background-color:#CFC;}

#navbar ul li:hover > ul 
{   display: block; 
    background-color:#CFC;
    margin-left:-25px;                                            
}

看看这个小提琴： http : //jsfiddle.net/bLL0rmbd/11/

Answer 5

试试这个演示

#navbar ul {
padding: 0; 
margin:0px; 
list-style: none; 
float:left; 
background:#FF6;
position: relative;
}
#navbar ul ul { 
position:absolute;
display: none;
right: 0;
top: 100%;
}