怎么做才能把一个icon图片加入到下拉菜单的主菜单边缘内？

mikeflxca 2018-11-01 06:13:35

想把右边的箭头加到“我的某某会”这个主菜单的右侧，但是要在其鼠标悬停时显现的边缘以内，见图。弄了半天都不行。不是图片掉到主菜单下方就是跑出其边框外侧！

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8">
<style>
* {margin:0 auto;padding:0}

body {margin-left:200px;}

li{
list-style:none;
}
.list{
display:none;
}
.list a{
display:block;
color:#787878;
}
.list a:hover{
background-color:#feefe5;padding-left:0px;
}

ul li{margin:0 auto;text-align:left;
float:left;border:1px transparent solid;font-size:12px;
vertical-align:top;padding-left:;text-indent:18px;
width:108px;height:150px;line-height:30px;
padding-top:0;
}
a{
float:left;border:1px transparant solid;font-size:12px;
width:108px;color:#787878;text-decoration:none;display:inline-block;
}
ul li:hover{
background-color:#fff;border:1px #e5e5e5 solid;border-top:1px #fff

solid;
}
ul li:hover .list{
display:block;z-index:90;
}

</style>
</head>
<body>

<ul>
<li class="">
<div style="padding-bottom:40px;"><a href="#">我的某某会</a>
<img src="arrow-down.png" style="float:left;padding-top:10px;vertical-

align:top;padding-left:-10px;position:absolute;" /></div>
<div class="list">
<a href="#">已买到的宝贝</a>
<a href="#">我的某某卡</a>
<a href="#">我的礼券</a>
</div>
</li>
</ul>

</body>
</html>

...全文

50 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

風灬雲 2018-11-02

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8">
<style>
*{ margin:0 auto; padding:0 }
body{ margin-left:200px; }
li{
list-style:none;
}
.list{
display:none;
}
.list a{
color:#787878;
}
.list a:hover{
background-color:#feefe5; padding-left:0px;
}
ul li{
margin:0 auto;
text-align:left;
float:left;
border:1px transparent solid;
font-size:12px;
vertical-align:top;
text-indent:18px;
width:108px;
height:150px;
line-height:30px;
padding-top:0;
}
a{
float:left;
border:1px solid transparent;
font-size:12px;
width:108px; color:#787878; text-decoration:none; display:inline-block;
}
ul li:hover{
background-color:#fff; border:1px #e5e5e5 solid; border-top:1px #fff solid;
}
ul li:hover .list{
display:block; z-index:90;
}

</style>
</head>
<body>

<ul>
<li class="">
<div style="padding-bottom:40px;">
<a href="#">我的某某会 <img src="arrow-down.png" style="float:right;padding-top:10px;margin-right: 10px;"/></a>
</div>
<div class="list">
<a href="#">已买到的宝贝</a>
<a href="#">我的某某卡</a>
<a href="#">我的礼券</a>
</div>
</li>
</ul>

</body>
</html>

mikeflxca 2018-11-02