سلام من این کد منو رو تنظیم کردم ولی چنتا مشکل داره
1- تو گوشی وقتی ریسپانسیو میشه وقتی رو منو میزنی باز بشه یه پرش داره به پایین بعد اسکرول میکنی منو رو نشون میده تازه اولیش یه باکس سیاهه
2- تو گوشی وقتی منو رو باز میکنی رو به روی گزینه ها فک کنم 2 تا فلش نشون میده !
3- میخوام کلا چه تو pc چه گوشی منو سمت راست باشه ولی سر گزینه ها سمت راست نمیاد فقط زیر گزینه ها رو تونسته بودم راست بیارم
میشه مشکلات منوم رو حل کنید و حتی اگر خودتون هم مشکلی پیدا کردید بر طرف کنید لطفا
کد:
<!-- جای منو ها ی بالا که آبی هست -->
<!DOCTYPE html>
<html>
<head>
<style>
#menu{
background: #50B7DC;
color: #FFF;
height: 40px;
border-bottom: 2px solid #DDD;
box-shadow: 1px 2px 9px #B1B1B1;
border-top: 2px solid #DDD;
}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:1024px}
#menu li{float:left;display:inline;position:relative;fon t:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;}
#menu a{display: block;
line-height: 40px;
padding: 0 14px;
text-decoration: none;
color: #FFF;
}
#menu li:hover > a,#menu li a:hover{
color: #E4E4E4;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: #5FC6EB;
}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #50B7DC;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{
display: block;
width: 100%;
font:normal 0.8em Arial;
text-transform: none;
text-shadow: none;
border-bottom: 1px dashed #31AFDB;
}
#menu ul.menus a{
color: #FFF;
line-height: 35px;
}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{
background: #5FC6EB;
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
@media screen and (max-width: 800px){
#menu{position:relative}
#menu ul{background:#111;position:absolute;top:100%;righ t:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{width:100%;position:static;padding-left:20px}
#menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block }
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}
}
</style>
<font size="4">
<nav id='menu'>
<input type='checkbox'/>
<label>≡<span>MENU</span></label>
<ul>
<li><a href='https://pencil-society.com/'>خانه</a></li>
<li><a href='https://pencil-society.com/forums/%D8%A8%D8%AE%D8%B4-%D9%81%D9%86%DB%8C-%D8%A7%D9%86%D8%AC%D9%85%D9%86-%D8%A7%D8%AE%D8%A8%D8%A7%D8%B1%D8%8C-%D8%AA%D8%A7%D8%B2%D9%87-%D9%87%D8%A7-%D9%88-%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1%D8%A7%D8%AA-%D8%A7%D9%86%D8%AC%D9%85%D9%86.3/'>اخبار سایت</a></li>
<li><a href='#'>شروع <font size='1'>▼</font></a>
<ul class='menus'>
<li><a href='https://pencil-society.com/forums/%D9%82%D9%88%D8%A7%D9%86%DB%8C%D9%86.5/'>قوانین</a></li>
<li><a href='https://pencil-society.com/forums/%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%A7%D9%86-%D8%AA%D8%A7%D8%B2%D9%87-%D9%88%D8%A7%D8%B1%D8%AF.6/'>راهنما</a></li>
</ul>
<li><a href='#'>مقالات <font size='1'>▼</font></a>
<ul class='menus'>
<li><a href='https://pencil-society.com/forums/%D8%B3%D8%A8%DA%A9-%D9%87%D8%A7.8/'>سبک ها</a></li>
<li><a href='https://pencil-society.com/forums/%D8%AA%DA%A9%D9%86%DB%8C%DA%A9-%D9%87%D8%A7.9/'>تکنیک ها</a></li>
<li><a href='https://pencil-society.com/forums/%D9%87%D9%86%D8%B1%D9%85%D9%86%D8%AF%D8%A7%D9%86-%D8%AF%D8%A7%D8%AE%D9%84%DB%8C.10/'>هنرمندان داخلی</a></li>
<li><a href='https://pencil-society.com/forums/%D9%87%D9%86%D8%B1%D9%85%D9%86%D8%AF%D8%A7%D9%86-%D8%AE%D8%A7%D8%B1%D8%AC%DB%8C.11/'>هنرمندان خارجی</a></li>
<li><a href='https://pencil-society.com/forums/%D8%B3%D8%A7%DB%8C%D8%B1.12/'>سایر...</a></li>
</ul>
<li><a href='#'>آموزش<font size='1'>▼</font></a>
<ul class='menus'>
<li><a href='https://pencil-society.com/forums/%DA%A9%D9%85%DA%A9-%D9%87%D8%A7%DB%8C-%D8%A7%D9%88%D9%84%DB%8C%D9%87-%D9%85%D8%A8%D8%A7%D8%AD%D8%AB-%D8%A7%D8%A8%D8%AA%D8%AF%D8%A7%DB%8C%DB%8C-%D9%88-%D9%85%D9%82%D8%AF%D9%85%D8%A7%D8%AA%DB%8C.20/'>کمک های اولیه</a></li>
<li><a href='https://pencil-society.com/forums/%D9%BE%DB%8C%D8%B4-%D8%A8%D9%87-%D8%AC%D9%84%D9%88-%D9%85%D8%A8%D8%A7%D8%AD%D8%AB-%D9%BE%DB%8C%D8%B4%D8%B1%D9%81%D8%AA%D9%87-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88-%D9%86%D9%82%D8%A7%D8%B4%DB%8C.21/'>پیش به جلو</a></li>
<li><a href='https://pencil-society.com/forums/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%A8%D8%B1-%D9%85%D8%A8%D9%86%D8%A7%DB%8C-%D8%AA%DA%A9%D9%86%DB%8C%DA%A9-%D8%B0%D8%BA%D8%A7%D9%84-%D8%8C-%D8%A2%D8%A8%D8%B1%D9%86%DA%AF-%D9%88.22/'>بر مبنا تکنیک</a></li>
<li><a href='https://pencil-society.com/forums/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%AF%DB%8C%D8%AC%DB%8C%D8%AA%D8%A7%D9%84.23/'>طراحی دیجیتال</a></li>
<li><a href='https://pencil-society.com/forums/%D9%86%D9%88%D8%B1-%D9%88-%D8%B3%D8%A7%DB%8C%D9%87.24/'>نور و سایه</a></li>
<li><a href='https://pencil-society.com/forums/%D8%A8%D8%A7%D9%82%D8%AA-%D9%88-%D8%AA%DA%A9%D8%B3%DA%86%D8%B1.25/'>بافت و تکسچر</a></li>
<li><a href='https://pencil-society.com/forums/%D8%AA%D8%A6%D9%88%D8%B1%DB%8C-%D8%B1%D9%86%DA%AF-%D9%88-%D9%85%D8%A8%D8%A7%D8%AD%D8%AB-%D9%85%D8%B1%D8%AA%D8%A8%D8%B7.26/'>رنگ و مباحث</a></li>
<li><a href='https://pencil-society.com/forums/%D9%87%D9%86%D8%B1-%DA%86%DB%8C%D9%86%D8%B4-%D9%88-%D8%AA%D8%B1%DA%A9%DB%8C%D8%A8-%D8%A8%D9%86%D8%AF%DB%8C-composition.27/'>چینش و ترکیب</a></li>
<li><a href='https://pencil-society.com/forums/%D9%85%D8%AA%D9%81%D8%B1%D9%82%D9%87.28/'>متفرقه</a></li>
</ul>
</nav>
<!-- جای منو ها ی بالا که آبی هست -->
پاسخ با نقل قول