CSS菜单子对齐

时间:2015-02-20 07:48:13

标签: html css drop-down-menu

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

http://i58.tinypic.com/2v865pl.jpg

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>

5 个答案:

答案 0 :(得分: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:相对于#navbar li并更改下拉列表的绝对值。

干杯

Link to fiddle

答案 1 :(得分:0)

在子菜单中添加否定margin-left,它应该有效:

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

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

答案 2 :(得分:0)

你这个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

答案 3 :(得分:0)

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

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

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

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

答案 4 :(得分:0)

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