html - CSS 菜单子(monad)对齐

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

我希望这对你有用。

     #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