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 }

これにより、特にフォーム要素などのスタイリングに関して、不満が生じる可能性があります。代わりに、 Meyer's Resetのように、CSSをより直感的な方法で正規化するものを使用することをお勧めします。

于 2012-06-05T19:27:24.020 に答える