مشکل در position منو های تو در تو

این تاپیک 0 پاسخ و 1 مشارکت کننده دارد . آخرین آپدیت توسط :  Shirin ،‏ 7 ماه و 3 هفته پیش .

این تاپیک تاکنون 158 بازدید داشته است .

نویسنده پست
دوشنبه ، 11 آوریل 2016     3:10 ب.ظ #


Shirin

Subscriber
5 پست7 تاپیک

دوستان منو من در <ul> اول position: relative و  <ul> دوم position: absolute  که با دادن top و right  تمام زیر منوها رو هم می افتند و وقتی هم <li>  اول رو relative  میدم زیر منو ها نمایش داده نمی شوند. اینم code هامه

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

<style>

 

 

nav {
position: relative;
width: 70%;
display: inline-block;
vertical-align: top;
padding-top: 60px;
box-sizing: border-box;
}

nav > ul.nav-first-ul {
display: inline-block;
vertical-align: top;
width: 90%;
list-style: none;
}

nav ul.nav-first-ul > li {
width: 15%;
display: inline-block;
vertical-align: top;
overflow: hidden;
position: relative;
}

nav ul.nav-first-ul > li > a {
display: inline-block;
}

nav ul.nav-first-ul > li:last-child {
width: 10% !important;
}

nav ul.nav-first-ul > li > a {
height: 20px;
line-height: 20px;
font-size: 16px;
font-family: IRANSans;
color: #535151;
overflow: hidden;
position: relative;
}

nav ul.nav-first-ul > li > a:after {
content: '';
position: absolute;
height: 1px;
width: 98%;
bottom: 0;
background: #ff4f40;
right: 0;
display: none;
}

nav ul.nav-first-ul > li > a.active:after {
display: block !important;
}

nav> ul.nav-first-ul > li > a:hover:after {
display: block !important;
}

.nav-second-ul {
position: absolute;
top: 35px;
right: 0;
list-style: none;
}

.nav-second-ul > li {
width: 150px;
overflow: hidden;
display: block;
background: #222222;
}

.nav-second-ul > li > a {
height: 40px;
line-height: 40px;
font-size: 14px;
color: white;
padding: 3px 13px 0 0;
box-sizing: border-box;
}

<style/>

 

<nav>

<ul class="nav-first-ul">

<li><a rel="nofollow" href="#" alt="Home" class="active">صفحه اصلی</a>
<ul class="nav-second-ul">
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
</ul>
</li>
<li id="li2"><a rel="nofollow" href="#" alt="Shop">فروشگاه</a>
<ul class="nav-second-ul">
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
</ul>
</li>
<li><a rel="nofollow" href="#" alt="Grid types">انواع شبکه</a>
<ul class="nav-second-ul">
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
</ul>
</li>
<li><a rel="nofollow" href="#" alt="product">محصولات</a>
<ul class="nav-second-ul">
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
</ul>
</li>
<li id="li5"><a rel="nofollow" href="#" alt="Woo pages">صفحات woo</a>
<ul class="nav-second-ul">
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
<li><a rel="nofollow" href="#">کارت</a></li>
</ul>
</li>

<li><a rel="nofollow" href="#" alt="Buy now">خرید</a> </li>
</ul>
<div id="basket">
<img src="Resourse/Images/Basket.png" alt="basket" />
</div>
</nav>

 

0  تشکر
پست 1 تا 1 (از مجموع 1 پست)

برای پاسخ دادن به این تاپیک باید وارد سایت شوید .