-
- 1403/05/13 20:14
سلام وقت بخیر مشکل قبلی حل شد توی ان یکی که براون می فرستم ها styleدرست اما خروجی نمیده
<html>
<head><style>* {box-sizing: border-box;margin: 0;padding: 0;}
body {direction: rtl;}
a {text-decoration: none;}
ul {list-style: none;}
#wer ul {background-color: hotpink;
}#wer ul li{display: inline-block;position: relative;}#wer ul li a{color: aqua;font-size: 20px;font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;display:block ;padding:15px ;}#wer ul ul{display: inline-blockَ;position: absolute;top: 100%;right: 0;}
</style></head>
<body><div><nav id="wer"><ul><li><a href="">aaaa</a></li><li><a href="">aaaa</a></li><li><a href="">aaaa</a><ul><li><a href="">bbb</a></li><li><a href="">bbb</a><ul><li><a href="">c</a></li></ul></li></ul></li></ul></nav></div></body>
</html>
- 1403/05/14 09:16
سلام روزتون بخیر..
کد های html درسته مشکل شما توی استایل هاست.
اولا اینکه برای استایل #wer ul ul نباید display:inline-block باشه.اینجا شما باید زیر مجموعه های لیست رو هیدن کنید تا زمانی که روی لیست مد نظرتون هاور شد اونا نمایش داده بشن پس اولین کار اینکه این استایل رو به اینصورت ادیت کنید:
#wer ul ul {
display: none;
position: absolute;
top: 100%;
right: 0;
}دوم اینکه باید براش مشخص کنید چه زمانی نمایش داده بشه پس براش یه حالت هاور مینویسی که بگیم زمانی که روی li هاور شد اگر زیر مجموعه ای داره فقط زیر مجموعه اولش نمایش داده بشه،اگه تاکید روی فرزند مستقیمش نباشه و بگیم همه ul ها نمایش داده بشن وقتی روی li هاور میشه تمامی زیرمجموعه های دوم و سوم و .... نمایش داده میشن که جلوه خوبی نداره.پس به اینصورت استایل رو می نویسیم:#wer ul li:hover>ul {display: block;}در اخر برای نمایش زیر مجموعه دوم در جایگاه مناسب برای یک استایل بنویسیم چون زیر مجموعه دوم دیگه قرار نیست زیر لیست قراره بگیره و باید سمت راست قرار بگیره پس به اینصورت بهش استایل میدیم:#wer ul ul ul {
display: none;
position: absolute;
top:0;
right: 100%;
}خوب به استایل ها دقت کنید اگر بازهم جایی نا مفهوم بود بفرمایید تا بیشتر توئضیح بدم.
- برای ایجاد پاسخ دادن باید وارد سایت شوید.