0

私はコードを持っています：

<div class='selectAnAction'>
   <ul>
      <li class='actionSelect'><span>Select an Action</span></li>
      <li class='action' onclick='location.href=\"/post.php?key=".$row['hash']."\";'>post</li>
      <li class='action' onclick='location.href=\"/adpreview.php?key=".$row['hash']."\";'>preview</li>
      <li class='action' onclick='location.href=\"/adupdate.php?key=".$row['hash']."\";'>edit</li>
      <li class='action' onclick='location.href=\"/addelete.php?key=".$row['hash']."\";'>archive</li>
   </ul>
</div>

そして私はこのCSSを持っています：

.selectAnAction ul { 
    display: block;
    background-image: url("/images/selectAnAction-dropdown.png");
    background-position: 0px -200px;
    background-repeat: repeat-x;
    border: 1px solid #FFFFFF;
    box-shadow: 0px 0px 3px #CCCCCC;
    font-size: 0.75em;
    list-style: none outside none;
    margin: 0px;
    overflow: hidden;
    padding: 0px;
    text-indent: 0px;
    width: 120px;
    color:white;
}
ul { 
display: block;
}
.selectAnAction ul li.actionSelect { 
background: url("/images/selectAnAction-bg.png") repeat-x transparent;
font-weight: bold;
 }
.selectAnAction ul li:first-child { 
display: block;
 }

.selectAnAction ul li { 
display: none;
margin: 0px;
text-indent: 0px;
width: 120px;
background-color:grey;
}
.selectAnAction:hover  ul li{
display: block;
margin: 0px;
text-indent: 0px;
width: 120px;
}
.selectAnAction ul { 
font-size: 0.75em;
list-style: none outside none;
}

.selectAnAction ul li { 
display: none;
margin: 0px;
text-indent: 0px;
width: 100%;
padding-left:10px;
font-family:"Times New Roman",Georgia,Serif;
font-size:1.3em;
text-align:left;
}

.action:hover {
    background-color:black;
    cursor:pointer;
}

私が得るのはアクションメニューです。最初に、LIの「オプションの選択」のみが表示されます。マウスオーバーすると、他のオプション（投稿、編集、アーカイブなど）
が表示されます。ページにはそのようなメニューがたくさんあります。

.action要素の位置を修正して、サイトの他の部分のデザインに影響を与えないようにします（現在、それらが表示されると、サイトの他の要素も移動するため）。

だから私は次のようなものを追加しようとしていました：

.action {
    position:absolute;
}

しかし、何が起こるかというと、すべての.action要素が互いに重なり合って表示されます-最初のLI（.actionSelect）の直後です。
だから今、私はそれらを互いに重ねて表示するのではなく、次々に表示するようにしていますが、絶対的な位置で表示しようとしています。それを行う良い方法はありますか？（mb someting like top：+ 20px;）
位置：relativeは機能しません-このように.action要素が表示されると、他のすべての要素が移動します。ページにこれらのリストがたくさんあるので、ハードアブソリュートポジショニング（top：100px）も使用できません。

4

2 に答える 2

0

.selectAnAction ul li ul位置：絶対は私が信じている上にあるべきです

ドロップダウンを行うためにこのサイトをチェックしてくださいhttp://www.htmldog.com/articles/suckerfish/dropdowns/

于 2012-04-04T21:26:17.510 に答える
0

ulを絶対的に配置してから、アクションselectをulの外側に親要素として移動します。選択をulに保持する場合は、オプション用にネストされたulが必要です。オプションリストの親であるものに対して、必ずposition：relativeを追加してください。

<div class='selectAnAction'>
   <ul>
     <li class='actionSelect'>
         <span>Select an Action</span></li>
         <ul class="optionMenu">
            <li class='action' onclick='location.href=\"/post.php?key=".$row['hash']."\";'>post</li>
            <li class='action' onclick='location.href=\"/adpreview.php?key=".$row['hash']."\";'>preview</li>
            <li class='action' onclick='location.href=\"/adupdate.php?key=".$row['hash']."\";'>edit</li>
            <li class='action' onclick='location.href=\"/addelete.php?key=".$row['hash']."\";'>archive</li>
         </ul>
     </li>
   </ul>
</div>
于 2012-04-05T00:26:14.633 に答える