CSS 菜单子对齐

Question

需要下拉菜单方面的帮助。我在这里做了一个fiddle：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

向子菜单添加否定 margin-left，它应该可以工作：

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

已更新 fiddle：http://jsfiddle.net/bLL0rmbd/3/

Answer 2

我希望这对你有用。

     #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 上的相对值和下拉列表上的绝对值。

或者您可以设置 pos: relative 到 #navbar li 并根据需要更改下拉列表的绝对值。

干杯

Link to fiddle

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

Check the fiddle here

Answer 4

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

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

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

看看这个 fiddle:http://jsfiddle.net/bLL0rmbd/11/

Answer 5

try this demo

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

CSS 菜单子对齐

CSS menu child align

html

css

drop-down-menu