قائمه منسدله بلغة CSS3 بشكل جميل جدا + شرح التركيب

(1) أكواد الـــ CSS3

<style>
.menu,.sub-menu {
list-style-type: none;
margin: 0;
padding: 0;
 }

.menu li {
background-color: #3E454D;
cursor: pointer;
position: relative;
transition: background-color .5s;
-moz-transition: background-color .5s;
-o-transition: background-color .5s;
-webkit-transition: background-color .5s;
 }

.menu li:hover {background-color: #353B41 !important;}

.menu a {
color: #FFF;
display: block;
font-family: 'Open Sans', sans-serif;
height: 100%;
margin: 0 5px;
overflow: hidden;
position: relative;
text-align: center;
text-decoration: none;
text-transform: uppercase;
word-wrap: break-word;
 }

.menu a:hover {color: #FFF;}

.menu {height: 90px;}

.menu > li {
float: left;
height: 100%;
width: 15%;
width: calc((100% - 90px) / 5);
width: -moz-calc((100% - 90px) / 5);
width: -webkit-calc((100% - 90px) / 5);
}

.menu > li.home {
background: #3E454D url(http://s26.postimg.org/qbf4q4j9h/home.png) center no-repeat;
width: 90px;
}

.menu > li.current {
background-color: #F2762E !important;
box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
}

.menu > li:not(:first-child) {
box-shadow: inset 1px 0 0 0 #272B31, inset 2px 0 0 0 #434A52;
-moz-box-shadow: inset 1px 0 0 0 #272B31, inset 2px 0 0 0 #434A52;
-webkit-box-shadow: inset 1px 0 0 0 #272B31, inset 2px 0 0 0 #434A52;
}

.menu > li.home > a {color: transparent !important;}

.menu > li > a > span {
left: 0;
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
}

.sub-menu {
max-height: 0;
min-width: 100%;
overflow: hidden;
position: absolute;
top: 100%;
transition: max-height .5s .2s;
-moz-transition: max-height .5s .2s;
-o-transition: max-height .5s .2s;
-webkit-transition: max-height .5s .2s;
 }

li:hover > .sub-menu {max-height: 600px;}

.sub-menu li {height: 60px;}

.sub-menu a {
line-height: 60px;
transition: color .5s;
-moz-transition: color .5s;
-o-transition: color .5s;
-webkit-transition: color .5s;
white-space: nowrap;
 }

.sub-menu li.current a,.sub-menu a:hover {color: #F2762E !important;}
</style>

(2) كود الــ HTML 

<div id="wrapper">
<nav>
<ul class="menu">
<li><a href="#"><span>قسم</span></a></li>
<li><a href="#"><span>+قسم</span></a>
<ul class="sub-menu">
<li><a href="#">قسم فرعى</a></li>
<li><a href="#">قسم فرعى</a></li>
<li><a href="#">قسم فرعى</a></li>
</ul>
</li>
<li><a href="#"><span>قسم</span></a></li>
<li><a href="#"><span>قسم</span></a></li>
<li><a href="#"><span>قسم</span></a></li>
<li class="home current"><a href="#"><span>Home</span></a></li>
</ul>
</nav>
</div>

التعديلات على القائمة