开发者

image button with drop down menu

开发者 https://www.devze.com 2023-03-14 09:45 出处:网络
i have been trying to have a drop down menu opon mouseover of the \"profile\" image button. by using only css, this is what i achieve.

i have been trying to have a drop down menu opon mouseover of the "profile" image button. by using only css, this is what i achieve.

i also added text decoration to none but the underline still exist.

image button with drop down menu

I have also tried using javascript but it doesnt work out for me. Would any1 help enhancing this?

my html code:

<td class="header_button ">
                        <div id="menu">
                        <ul id="Ul1"> 
                                <li >
                                <asp:ImageButton runat="server" 
                                        ImageUrl="../img/Button/Profile.png"  CssClass="profile_dropdown" 
                                        onclick="btnMyProfile_Click" />
                                </li>
                                <li class="item" > 
                                <a href="#">Edit Profile</a>
                                </li>
                                <li class="item"> 
                                <a href="#">My Follow</a>
                                </li>
                                <li class="item"> 
                                <a href="#">My Uploads</a>
                                </li>
                                <li class="item"> 
                                <a href="#">My Child Profile</a>
 开发者_如何学编程                               </li>
                        </ul>               
                        </div>
                <div style="clear:both"></div>
                </td>

my css code:

.profile_dropdown
{
height:75px;
weight:75px;
position:static;

}
#menu ul .item
{
display: none;
text-decoration: none;
background: #222222 85% 55% no-repeat;
font-family: 'Century Gothic';
font-size: large;
font-weight: bold;
color: #9FC54E;
white-space: nowrap;
}
#menu ul:hover .item{display:block;}
#menu{margin-top:-22px;position:fixed}


You should add

#menu li a {
    text-decoration:none
}
0

精彩评论

暂无评论...
验证码 换一张
取 消