مشکل در طراحی منو

[amin7x]

سلام دوستان
من میخوام وقتی موس روی لینک های منو میره کل background تغییر کنه نه یه تیکه کوچکش.
با عکس میگذارم تا راحت تر متوجه بشید.
این منوی منه زمان Hover لینک مورد نظر:
118024

اما من میخوام این طوری باشه:
118025

کد HTML:


<header>
<nav>
<ul>
<li><a href="" >صفحه اصلی</a></li>
<li><a href="" >برنامه دویدن</a></li>
<li><a href="" >وبلاگ</a></li>
<li><a href="" >تماس با ما</a></li>
</ul>
</nav>
</header>

کد CSS:

header {
background-color: rgba(36,36,36,0.5);
position: fixed;
width: 100%;
height: 5em;
}
nav ul {
list-style: none;
}
nav ul li {
float: right;
width: 7em;
height: 3.8em;
text-align: center;
}
nav ul li a{
text-decoration:none;
color:#FFF;
}
nav ul li:hover{
background-color: rgba(40,40,40,0.5);
border-bottom: .3em solid rgb(220,50,89);
}


ممنون میشم کمکم کنید.

[حمید . ه]

اگر اینجوری که من فهمیدم که تگ ul داخل header باشه اشتباه شما فکر میکنم بخاطر اینه که ارتفاع li از header کمتره در نتیجه روی رویداد hover کل header رو نمیگیره

[amin7x]

اگر اینجوری که من فهمیدم که تگ ul داخل header باشه اشتباه شما فکر میکنم بخاطر اینه که ارتفاع li از header کمتره در نتیجه روی رویداد hover کل header رو نمیگیره

وقتی ارتفاع li رو زیاد میکنم از header میزنه بیرون ولی باز هم کامل Hover نمیشه!!

[حمید . ه]

اگر از فایل reset استفاده نمیکنید مقدار padding برای header و ul رو صفر کنید
در ضمن اینکار که شما عرض رو دستی برای منوها مشخص کنید اشتباهه چون بعضی منوها متنشون زیاد تره و بعضی ها هم کمتر
به جای مشخص کردن عرض شما یک مقدار مشخص پدینگ رو به تگهای a بدید
با اینکار عنصر li هم خود به خود بزرگ میشه متناسب با محتوای تگ a

[amin7x]

اگر از فایل reset استفاده نمیکنید مقدار padding برای header و ul رو صفر کنید
در ضمن اینکار که شما عرض رو دستی برای منوها مشخص کنید اشتباهه چون بعضی منوها متنشون زیاد تره و بعضی ها هم کمتر
به جای مشخص کردن عرض شما یک مقدار مشخص پدینگ رو به تگهای a بدید
با اینکار عنصر li هم خود به خود بزرگ میشه متناسب با محتوای تگ a

من از Reset استفاده نمیکنم از Normalize استفاده میکنم.
ممنون مشکل حل شد به ul مقدار margin رو صفر دادم.
مقدار عرض رو هم برداشتم.

ممنون از شما.

[حمید . ه]

آره آره از margin هم میتونست باشه حواسم بهش نبود
موفق باشید

[thinkdiff]

خوب به جای به li:hover استایل بدی به ul:hover استایل بده چون وقتی روی هر Li بری قبلش روی کل ul رفتی

[حمید . ه]

خوب به جای به li:hover استایل بدی به ul:hover استایل بده چون وقتی روی هر Li بری قبلش روی کل ul رفتی
دوست عزیز چرا صورت مساله رو پاک میکنید
این کاری که شما گفتید منطقی نیست و اولین بار دارم از شما میشنوم
درضمن ul:hover هم اگر بذارن بازم نمیشه چون درنهایت ایشون رنگ پس زمینه li رو تغییر میدن که هیچ ربطی به ul نداره فقط سلکتور تغییر کرده

[SlowCode]

به احتمال زیاد اگه کد reset رو بنویسی مشکلت حل میشه:
*{margin:0; padding:0;}

[حمید . ه]

توجه کنید که مشکل حل شده ها !