بهتر شدن زیرمنوی این منو

[pary_daryayi]

سلام دوستان .

این منو خوشگل نیست . میدونم تو نت منوهای خوشگل زیادن ولی بدلایلی میخوام از این استفاده کنم.

فقط مشکلش اینه که وقتی روی یک منوی اصلی نگه میدارم تا زیرمنوهاش باز بشن , به شکل جالبی باز نمیشن و مدام ناپدید میشن :افسرده:

میخوام بدون اضافه کردن جی کوئری , حالت باز شدن زیر منو بهتر بشه . کسی میتونه کمک کنه . مرسی.

css:


<style>
.menu-main{
width:900px;
height:30px;
float:right;
}
.menu-main ul
{
display: inline;
float: right;
height: 30px;
list-style-type: none;
margin: 7px 0 0;
background-color:#CCCCCC
}
.menu-main ul li
{
border-left:1px #993300 solid;
color:#000;
direction: rtl;
float: right;
height: 30px;
line-height: 25px;
min-width: 80px;
text-align: center;
}
.menu-main li ul {
display:none;
position: absolute;
overflow:hidden;
}
.menu-main li li{
float:none;
border:1px solid #fff;
background-image:none;
background-color:#466A87;
width:150px;
height:30px;
}

.menu-main li:hover > ul {
position:absolute;
overflow:visible;
display:block;
}
.menu-main li a
{
color:#000;
padding:4px;
text-decoration: none;
}
.menu-main li a:hover
{
color:#CCCCCC;}
</style>


html:


<div class="menu-main">

<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a>
<ul>
<li><a href="#">link3-1</a></li>
<li><a href="#">link1-2</a></li>
</ul>
</li>

<li><a href="#">link4</a></li>

</ul>
</div>



mamnun

[heidarymh73]

منوی های اماده زیادی تو اینترنت هستند یه سرچی بکنی خیلی چیز های خوبی گیرت میاد

[pirmard66]

سلام دوست عزیز

کد زیر رو امتحان کن:(تصحیح کردم)


<style>
.menu-main{
width:900px;
height:30px;
float:right;
}
.menu-main ul
{
display: inline;
float: right;
height: 30px;
list-style-type: none;
margin: 7px 0 0;
background-color:#CCCCCC
}
.menu-main ul li
{
border-left:1px #993300 solid;
color:#000;
direction: rtl;
float: right;
height: 30px;
line-height: 25px;
min-width: 80px;
text-align: center;
}
.menu-main li ul {
display:none;
position: absolute;
overflow:hidden;
}
.menu-main li li{
float:none;
border:1px solid #fff;
background-image:none;
background-color:#466A87;
width:150px;
height:30px;
}

.menu-main li:hover > ul {
position:absolute;
overflow:visible;
display:block;
}
.menu-main li a
{
color:#000;
padding:4px;
text-decoration: none;
}
.menu-main li a:hover
{
color:#CCCCCC;}
.first li{margin-top:-2px}
</style>
<div class="menu-main">

<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a>
<ul class="first">
<li><a href="#">link3-1</a></li>
<li><a href="#">link1-2</a></li>
</ul>
</li>

<li><a href="#">link4</a></li>

</ul>
</div>

[pary_daryayi]

گفتم بدلایلی مجبورم از همین استفاده کنم .

ممنون پیرمرد66 . کدهاتون دقیقا کدهای خودم هستند و تغییری نکردند:لبخندساده:

[***BiDaK***]

<style>
body
{
margin:0px;
padding:0px;
direction:rtl;
}
.menu-main ul
{
margin:0px;
padding:0px;
height: 30px;
list-style: none;
background-color:#CCCCCC;
position:relative;
}
.menu-main ul li
{
border-left:1px #993300 solid;
color:#000;
float: right;
line-height: 30px;
width: 80px;
text-align: center;
}
.menu-main ul li ul
{
margin:0;
float:none;
display:none;
position: absolute;
list-style:none;
}
.menu-main ul li ul li{
border-bottom:1px solid #fff;
background-color:#466A87;
width:150px;
line-height:30px;
float:none;
}
.menu-main ul li:hover .first
{
display:block;
}
.menu-main ul li a
{
color:#000;
text-decoration: none;
display:block;
}
.menu-main ul li a:hover
{
display:block;
color:red;
}
</style>

<div class="menu-main">
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a>
<ul class="first">
<li><a href="#">link3-1</a></li>
<li><a href="#">link1-2</a></li>
</ul>
</li>

<li><a href="#">link4</a></li>
</ul>
</div>

[pirmard66]

گفتم بدلایلی مجبورم از همین استفاده کنم .

ممنون پیرمرد66 . کدهاتون دقیقا کدهای خودم هستند و تغییری نکردند:لبخندساده:

دوست عزیز من یه چیزایی اضافه کردم...

و برای من درست کارکرد!!!!