منم دقیقا همین کد رو نوشته بودم. اما نمی دونم چرا عمل نمی کنه!؟
این کلا کدی که من واسه منو نوشتم:
اگه این کد رو داخل یه فایل با پسوند html ذخیره کنید و اجرا کنید منو ظاهر میشه.
<!DOCTYPE html>
<html>
<head>
<style>
#UserProfileMenu {
float: right;
}
#UserProfileMenu a {
display: block;
}
#headerpage .UserRequestItem a {
color: #0000af;
}
#headerpage .UserRequestItem a:hover {
color: #0000af;
text-decoration: underline;
}
#UserProfileMenu li ul {
width: 250px;
border: 1px solid #3c0500;
text-align: right;
max-height: 317px;
overflow: auto;
}
#UserProfileMenu li li {
width: 100%;
cursor: default;
}
#UserProfileMenu #nav li {
float: right;
display: inline;
list-style: none;
position: relative;
}
#UserProfileMenu #nav li ul.first {
right: 0px;
top: 100%;
}
#UserProfileMenu ul.nav {
display: none;
}
#UserProfileMenu #nav li:hover > a, #nav li:hover {
background-color: #fff;
color: #3c0500;
}
#UserProfileMenu li:hover > .nav {
display: block;
position: absolute;
top: 1px;
z-index: 1000;
background-color: #fff;
margin-top: 1px;
}
.show {
display: block;
position: absolute;
top: 1px;
z-index: 1000;
background-color: #fff;
margin-top: 1px;
}
<!--
AFTER DISPLAY IS THE IE GHOST HOVER FIX -->
#UserProfileMenu li:hover {
position: relative;
z-index: 2000;
}
<!--
IE7 Z-INDEX BUG FIX, MUST FALL AFTER DISPLAY RULE -->
</style>
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#UserProfileMenu li").click(function () {
$(this).children('.nav').toggleClass('show');
});
});
</script>
<title></title>
</head>
<body>
<div id="UserProfileMenu">
<ul id="nav">
<li class="style_for_li" id="submenu1"><a class="UserHomePage" href="sdfadsf" title="صفحه اصلی">H</a></li>
<li class="style_for_li" id="submenu2"><a class="UserRequest" id="UserRequest">R</a>
<ul class="nav first">
<li class="UserRequestheader">Item</li>
<li class="UserRequestItem">
<div class="UserRequestItem_image">
<a href="hfhg">
<img src="~/Content/themes/base/images/11.jpg" /></a>
</div>
<div class="UserRequestItem_content">
<div class="UserRequestItem_content_name"><a href="sdvsdv">Item</a></div>
<div class="UserRequestItem_content_question">Item</div>
<div class="UserRequestItem_content_Buttons">
<a href="zxcbz" class="UserRequestItem_content_Buttons_Reject">Item</a>
<a href="zxcbz" class="UserRequestItem_content_Buttons_confirm">Item</a>
</div>
</div>
</li>
<li class="UserRequestItem">
<div class="UserRequestItem_image">
<a href="hfhg">
<img src="~/Content/themes/base/images/11.jpg" /></a>
</div>
<div class="UserRequestItem_content">
<div class="UserRequestItem_content_name"><a href="sdvsdv">Item</a></div>
<div class="UserRequestItem_content_question">Item</div>
<div class="UserRequestItem_content_Buttons">
<a href="zxcbz" class="UserRequestItem_content_Buttons_Reject">Item</a>
<a href="zxcbz" class="UserRequestItem_content_Buttons_confirm">Item</a>
</div>
</div>
</li>
<li class="UserRequestItem">
<div class="UserRequestItem_image">
<a href="hfhg">
<img src="~/Content/themes/base/images/11.jpg" /></a>
</div>
<div class="UserRequestItem_content">
<div class="UserRequestItem_content_name"><a href="sdvsdv">Item</a></div>
<div class="UserRequestItem_content_question">Item</div>
<div class="UserRequestItem_content_Buttons">
<a href="zxcbz" class="UserRequestItem_content_Buttons_Reject">Item</a>
<a href="zxcbz" class="UserRequestItem_content_Buttons_confirm">Item</a>
</div>
</div>
</li>
</ul>
</li>
<li class="style_for_li" id="submenu3"><a class="UserMessage" id="UserMessage">M</a>
<ul class="nav first">
<li class="UserRequestItem">
<div class="UserRequestItem_image">
<a>
<img src="~/Content/themes/base/images/11.jpg" /></a>
</div>
<div class="UserRequestItem_content">
<div class="UserRequestItem_content_name"><a href="sdvsdv">Item</a></div>
<div class="UserRequestItem_content_question">Item</div>
<div class="UserRequestItem_content_Buttons">
<a href="zxcbz" class="UserRequestItem_content_Buttons_Reject">Item</a>
<a href="zxcbz" class="UserRequestItem_content_Buttons_confirm">Item</a>
</div>
</div>
</li>
</ul>
</li>
<li class="style_for_li" id="submenu4"><a class="UserNotification" id="UserNotification">I</a>
<ul class="nav first">
<li class="UserRequestItem">
<div class="UserRequestItem_image">
<a>
<img src="~/Content/themes/base/images/11.jpg" /></a>
</div>
<div class="UserRequestItem_content">
<div class="UserRequestItem_content_name"><a href="sdvsdv">Item</a></div>
<div class="UserRequestItem_content_Buttons">
1392/04/17
</div>
</div>
</li>
</ul>
</li>
<li class="style_for_li" id="submenu5"><a class="UserViewPage">
<div class="UserName">یوزرنیم</div>
</a>
<ul class="nav first">
<li class="createNewsMenuItem"><a href="#Dashboard">گزینه 1</a>
</li>
<li class="createNewsMenuItem"><a href="#settings">گزینه 2</a></li>
<li class="colorMenuItem">
<a href="#Dashboard">گزینه 3</a>
</li>
<li class="colorMenuItem">
<a href="#feedback">گزینه 4</a>
</li>
<li class="colorMenuItem">
<a href="#Profile">گزینه 5</a>
</li>
<li class="signoutMenuItem">
<a href="#signout">گزینه 6</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
من میخوام بجای این کلاس
#UserProfileMenu li:hover > .nav {
کلاس زیری اون با نام show. هنگام کلیک کردن add بشه