0

基本的に、私はこのようなドロップダウンメニューの上部にある矢印を取得しようとしています http://dribbble.com/shots/678124-Notification-Dropdown?list=users

問題は、ページに矢印を追加しても矢印が表示されないことです。リストの背後にあると思いますが、一般的にこれを行う方法に困惑しています。

私のリストはこれです

<ul>
        <img src=\"images/icons/listarrow.png\">
        <li><a href=\"viewuser.php?uid=$liveuserid\"><img src=\"images/profilepics/$profilepic\">Your profile</a></li>
        <li><a href=\"settings.php?personal=all\">pic Settings</a></li>
        <li><a href=\"settings.php?addproject=all\">pic Add Project</a></li>
        <li><a href=\"settings.php?mail=all\">pic Mail</a></li>
    <li><a href=\"logout.php\">Logout pic</a></li>
 </ul></li></ul>"

PHP コードに由来するため、エスケープ スラッシュを使用しています。リストに使用するCSS

#usernav ul ul {

background: #ecebe8; 
border-radius: 0px; 
padding: 0;
position: absolute; 
top: 37px;
margin-left: 12px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-box-shadow: 0px 1px 4px #000;
-webkit-box-shadow: 0px 1px 4px #000;
box-shadow: 0px 1px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

}


#usernav ul ul li {

padding: 0px;
float: none; 
position: relative;;
border: 0px;
background-color: white;
min-width: 0px;
width: 135px;

}

パスが正しいと確信しています。おそらく、画像を追加するための私のhtmlコードは愚かです。わかりません。ありがとう！

4

2 に答える 2

3

before 疑似要素でこれを行うことができます。

ul:before {
border-bottom: 10px solid #000;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
content: "";
height: 0;
position: absolute;
right: 0;
top: -10px;
width: 0;
}

これにより、UL の上部に表示される矢印が作成されます。適切な親要素に相対位置を適用するようにしてください。

于 2013-05-28T15:51:50.227 に答える
0

img に id を指定し、高さと幅を css で id に必要な値に設定できます

<li></li>タグでimgをラップしようとしない場合は、うまくいくはずです

于 2013-05-28T15:49:36.850 に答える