رفتن به مطلب

مشکل در CSS و جابجا شدن عناصر در منوی آبشاری


پست های پیشنهاد شده

سلام

من یه منوی آبشاری ساختم ولی زمانی که موس رو روی گزینه ها میبرم که زیرمنو ها باز بشن، به اندازه پهنای زیر منو سایر گزینه های اصلی فاصله میگیرن و جابجا میشن. تصویر زیر رو ببینید کاملا متوجه میشید

http://8pic.ir/images/a8cgamkicgfum811orne.jpg

اگه کسی میدونه کدوم خاصیت رو در CSS باید تغییر بدم که زیرمنوی باز شده تغییری توی مکان عنوان های اصلی منو نداشته باشه ممنون میشم



#menu_hide{
width:100%;
float:left;
background:#000;
height:30px;
padding-bottom:5px;
z-index:2000;
position: fixed;
display:none;
line-height:20px;

}
#menu_hide_up {
margin:auto;
list-style:none;
margin-top:4px;
width:960px;
}
#menu_hide_up li {
float:right;
padding-left:10px;
padding-right:10px;
padding-top:3px;
}
#menu_hide_up li a{
color:#F8F9FB;
padding:3px;

}
#menu_hide_up ul.sub-hide {
display:none;
top:30px;
margin-right:0px;
padding:1px;
color:#000;
line-height:20px;
margin-top:7px;
}
#menu_hide_up ul.sub-hide li {
text-align:right;
float:right;
}
#menu_hide_up li:hover ul.sub-hide {
display: block;
border: 1px solid #666;
color:#fff;
background:#000;
border-radius:3px;
z-index:3000;
}
.clear{
clear:both;
}
.search_menu_ups > form {
margin-top: 0 !important;
}
.top_menu_hide_ups {
margin: auto;
width: 960px;
}
#menu_hide_up li a:hover{
color:#000;
background:#fff;
border-radius:3px;
display:inline;
position:static;
}
.sticky{ display:block !important}

لینک به ارسال

سلام

کد html اش رو هم بذارید یا اینکه لینک سایتتون رو قرار بدید

روی لوکال کار میکنم . این کد HTML


<div id="menu_hide">
<div class="top_menu_hide_ups">
<ul id="menu_hide_up">
<li><a href="http://www.test.com">فنی و مهندسی</a>

<ul class="sub-hide">
<li><a href="http://www.test.com">رشته مهندسی کامپیوتر</a></li><br>
<li><a href="http://www.test.com">رشته مهندسی برق و الکترونیک</a></li><br>
<li><a href="http://www.test.com">رشته مهندسی مکانیک</a></li><br><br>

</ul>
</li>
<li><a href="http://www.test.com">علوم انسانی</a></li>
<li><a href="http://www.test.com">علوم پایه</a></li>
<li><a href="http://www.test.com">عمومی و متفرقه</a></li>
<li><a href="http://www.test.com">برنامه نویسی</a></li>
</ul>
<div style="float: left; id="53a35c90d8a80">
<form role="search" method="get" class="searcho" action="http://127.0.0.1/">
<input class="sf_input" type="text" name="s" id="s" autocomplete="off" value="جستجو . . ." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</form>
</div>
</div>
</div>

لینک به ارسال

سلام

من یه منوی آبشاری ساختم ولی زمانی که موس رو روی گزینه ها میبرم که زیرمنو ها باز بشن، به اندازه پهنای زیر منو سایر گزینه های اصلی فاصله میگیرن و جابجا میشن. تصویر زیر رو ببینید کاملا متوجه میشید

http://8pic.ir/image...gfum811orne.jpg

اگه کسی میدونه کدوم خاصیت رو در CSS باید تغییر بدم که زیرمنوی باز شده تغییری توی مکان عنوان های اصلی منو نداشته باشه ممنون میشم



#menu_hide{
width:100%;
float:left;
background:#000;
height:30px;
padding-bottom:5px;
z-index:2000;
position: fixed;
display:none;
line-height:20px;

}
#menu_hide_up {
margin:auto;
list-style:none;
margin-top:4px;
width:960px;
}
#menu_hide_up li {
float:right;
padding-left:10px;
padding-right:10px;
padding-top:3px;
}
#menu_hide_up li a{
color:#F8F9FB;
padding:3px;

}
#menu_hide_up ul.sub-hide {
display:none;
top:30px;
margin-right:0px;
padding:1px;
color:#000;
line-height:20px;
margin-top:7px;
}
#menu_hide_up ul.sub-hide li {
text-align:right;
float:right;
}
#menu_hide_up li:hover ul.sub-hide {
display: block;
border: 1px solid #666;
color:#fff;
background:#000;
border-radius:3px;
z-index:3000;
}
.clear{
clear:both;
}
.search_menu_ups > form {
margin-top: 0 !important;
}
.top_menu_hide_ups {
margin: auto;
width: 960px;
}
#menu_hide_up li a:hover{
color:#000;
background:#fff;
border-radius:3px;
display:inline;
position:static;
}
.sticky{ display:block !important}

سلام این کد رو وارد کنید


#menu_hide_up ul ul {
position:absolute;
}

لینک به ارسال

این کد رو پیدا کنید :


#menu_hide_up ul.sub-hide

بهش این مقادیر رو بدید :


position:absolute;
top:28px;

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...