نمایش فلش کنار دسته با زیر منو

[akram 0]

سلام

چه شکلی میتونم دسته هایی که شامل زیر منو هستن با یک علامت خاص (فلش)نشون بدم .؟؟؟

[علی زینلی 2114]

سلام ،

لطفاً تگ سوال مهم رو فقط برای سوالات واقعاً مهم بزنین!

منبع:

http://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/

فرض کنیم که منوی شما به شکل زیر باشه:

<nav>

<ul class="nav">

<li><a href="#">About</a></li>

<li><a href="#">Portfolio</a>

<ul>

<li><a href="#">item</a></li>

<li><a href="#">item</a></li>

<li><a href="#">item</a></li>

<li><a href="#">item</a></li>

</ul>

</li>

<li><a href="#">Resume</a>

<ul>

<li><a href="#">item a lonng submenu</a></li>

<li><a href="#">item</a>

<ul>

<li><a href="#">Ray</a></li>

<li><a href="#">Veronica</a></li>

<li><a href="#">Bushy</a></li>

<li><a href="#">Havoc</a></li>

</ul>

</li>

<li><a href="#">item</a></li>

<li><a href="#">item</a></li>

</ul>

</li>

<li><a href="#">Download</a></li>

<li><a href="#">Rants</a>

<ul>

<li><a href="#">item</a></li>

<li><a href="#">item</a></li>

<li><a href="#">item</a></li>

<li><a href="#">item</a></li>

</ul>

</li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

و کد های استایل شما این باشه:

nav {

display: block;

text-align: center;

}

nav ul {

margin: 0;

padding:0;

list-style: none;

}

.nav a {

display:block;

background: #111;

color: #fff;

text-decoration: none;

padding: 0.8em 1.8em;

text-transform: uppercase;

font-size: 80%;

letter-spacing: 2px;

text-shadow: 0 -1px 0 #000;

position: relative;

}

.nav{

vertical-align: top;

display: inline-block;

box-shadow:

1px -1px -1px 1px #000,

-1px 1px -1px 1px #fff,

0 0 6px 3px #fff;

border-radius:6px;

}

.nav li {

position: relative;

}

.nav > li {

float: left;

border-bottom: 4px #aaa solid;

margin-right: 1px;

}

.nav > li > a {

margin-bottom: 1px;

box-shadow: inset 0 2em .33em -0.5em #555;

}

.nav > li:hover,

.nav > li:hover > a {

border-bottom-color: orange;

}

.nav li:hover > a {

color:orange;

}

.nav > li:first-child {

border-radius: 4px 0 0 4px;

}

.nav > li:first-child > a {

border-radius: 4px 0 0 0;

}

.nav > li:last-child {

border-radius: 0 0 4px 0;

margin-right: 0;

}

.nav > li:last-child > a {

border-radius: 0 4px 0 0;

}

.nav li a:first-child:nth-last-child(2):before {

content: "";

position: absolute;

height: 0;

width: 0;

border: 5px solid transparent;

top: 50% ;

right:5px;

}

.nav li li a {

margin-top: 1px;

}

کافیه این ها رو بهش اضافه کنید:

/* submenu positioning*/

.nav ul {

position: absolute;

white-space: nowrap;

border-bottom: 5px solid orange;

z-index: 1;

left: -99999em;

}

.nav > li:hover > ul {

left: auto;

margin-top: 5px;

min-width: 100%;

}

.nav > li li:hover > ul {

left: 100%;

margin-left: 1px;

top: -1px;

}

/* arrow hover styling */

.nav > li > a:first-child:nth-last-child(2):before {

border-top-color: #aaa;

}

.nav > li:hover > a:first-child:nth-last-child(2):before {

border: 5px solid transparent;

border-bottom-color: orange;

margin-top:-5px

}

.nav li li > a:first-child:nth-last-child(2):before {

border-left-color: #aaa;

margin-top: -5px

}

.nav li li:hover > a:first-child:nth-last-child(2):before {

border: 5px solid transparent;

border-right-color: orange;

right: 10px;

}

نتیجه:

http://codepen.io/RayM/pen/JCtij

موفّق باشید.