.selected a { color:#d50a05 !important; text-decoration:none; } .selected{ border-bottom: solid 2px #d50a05 !important; } #cssmenu a{ font-size:17px; } .en{ background:#d50a05 !important; margin: 0 !important; padding: 10px !important; border-radius: 10px !important; color:white !important; } #cssmenu > ul li.has-sub:hover ul li:hover{ background-color:Black } #web { display:block } #mob { display:none } @media (max-width: 950px) { #web { display:none } #mob { display:block } } #cssmenu { font-family: "Al-Jazeera-Arabic-Bold" !important; font-size: 14px; line-height: 15px; text-align:right; direction:rtl; max-width:1208px; } #cssmenu > ul { width: auto; list-style-type: none; padding: 0; margin: 0; background-color:#2c2c2c -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; } #cssmenu > ul li#responsive-tab { display: none; /* Hide for large screens */ } #cssmenu > ul li { display: inline-block; *display: inline; zoom: 1; padding:9px; border-bottom:2px solid #f7f7f7 } #cssmenu > ul li.right { float: right; } #cssmenu > ul li.has-sub { position: relative; cursor: pointer; } #cssmenu > ul li.has-sub:hover ul { display: block; background:#d50a05; margin-top: 10px; } #cssmenu > ul li.has-sub ul { z-index: 9999; display: none; width: 250px; position: absolute; margin: 0; padding: 0; list-style-type: none; border: 1px solid #ece6e8; border-bottom: 3px solid #d9ced2; border-top: 0 none; font-size: 13px; padding-top: 5px; } #cssmenu > ul li.has-sub ul li { display: block; } #cssmenu > ul li.has-sub > a { background-image: url(../images/caret.png); background-repeat: no-repeat; background-position: 5% -95%; } #cssmenu > ul li.has-sub > a.active,#cssmenu > ul li.has-sub > a:hover { /* background: #fff url(../images/caret.png) no-repeat; background-position: 90% 195%;*/ } #cssmenu > ul li a { display: block; padding: 0px 0px 10px; text-decoration: none; color: #000; font-weight: 400; /*text-shadow: 0 1px 0 #ffffff;*/ margin-left: 5px; margin-right: 5px; margin-top: 10px; text-transform: uppercase; } #cssmenu ul li:hover { transition-delay:.1s; transition: color 400ms, border-bottom 400ms; border-bottom:2px solid #d50a05; } #cssmenu ul li:hover a{ color: #d50a05 ; } #cssmenu > ul li a.active,#cssmenu > ul li a:hover { color: #d50a05 ; text-decoration:none; } @media (max-width: 950px) { #cssmenu { margin-top: 0px; } #cssmenu > ul { width: 100%; } #cssmenu > ul li#responsive-tab { display: block; cursor: pointer; background-color: #ffffff; } #cssmenu > ul li#responsive-tab a { background: #000 url(../images/menu.png) no-repeat; background-position: 5% 130%; color: #ffffff; padding:10px; } #cssmenu > ul li#responsive-tab a:hover { /*background-color: #818385; background-position: 95% 135%;*/ } #cssmenu > ul li { display: none; } #cssmenu > ul li.right { float: none; } #cssmenu > ul li.has-sub { position: relative; } #cssmenu > ul li.has-sub ul { display: block; position: static; width: 100%; background: #ffffff; border: 0 none; } #cssmenu > ul li.has-sub ul li { display: block !important; } #cssmenu > ul li.has-sub ul li a span { display: block; padding-right: 24px; } #cssmenu > ul li.has-sub > a { background-image: none; } #cssmenu > ul li a.active,#cssmenu > ul li a:hover { /* background: #818385;*/ text-decoration:none; /*color:#ffffff;*/ } } /* Make sure they show even if hidden in mobile view by JS */ @media (min-width: 950px) { #cssmenu > ul > li.collapsed { display: inline-block !important; *display: inline; zoom: 1; } #cssmenu > ul ul li.collapsed { display: block !important; } }