الكود:


/* cssكود نافبار */        
    #main-nav {
     background:#318bbf;
     margin:0 auto;
     height:50px;
     border-bottom:2px solid #2D86BD;
    }
     #main-nav .menu-alert{
     float:right;
     padding:18px 0 0 10px ;
     font-style:italic;
     color:#ffffff;
     }
     #top-menu-mob , #main-menu-mob{ display:none; }
     #main-nav ul li {
     text-transform: uppercase;
     font-family: Oswald,arial,Georgia, serif;
     font-size:16px;
     position: relative;
     display: inline-block;
     float: right;
     border:1px solid #318bbf;
     border-width:0 0 0 1px;
     height:50px;
     }
     #main-nav ul li:first-child,
     #main-nav ul li:first-child a{border:0 none;}
     #main-nav ul li:last-child a{border-right:0 none;}
     #main-nav ul li a {
     display: inline-block;
     height: 50px;
     line-height: 50px;
     color: #ffffff;
     padding:0 14px;
     text-shadow:0 1px 1px #ffffff;
     border-left:1px solid #318bbf;
       text-decoration:none;
     }
     #main-nav ul li a .sub-indicator{}
     #main-nav ul li a:hover {}
     #main-nav ul ul{
     display: none;
     padding:0;
     position: absolute;
     top: 50px;
     width: 180px;
     z-index: 999;
     float: left;
     background: #318bbf !important;
     -webkit-box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
     box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
     -webkit-border-bottom-right-radius: 3px;
     -webkit-border-bottom-left-radius: 3px;
     -moz-border-radius-bottomright: 3px;
     -moz-border-radius-bottomleft: 3px;
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
     }
     #main-nav ul ul li, #main-nav ul ul li:first-child {
     background: none !important;
     z-index: 999;
     min-width: 180px;
     border:0 none;
     border-bottom: 1px solid #222;
     border-top: 1px solid #383838;
     font-size:13px;
     height:auto;
     margin:0;
     }
     #main-nav ul ul li:first-child ,#main-nav ul li.current-menu-item ul li:first-child,
     #main-nav ul li.current-menu-parent ul li:first-child,#main-nav ul li.current-page-ancestor ul li:first-child { border-top:0 none !important;}
     #main-nav ul ul ul ,#main-nav ul li.current-menu-item ul ul, #main-nav ul li.current-menu-parent ul ul, #main-nav ul li.current-page-ancestor ul ul{right: auto;left: 100%; top: 0 !important; z-index: 999; }
     #main-nav ul.sub-menu a ,
     #main-nav ul ul li.current-menu-item a,
     #main-nav ul ul li.current-menu-parent a,
     #main-nav ul ul li.current-page-ancestor a{
     border:0 none;
     background: none !important;
     height: auto !important;
     line-height: 1em;
     padding: 10px 10px;
     width: 160px;
     display: block !important;
     margin-right: 0 !important;
     z-index: 999;
     color: #ffffff !important;
     text-shadow:0 1px 1px #000 !important;
     }
     #main-nav ul li.current-menu-item ul a,
     #main-nav ul li.current-menu-parent ul a,
     #main-nav ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;}
     #main-nav ul li:hover > a, #main-nav ul :hover > a { color: #ffffff ;}
     #main-nav ul ul li:hover > a,
     #main-nav ul ul :hover > a {color: #ffffff !important; padding-left:15px !important;padding-right:5px !important;}
     #main-nav ul li:hover > ul {display: block;}
     #main-nav ul li.current-menu-item,
     #main-nav ul li.current-menu-parent,
     #main-nav ul li.current-page-ancestor{
     margin-top:0;
     height:50px;
     border-left:0 none !important;
     }
     #main-nav ul li.current-menu-item ul.sub-menu a, #main-nav ul li.current-menu-item ul.sub-menu a:hover,
     #main-nav ul li.current-menu-parent ul.sub-menu a, #main-nav ul li.current-menu-parent ul.sub-menu a:hover
     #main-nav ul li.current-page-ancestor ul.sub-menu a, #main-nav ul li.current-page-ancestor ul.sub-menu a:hover{background: none !important;}
     #main-nav ul li.current-menu-item a, #main-nav ul li.current-menu-item a:hover,
     #main-nav ul li.current-menu-parent a, #main-nav ul li.current-menu-parent a:hover,
     #main-nav ul li.current-page-ancestor a, #main-nav ul li.current-page-ancestor a:hover{
     background:#cd2122;
     text-shadow:0 1px 1px #b43300;
     color:#ffffff;
     height:50px;
     line-height:50px;
     border-left:0 none !important;
     }
     #main-nav ul.sub-menu li.current-menu-item,#main-nav ul.sub-menu li.current-menu-item a,
     #main-nav li.current-menu-item ul.sub-menu a,#main-nav ul.sub-menu li.current-menu-parent,
     #main-nav ul.sub-menu li.current-menu-parent a,#main-nav li.current-menu-parent ul.sub-menu a,
     #main-nav ul.sub-menu li.current-page-ancestor,#main-nav ul.sub-menu li.current-page-ancestor a,
     #main-nav li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;}
     #main-nav ul li.menu-item-home ul li a,
     #main-nav ul ul li.menu-item-home a,
     #main-nav ul li.menu-item-home ul li a:hover{
     background-color:transparent !important;
     text-indent:0;
     background-image:none !important;
     height:auto !important;
     width:auto;
     }
     #main-menu-mob,#top-menu-mob{
     background: #222;
     width: 710px;
     padding: 5px;
     border: 1px solid #000;
     color:#DDD;
     height: 27px;
     margin:13px 0 0 10px;
     }
     #top-menu-mob{
     width: 350px;
     margin:2px 0 0 0;
     }
     #main-nav.fixed-nav{
     position:fixed;
     top:0;
     left:0;
     width:100% !important;
     z-index:500;
     opacity:0.9;
     -webkit-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
     -moz-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
     box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
     }
    .container { margin: 0 auto; width: 1100px; }





stones كتب:وعليكم من السلام
لابد من كود نافبار الهتمل لتطبيق كودcss
مع الهتمل
ارسله اذا بدك على الخاص