2

我正在尝试在我的网站上制作一个下拉菜单。我希望能够单击向下箭头并在其下方弹出一个菜单。现在菜单只显示在屏幕上的一部分。

这是一张图片来显示现在发生的事情：

在此处输入图像描述

我希望菜单项的右侧与向下箭头对齐，而不是像左侧那样。

这是我现在正在使用的 CSS。

* {
margin: 0;
padding: 0;
border: 0;
}

body {
    background-image: url(bg.jpg);
    background-position: center;
    background-repeat: repeat;  

}

#top {
    background-color: #333;
    height: 30px;
    margin-bottom: 10px;
}
#menu {
    color: #CCC;
    height: 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    position: absolute;
}
#top_right {
    height: 30px;
    width: auto;
    text-align: left;
    float: right;
    margin-right: 5px;
    color: #CCC;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
}

.menu {
    padding-left: 10px;
}
a.mlink:hover {
    color: #FFF;
    text-decoration: none;
}
a.mlink:link {
    color: #CCC;
    text-decoration: none;
}
a.mlink:visited {
    color: #CCC;
    text-decoration: none;
}
a.mlink:hover {
    color: #FFF;
    text-decoration: none;
}
a.mlink:active {
    color: #CCC;
    text-decoration: none;
}
#selected {
    color: #6C0;
}
#content {
    background-color: #CCC;
}


/*
START OF MENU TEST
*/
#esempio{

margin:0;

padding:0;

}

#esempio ul{

padding:0;

margin:0;

}

#esempio li{

position: relative;

float: left;

list-style: none;

margin: 0;

padding:0;

}

#esempio li a{

width:auto;

height: 30px;

display: block;

text-decoration:none;

text-align: center;

line-height: 30px;

background-color: black;

color: white;

}

#esempio li a:hover{

background-color: #666;

}

#esempio ul ul{

position: absolute;

top: 30px;

width: 100px;

visibility: hidden;

}

#esempio ul li:hover ul{

visibility:visible;

}

/*
END OF MENU TEST
*/
4

1 回答 1

0

包含元素需要定位：

li {
    position: relative;
}

然后可以将您的下拉元素定位为与其容器的右侧齐平：

li .submenu {
    position: absolute;
    right: 0;
}

如果没有看到标记或您的页面如何运行的示例，我不能更具体。

小提琴：http: //jsfiddle.net/jonathansampson/CXbTX/

边注

顺便说一句，我会避免这样做：

* { margin: 0; padding: 0; border: 0 }

这会让你有些沮丧，尤其是在设计表单元素等方面。我会鼓励你改用可以以更直观的方式规范化 CSS 的东西，比如Meyer's Reset。

于 2012-06-05T19:27:24.020 回答