مشاهده نسخه کامل
: sol1358
13-07-2009, 10:44
سلام به همه دوستان
من یه منو drop down در css ایجاد کردم البته از یه سایتی کدش رو برداشتم
زیر منوهاش در فایر فاکس دیده میشن ولی در اکسپلورر زیر منوهاش باز نمیشه
کدش رو میگذارم براتون کمکم کنید
#container
{width:760; height: 800;margin-left:10%;}
#content
{width: 760; height: 800}
#header
{ width: 760; height: 200}
#meno
{width: 760; height: 150;margin-left:35px}
/* Begin CSS Drop Down Menu */
#menuh
{
font-size: small;
font-family: arial, helvetica, sans-serif;
width:100%;
float:left;
margin:2em;
margin-top: 1em;
}
#menuh a
{
text-align: center;
display:block;
border: 1px solid #555;
white-space:nowrap;
margin:0;
padding: 0.3em;
}
#menuh a:link, #menuh a:visited, #menuh a:active
{
color: white;
background-color: royalblue;
text-decoration:none;
}
#menuh a:hover
{
color: white;
background-color: cornflowerblue;
text-decoration:none;
}
#menuh a.top_parent, #menuh a:hover.top_parent
{
background-image: url(navdown_white.gif);
background-position: right center;
background-repeat: no-repeat;
}
#menuh a.parent, #menuh a:hover.parent
{
background-image: url(nav_white.gif);
background-position: right center;
background-repeat: no-repeat;
}
#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:9em; /* width of all menu boxes */
/* NOTE: For adjustable menu boxes you can comment out the above width rule.
However, you will have to add padding in the "#menh a" rule so that the menu boxes
will have space on either side of the text -- try it */
}
#menuh li
{
position:relative;
min-height: 1px; /* Sophie Dennis contribution for IE7 */
vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
}
#menuh ul ul
{
position:absolute;
z-index:500;
top:auto;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
}
#menuh ul ul ul
{
top:0;
left:100%;
}
div#menuh li:hover
{
cursor:pointer;
z-index:100;
}
div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}
div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}
/* End CSS Drop Down Menu *
<body>
<div id=container>
<div id=content>
<div id=header><img src=images/24.jpg></div>
<div id=meno>
<div id="menuh" style="width: 724px; height: 14px">
<ul>
<li><a href="#" class="top_parent">اموزش</a>
<ul>
<li><a href="#">درباره ما</a></li>
<li><a href="#" class="parent">دوره های اموزشی</a>
<ul>
<li><a href="#">ICDL</a></li>
<li><a href="#">FRONT PAGE</a></li>
<li><a href="#">AUTO CAD</a></li>
<li><a href="#">PHOTOSHOP</a></li>
</ul>
</li>
<li><a href="#">کارگاه اموزشی</a></li>
<li><a href="#" class="parent">همکاری با سازمانها</a>
<ul>
<li><a href="#">بنیاد ICDL</a></li>
<li><a href="#">انیستیتو ایز ایران</a></li>
<li><a href="#">فنی و حرفه ای</a></li>
<li><a href="#">کار و امور اجتماعی</a></li>
</ul>
</li>
<li><a href="#" class="parent">دپارتمانها</a>
<ul>
<li><a href="#">مهندسی</a></li>
<li><a href="#">نرم افزار</a></li>
<li><a href="#">ICTکودکان</a></li>
<li><a href="#">PHOTOSHOP</a></li>
<li><a href="#">AUTO CAD</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><a href="#" >سرگرمی</a>
<ul>
<li><a href="#">کودکان</a></li>
<li><a href="#">بازی کامپیوتری</a>
<ul>
<li><a href="#">cd</a></li>
<li><a href="#">dvd</a></li>
</ul>
</li>
</ul>
</ul>
<ul>
<li><a href="#">تماس با ما</a>
<ul>
<li><a href="#">ادرس ایمیل</a></li>
<li><a href="#">ادرس وب سایت</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">انتشارات</a>
<ul>
<li><a href="#">ویندوز</a></li>
<li><a href="#">اینترنت</a></li>
<li><a href="#">پاور پوینت</a></li>
<li><a href="#">اکسس</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">صفحه اصلی</a></li>
</ul>
</div> <!-- end the menuh-container div -->
</div> <!-- end the menuh div -->
</div>
</div>
</div>
</div>
</body>
</html>
من یه منو drop down در css ایجاد کردم البته از یه سایتی کدش رو برداشتم
زیر منوهاش در فایر فاکس دیده میشن ولی در اکسپلورر زیر منوهاش باز نمیشه
کدش رو میگذارم براتون کمکم کنید
#container
{width:760; height: 800;margin-left:10%;}
#content
{width: 760; height: 800}
#header
{ width: 760; height: 200}
#meno
{width: 760; height: 150;margin-left:35px}
/* Begin CSS Drop Down Menu */
#menuh
{
font-size: small;
font-family: arial, helvetica, sans-serif;
width:100%;
float:left;
margin:2em;
margin-top: 1em;
}
#menuh a
{
text-align: center;
display:block;
border: 1px solid #555;
white-space:nowrap;
margin:0;
padding: 0.3em;
}
#menuh a:link, #menuh a:visited, #menuh a:active
{
color: white;
background-color: royalblue;
text-decoration:none;
}
#menuh a:hover
{
color: white;
background-color: cornflowerblue;
text-decoration:none;
}
#menuh a.top_parent, #menuh a:hover.top_parent
{
background-image: url(navdown_white.gif);
background-position: right center;
background-repeat: no-repeat;
}
#menuh a.parent, #menuh a:hover.parent
{
background-image: url(nav_white.gif);
background-position: right center;
background-repeat: no-repeat;
}
#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:9em; /* width of all menu boxes */
/* NOTE: For adjustable menu boxes you can comment out the above width rule.
However, you will have to add padding in the "#menh a" rule so that the menu boxes
will have space on either side of the text -- try it */
}
#menuh li
{
position:relative;
min-height: 1px; /* Sophie Dennis contribution for IE7 */
vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
}
#menuh ul ul
{
position:absolute;
z-index:500;
top:auto;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
}
#menuh ul ul ul
{
top:0;
left:100%;
}
div#menuh li:hover
{
cursor:pointer;
z-index:100;
}
div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}
div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}
/* End CSS Drop Down Menu *
<body>
<div id=container>
<div id=content>
<div id=header><img src=images/24.jpg></div>
<div id=meno>
<div id="menuh" style="width: 724px; height: 14px">
<ul>
<li><a href="#" class="top_parent">اموزش</a>
<ul>
<li><a href="#">درباره ما</a></li>
<li><a href="#" class="parent">دوره های اموزشی</a>
<ul>
<li><a href="#">ICDL</a></li>
<li><a href="#">FRONT PAGE</a></li>
<li><a href="#">AUTO CAD</a></li>
<li><a href="#">PHOTOSHOP</a></li>
</ul>
</li>
<li><a href="#">کارگاه اموزشی</a></li>
<li><a href="#" class="parent">همکاری با سازمانها</a>
<ul>
<li><a href="#">بنیاد ICDL</a></li>
<li><a href="#">انیستیتو ایز ایران</a></li>
<li><a href="#">فنی و حرفه ای</a></li>
<li><a href="#">کار و امور اجتماعی</a></li>
</ul>
</li>
<li><a href="#" class="parent">دپارتمانها</a>
<ul>
<li><a href="#">مهندسی</a></li>
<li><a href="#">نرم افزار</a></li>
<li><a href="#">ICTکودکان</a></li>
<li><a href="#">PHOTOSHOP</a></li>
<li><a href="#">AUTO CAD</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><a href="#" >سرگرمی</a>
<ul>
<li><a href="#">کودکان</a></li>
<li><a href="#">بازی کامپیوتری</a>
<ul>
<li><a href="#">cd</a></li>
<li><a href="#">dvd</a></li>
</ul>
</li>
</ul>
</ul>
<ul>
<li><a href="#">تماس با ما</a>
<ul>
<li><a href="#">ادرس ایمیل</a></li>
<li><a href="#">ادرس وب سایت</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">انتشارات</a>
<ul>
<li><a href="#">ویندوز</a></li>
<li><a href="#">اینترنت</a></li>
<li><a href="#">پاور پوینت</a></li>
<li><a href="#">اکسس</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">صفحه اصلی</a></li>
</ul>
</div> <!-- end the menuh-container div -->
</div> <!-- end the menuh div -->
</div>
</div>
</div>
</div>
</body>
</html>