在没有 jQuery 的情况下,如何使此菜单正常工作?
How can I make this menu work without jQuery?
我尝试了太多菜单,但只有这个可以提供帮助,但我无法通过 CSS 使其从右到左 (rtl),而且我无法找出 [=] 中发生了什么21=]...
我希望子菜单从右向左下降。
我不能用浮动或方向来做,每次我尝试时每件事都会坏掉。
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { overflow-y: scroll; }
body {
font-family: Helvetica, 'Trebuchet MS', Tahoma, sans-serif;
font-size: 62.5%;
line-height: 1;
color: #414141;
background: #fafafa url('bg.png');
}
br { display: block; line-height: 1.6em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
input, textarea {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; height: auto; width: 100%; }
/** page structure **/
nav {
display: block;
width: 100%;
height: 70px;
background: #019fbe;
}
.wrapper {
display: block;
margin: 0 auto;
width: 750px;
}
#menu {
display: block;
position: relative;
z-index: 99;
}
#menu li {
display: block;
float: left;
}
#menu li a {
display: block;
position: relative;
float: left;
padding: 0 35px;
font-size: 1.5em;
line-height: 70px;
font-weight: bold;
text-decoration: none;
color: #f5f5f5;
}
#menu li a:hover, #menu li a.active {
background: #006579;
color: #fff;
}
#menu li ul {
display: none;
position: absolute;
top: 70px;
width: 200px;
background: #006579;
z-index: -1;
-webkit-box-shadow: 0 2px 7px rgba(0,0,0,0.45);
-moz-box-shadow: 0 2px 7px rgba(0,0,0,0.45);
box-shadow: 0 2px 7px rgba(0,0,0,0.45);
}
#menu li ul li {
display: block;
width: 200px;
}
#menu li ul li a {
display: block;
float: none;
color: #b9d7df;
font-size: 1.35em;
line-height: 50px;
padding: 0 15px;
}
#menu li ul li a:hover {
background: #384958;
color: #fff;
}
#menu li ul.expanded {
width: 400px;
}
#menu li ul.expanded li { margin-right: 200px; }
#menu li ul li ul {
display: none;
position: absolute;
left: 200px;
width:400px;
top: 0;
height: 100%;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#menu li ul li ul li a { color: #fff; }
#menu li ul li ul li a:hover { text-decoration: underline; }
#menu li ul li.purple a:hover, #menu li ul li.purple a.active { background: #014a59; color: #fff; }
#menu li ul li.purple ul { background: #014a59; }
#menu li ul li.green a:hover, #menu li ul li.green a.active { background: #014a59; color: #fff; }
#menu li ul li.green ul { background: #014a59; }
#menu li ul li.aqua a:hover, #menu li ul li.aqua a.active { background: #014a59; color: #fff; }
#menu li ul li.aqua ul { background: #014a59; color: #fff; }
#menu li ul li.red a:hover, #menu li ul li.red a.active { background: #014a59; color: #fff; }
#menu li ul li.red ul { background: #014a59; }
#menu li ul li.blue a:hover, #menu li ul li.blue a.active { background: #014a59; color: #fff; }
#menu li ul li.blue ul { background: #014a59; }
#menu li ul li.gold a:hover, #menu li ul li.gold a.active { background: #014a59; color: #fff; }
#menu li ul li.gold ul { background: #014a59; }
/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
.s
{
display: none;
position: absolute;
left: 100px;
width:400px;
top: 0;
height: 100%;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.t
{
display: none;
position: absolute;
left: 200px;
width:400px;
top: 0;
height: 100%;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>webson menu demo</title>
<meta name="author" content="Hassan Bashiri">
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<nav>
<div class="wrapper">
<ul id="menu" class="clearfix">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">The Team</a></li>
<li><a href="#">Our Mission</a></li>
</ul>
</li>
<li><a href="#">Categories</a>
<ul>
<li class="purple"><a href="#">Design</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">InDesign</a></li>
<li><a href="#">Copywriting</a></li>
<li><a href="#">Journalism</a></li>
<li><a href="#">Poetry</a></li>
<li class="s"><a href="#">Storytelling</a></li>
<li class="s" style="margin-top:50px;"><a href="#">Photoshop</a></li>
<li class="s" style="margin-top:100px;"><a href="#">Illustrator</a></li>
<li class="s" style="margin-top:150px;"><a href="#">InDesign</a></li>
<li class="s" style="margin-top:200px;"><a href="#">Copywriting</a></li>
<li class="s" style="margin-top:250px;"><a href="#">Journalism</a></li>
<li class="t"><a href="#">Storytelling</a></li>
<li class="t" style="margin-top:50px;"><a href="#">Photoshop</a></li>
<li class="t" style="margin-top:100px;"><a href="#">Illustrator</a></li>
<li class="t" style="margin-top:150px;"><a href="#">InDesign</a></li>
<li class="t" style="margin-top:200px;"><a href="#">Copywriting</a></li>
<li class="t" style="margin-top:250px;"><a href="#">Journalism</a></li>
</ul>
</li>
<li class="green"><a href="#">Writing</a>
<ul>
<li><a href="#">Copywriting</a></li>
<li><a href="#">Journalism</a></li>
<li><a href="#">Poetry</a></li>
<li><a href="#">Storytelling</a></li>
</ul>
</li>
<li class="aqua"><a href="#">Accounting</a>
<ul>
<li><a href="#">Taxes</a></li>
<li><a href="#">Credit</a></li>
<li><a href="#">Asset Management</a></li>
</ul>
</li>
<li class="red"><a href="#">Marketing</a>
<ul>
<li><a href="#">Print</a></li>
<li><a href="#">Digital</a></li>
<li><a href="#">Branding</a></li>
<li><a href="#">Presenting</a></li>
<li><a href="#">Social Media</a></li>
</ul>
</li>
<li class="blue"><a href="#">Development</a>
<ul>
<li><a href="#">HTML5/CSS3</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Ruby on Rails</a></li>
</ul>
</li>
<li class="gold"><a href="#">Photography</a>
<ul>
<li><a href="#">Mechanics</a></li>
<li><a href="#">Composition</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Social</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">YouTube</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#"></a></li>
</ul>
</li>
</ul>
</div>
</nav>
<script type="text/javascript">
$(function(){
$('a[href="#"]').on('click', function(e){
e.preventDefault();
});
$('#menu > li').on('mouseover', function(e){
$(this).find("ul:first").show();
$(this).find('> a').addClass('active');
}).on('mouseout', function(e){
$(this).find("ul:first").hide();
$(this).find('> a').removeClass('active');
});
$('#menu li li').on('mouseover',function(e){
if($(this).has('ul').length) {
$(this).parent().addClass('expanded');
}
$('ul:first',this).parent().find('> a').addClass('active');
$('ul:first',this).show();
}).on('mouseout',function(e){
$(this).parent().removeClass('expanded');
$('ul:first',this).parent().find('> a').removeClass('active');
$('ul:first', this).hide();
});
});
</script>
</body>
</html>
我添加了以下 CSS。未使用 jQuery。
#menu li:hover>ul{
display:block;
}
片段
这是您的预期结果吗?
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { overflow-y: scroll; }
body {
font-family: Helvetica, 'Trebuchet MS', Tahoma, sans-serif;
font-size: 62.5%;
line-height: 1;
color: #414141;
background: #fafafa url('bg.png');
}
br { display: block; line-height: 1.6em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
input, textarea {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; height: auto; width: 100%; }
/** page structure **/
nav {
display: block;
width: 100%;
height: 70px;
background: #019fbe;
}
.wrapper {
display: block;
margin: 0 auto;
width: 750px;
}
#menu {
display: block;
position: relative;
z-index: 99;
}
#menu li {
display: block;
float: left;
}
#menu li a {
display: block;
position: relative;
float: left;
padding: 0 35px;
font-size: 1.5em;
line-height: 70px;
font-weight: bold;
text-decoration: none;
color: #f5f5f5;
}
#menu li a:hover, #menu li a.active {
background: #006579;
color: #fff;
}
#menu li ul {
display: none;
position: absolute;
top: 70px;
width: 200px;
background: #006579;
z-index: -1;
-webkit-box-shadow: 0 2px 7px rgba(0,0,0,0.45);
-moz-box-shadow: 0 2px 7px rgba(0,0,0,0.45);
box-shadow: 0 2px 7px rgba(0,0,0,0.45);
}
#menu li ul li {
display: block;
width: 200px;
}
#menu li ul li a {
display: block;
float: none;
color: #b9d7df;
font-size: 1.35em;
line-height: 50px;
padding: 0 15px;
}
#menu li ul li a:hover {
background: #384958;
color: #fff;
}
#menu li ul.expanded {
width: 400px;
}
#menu li ul.expanded li { margin-right: 200px; }
#menu li ul li ul {
display: none;
position: absolute;
left: 200px;
width:400px;
top: 0;
height: 100%;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#menu li ul li ul li a { color: #fff; }
#menu li ul li ul li a:hover { text-decoration: underline; }
#menu li ul li.purple a:hover, #menu li ul li.purple a.active { background: #014a59; color: #fff; }
#menu li ul li.purple ul { background: #014a59; }
#menu li ul li.green a:hover, #menu li ul li.green a.active { background: #014a59; color: #fff; }
#menu li ul li.green ul { background: #014a59; }
#menu li ul li.aqua a:hover, #menu li ul li.aqua a.active { background: #014a59; color: #fff; }
#menu li ul li.aqua ul { background: #014a59; color: #fff; }
#menu li ul li.red a:hover, #menu li ul li.red a.active { background: #014a59; color: #fff; }
#menu li ul li.red ul { background: #014a59; }
#menu li ul li.blue a:hover, #menu li ul li.blue a.active { background: #014a59; color: #fff; }
#menu li ul li.blue ul { background: #014a59; }
#menu li ul li.gold a:hover, #menu li ul li.gold a.active { background: #014a59; color: #fff; }
#menu li ul li.gold ul { background: #014a59; }
/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
.s
{
display: none;
position: absolute;
left: 100px;
width:400px;
top: 0;
height: 100%;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.t
{
display: none;
position: absolute;
left: 200px;
width:400px;
top: 0;
height: 100%;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/** ADDITIONAL CSS **/
#menu li:hover>ul{
display:block;
}
<nav>
<div class="wrapper">
<ul id="menu" class="clearfix">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">The Team</a></li>
<li><a href="#">Our Mission</a></li>
</ul>
</li>
<li><a href="#">Categories</a>
<ul>
<li class="purple"><a href="#">Design</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">InDesign</a></li>
<li><a href="#">Copywriting</a></li>
<li><a href="#">Journalism</a></li>
<li><a href="#">Poetry</a></li>
<li class="s"><a href="#">Storytelling</a></li>
<li class="s" style="margin-top:50px;"><a href="#">Photoshop</a></li>
<li class="s" style="margin-top:100px;"><a href="#">Illustrator</a></li>
<li class="s" style="margin-top:150px;"><a href="#">InDesign</a></li>
<li class="s" style="margin-top:200px;"><a href="#">Copywriting</a></li>
<li class="s" style="margin-top:250px;"><a href="#">Journalism</a></li>
<li class="t"><a href="#">Storytelling</a></li>
<li class="t" style="margin-top:50px;"><a href="#">Photoshop</a></li>
<li class="t" style="margin-top:100px;"><a href="#">Illustrator</a></li>
<li class="t" style="margin-top:150px;"><a href="#">InDesign</a></li>
<li class="t" style="margin-top:200px;"><a href="#">Copywriting</a></li>
<li class="t" style="margin-top:250px;"><a href="#">Journalism</a></li>
</ul>
</li>
<li class="green"><a href="#">Writing</a>
<ul>
<li><a href="#">Copywriting</a></li>
<li><a href="#">Journalism</a></li>
<li><a href="#">Poetry</a></li>
<li><a href="#">Storytelling</a></li>
</ul>
</li>
<li class="aqua"><a href="#">Accounting</a>
<ul>
<li><a href="#">Taxes</a></li>
<li><a href="#">Credit</a></li>
<li><a href="#">Asset Management</a></li>
</ul>
</li>
<li class="red"><a href="#">Marketing</a>
<ul>
<li><a href="#">Print</a></li>
<li><a href="#">Digital</a></li>
<li><a href="#">Branding</a></li>
<li><a href="#">Presenting</a></li>
<li><a href="#">Social Media</a></li>
</ul>
</li>
<li class="blue"><a href="#">Development</a>
<ul>
<li><a href="#">HTML5/CSS3</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Ruby on Rails</a></li>
</ul>
</li>
<li class="gold"><a href="#">Photography</a>
<ul>
<li><a href="#">Mechanics</a></li>
<li><a href="#">Composition</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Social</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">YouTube</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#"></a></li>
</ul>
</li>
</ul>
</div>
</nav>
将其转换为 RTL 版本并不难,如果您可以将 direction 添加到正文中,它会给您 rtl 结果,然后您继续从左到右更改浮动属性,从右到左更改边距。
由于它的作用方向相反,您应该耐心地尝试每隔一个 属性 改变一次,以达到您想要的结果。
但是我添加了 RTL 支持并为您删除了 jQuery 部分。
给你
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { overflow-y: scroll; }
body {
font-family: Helvetica, 'Trebuchet MS', Tahoma, sans-serif;
font-size: 62.5%;
line-height: 1;
color: #414141;
background: #fafafa url('bg.png');
direction: rtl;
}
br { display: block; line-height: 1.6em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
input, textarea {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; height: auto; width: 100%; }
/** page structure **/
nav {
display: block;
width: 100%;
height: 70px;
background: #019fbe;
}
.wrapper {
display: block;
margin: 0 auto;
width: 750px;
}
#menu {
display: block;
position: relative;
z-index: 99;
}
#menu li {
display: block;
float: right;
}
#menu li:hover>ul{
display:block;
}
#menu li li:hover>ul{
display:block;
}
#menu li a {
display: block;
position: relative;
float: right;
padding: 0 35px;
font-size: 1.5em;
line-height: 70px;
font-weight: bold;
text-decoration: none;
color: #f5f5f5;
}
#menu li a:hover, #menu li a.active {
background: #006579;
color: #fff;
}
#menu li ul {
display: none;
position: absolute;
top: 70px;
width: 200px;
background: #006579;
z-index: -1;
-webkit-box-shadow: 0 2px 7px rgba(0,0,0,0.45);
-moz-box-shadow: 0 2px 7px rgba(0,0,0,0.45);
box-shadow: 0 2px 7px rgba(0,0,0,0.45);
}
#menu li ul li {
display: block;
width: 200px;
}
#menu li ul li a {
display: block;
float: none;
color: #b9d7df;
font-size: 1.35em;
line-height: 50px;
padding: 0 15px;
}
#menu li ul li a:hover {
background: #384958;
color: #fff;
}
#menu li ul.expanded {
width: 400px;
}
#menu li ul.expanded li { margin-left: 200px; }
#menu li ul li ul {
display: none;
position: absolute;
right: 200px;
width:400px;
top: 0;
height: 100%;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#menu li ul li ul li a { color: #fff; }
#menu li ul li ul li a:hover { text-decoration: underline; }
#menu li ul li.purple a:hover, #menu li ul li.purple a.active { background: #014a59; color: #fff; }
#menu li ul li.purple ul { background: #014a59; }
#menu li ul li.green a:hover, #menu li ul li.green a.active { background: #014a59; color: #fff; }
#menu li ul li.green ul { background: #014a59; }
#menu li ul li.aqua a:hover, #menu li ul li.aqua a.active { background: #014a59; color: #fff; }
#menu li ul li.aqua ul { background: #014a59; color: #fff; }
#menu li ul li.red a:hover, #menu li ul li.red a.active { background: #014a59; color: #fff; }
#menu li ul li.red ul { background: #014a59; }
#menu li ul li.blue a:hover, #menu li ul li.blue a.active { background: #014a59; color: #fff; }
#menu li ul li.blue ul { background: #014a59; }
#menu li ul li.gold a:hover, #menu li ul li.gold a.active { background: #014a59; color: #fff; }
#menu li ul li.gold ul { background: #014a59; }
/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
.s
{
display: none;
position: absolute;
right: 100px;
width:400px;
top: 0;
height: 100%;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.t
{
display: none;
position: absolute;
right: 200px;
width:400px;
top: 0;
height: 100%;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
<nav>
<div class="wrapper">
<ul id="menu" class="clearfix">
<li><a href="#">منزل</a></li>
<li><a href="#">حول</a>
<ul>
<li><a href="#">اريخ</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
</ul>
</li>
<li><a href="#">عرض</a>
<ul>
<li class="purple"><a href="#">عرض</a>
<ul>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li class="s"><a href="#">عرض</a></li>
<li class="s" style="margin-top:50px;"><a href="#">عرض</a></li>
<li class="s" style="margin-top:100px;"><a href="#">عرض</a></li>
<li class="s" style="margin-top:150px;"><a href="#">عرض</a></li>
<li class="s" style="margin-top:200px;"><a href="#">عرض</a></li>
<li class="s" style="margin-top:250px;"><a href="#">عرض</a></li>
<li class="t"><a href="#">عرض</a></li>
<li class="t" style="margin-top:50px;"><a href="#">عرض</a></li>
<li class="t" style="margin-top:100px;"><a href="#">عرض</a></li>
<li class="t" style="margin-top:150px;"><a href="#">عرض</a></li>
<li class="t" style="margin-top:200px;"><a href="#">عرض</a></li>
<li class="t" style="margin-top:250px;"><a href="#">عرض</a></li>
</ul>
</li>
<li class="green"><a href="#">عرض</a>
<ul>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
</ul>
</li>
<li class="aqua"><a href="#">عرض</a>
<ul>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
</ul>
</li>
<li class="red"><a href="#">عرض</a>
<ul>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
</ul>
</li>
<li class="blue"><a href="#">عرض</a>
<ul>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
</ul>
</li>
<li class="gold"><a href="#">عرض</a>
<ul>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">عرض</a>
<ul>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#"></a></li>
</ul>
</li>
</ul>
</div>
</nav>
我尝试了太多菜单,但只有这个可以提供帮助,但我无法通过 CSS 使其从右到左 (rtl),而且我无法找出 [=] 中发生了什么21=]...
我希望子菜单从右向左下降。 我不能用浮动或方向来做,每次我尝试时每件事都会坏掉。
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { overflow-y: scroll; }
body {
font-family: Helvetica, 'Trebuchet MS', Tahoma, sans-serif;
font-size: 62.5%;
line-height: 1;
color: #414141;
background: #fafafa url('bg.png');
}
br { display: block; line-height: 1.6em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
input, textarea {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; height: auto; width: 100%; }
/** page structure **/
nav {
display: block;
width: 100%;
height: 70px;
background: #019fbe;
}
.wrapper {
display: block;
margin: 0 auto;
width: 750px;
}
#menu {
display: block;
position: relative;
z-index: 99;
}
#menu li {
display: block;
float: left;
}
#menu li a {
display: block;
position: relative;
float: left;
padding: 0 35px;
font-size: 1.5em;
line-height: 70px;
font-weight: bold;
text-decoration: none;
color: #f5f5f5;
}
#menu li a:hover, #menu li a.active {
background: #006579;
color: #fff;
}
#menu li ul {
display: none;
position: absolute;
top: 70px;
width: 200px;
background: #006579;
z-index: -1;
-webkit-box-shadow: 0 2px 7px rgba(0,0,0,0.45);
-moz-box-shadow: 0 2px 7px rgba(0,0,0,0.45);
box-shadow: 0 2px 7px rgba(0,0,0,0.45);
}
#menu li ul li {
display: block;
width: 200px;
}
#menu li ul li a {
display: block;
float: none;
color: #b9d7df;
font-size: 1.35em;
line-height: 50px;
padding: 0 15px;
}
#menu li ul li a:hover {
background: #384958;
color: #fff;
}
#menu li ul.expanded {
width: 400px;
}
#menu li ul.expanded li { margin-right: 200px; }
#menu li ul li ul {
display: none;
position: absolute;
left: 200px;
width:400px;
top: 0;
height: 100%;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#menu li ul li ul li a { color: #fff; }
#menu li ul li ul li a:hover { text-decoration: underline; }
#menu li ul li.purple a:hover, #menu li ul li.purple a.active { background: #014a59; color: #fff; }
#menu li ul li.purple ul { background: #014a59; }
#menu li ul li.green a:hover, #menu li ul li.green a.active { background: #014a59; color: #fff; }
#menu li ul li.green ul { background: #014a59; }
#menu li ul li.aqua a:hover, #menu li ul li.aqua a.active { background: #014a59; color: #fff; }
#menu li ul li.aqua ul { background: #014a59; color: #fff; }
#menu li ul li.red a:hover, #menu li ul li.red a.active { background: #014a59; color: #fff; }
#menu li ul li.red ul { background: #014a59; }
#menu li ul li.blue a:hover, #menu li ul li.blue a.active { background: #014a59; color: #fff; }
#menu li ul li.blue ul { background: #014a59; }
#menu li ul li.gold a:hover, #menu li ul li.gold a.active { background: #014a59; color: #fff; }
#menu li ul li.gold ul { background: #014a59; }
/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
.s
{
display: none;
position: absolute;
left: 100px;
width:400px;
top: 0;
height: 100%;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.t
{
display: none;
position: absolute;
left: 200px;
width:400px;
top: 0;
height: 100%;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>webson menu demo</title>
<meta name="author" content="Hassan Bashiri">
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<nav>
<div class="wrapper">
<ul id="menu" class="clearfix">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">The Team</a></li>
<li><a href="#">Our Mission</a></li>
</ul>
</li>
<li><a href="#">Categories</a>
<ul>
<li class="purple"><a href="#">Design</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">InDesign</a></li>
<li><a href="#">Copywriting</a></li>
<li><a href="#">Journalism</a></li>
<li><a href="#">Poetry</a></li>
<li class="s"><a href="#">Storytelling</a></li>
<li class="s" style="margin-top:50px;"><a href="#">Photoshop</a></li>
<li class="s" style="margin-top:100px;"><a href="#">Illustrator</a></li>
<li class="s" style="margin-top:150px;"><a href="#">InDesign</a></li>
<li class="s" style="margin-top:200px;"><a href="#">Copywriting</a></li>
<li class="s" style="margin-top:250px;"><a href="#">Journalism</a></li>
<li class="t"><a href="#">Storytelling</a></li>
<li class="t" style="margin-top:50px;"><a href="#">Photoshop</a></li>
<li class="t" style="margin-top:100px;"><a href="#">Illustrator</a></li>
<li class="t" style="margin-top:150px;"><a href="#">InDesign</a></li>
<li class="t" style="margin-top:200px;"><a href="#">Copywriting</a></li>
<li class="t" style="margin-top:250px;"><a href="#">Journalism</a></li>
</ul>
</li>
<li class="green"><a href="#">Writing</a>
<ul>
<li><a href="#">Copywriting</a></li>
<li><a href="#">Journalism</a></li>
<li><a href="#">Poetry</a></li>
<li><a href="#">Storytelling</a></li>
</ul>
</li>
<li class="aqua"><a href="#">Accounting</a>
<ul>
<li><a href="#">Taxes</a></li>
<li><a href="#">Credit</a></li>
<li><a href="#">Asset Management</a></li>
</ul>
</li>
<li class="red"><a href="#">Marketing</a>
<ul>
<li><a href="#">Print</a></li>
<li><a href="#">Digital</a></li>
<li><a href="#">Branding</a></li>
<li><a href="#">Presenting</a></li>
<li><a href="#">Social Media</a></li>
</ul>
</li>
<li class="blue"><a href="#">Development</a>
<ul>
<li><a href="#">HTML5/CSS3</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Ruby on Rails</a></li>
</ul>
</li>
<li class="gold"><a href="#">Photography</a>
<ul>
<li><a href="#">Mechanics</a></li>
<li><a href="#">Composition</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Social</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">YouTube</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#"></a></li>
</ul>
</li>
</ul>
</div>
</nav>
<script type="text/javascript">
$(function(){
$('a[href="#"]').on('click', function(e){
e.preventDefault();
});
$('#menu > li').on('mouseover', function(e){
$(this).find("ul:first").show();
$(this).find('> a').addClass('active');
}).on('mouseout', function(e){
$(this).find("ul:first").hide();
$(this).find('> a').removeClass('active');
});
$('#menu li li').on('mouseover',function(e){
if($(this).has('ul').length) {
$(this).parent().addClass('expanded');
}
$('ul:first',this).parent().find('> a').addClass('active');
$('ul:first',this).show();
}).on('mouseout',function(e){
$(this).parent().removeClass('expanded');
$('ul:first',this).parent().find('> a').removeClass('active');
$('ul:first', this).hide();
});
});
</script>
</body>
</html>
我添加了以下 CSS。未使用 jQuery。
#menu li:hover>ul{
display:block;
}
片段
这是您的预期结果吗?
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { overflow-y: scroll; }
body {
font-family: Helvetica, 'Trebuchet MS', Tahoma, sans-serif;
font-size: 62.5%;
line-height: 1;
color: #414141;
background: #fafafa url('bg.png');
}
br { display: block; line-height: 1.6em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
input, textarea {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; height: auto; width: 100%; }
/** page structure **/
nav {
display: block;
width: 100%;
height: 70px;
background: #019fbe;
}
.wrapper {
display: block;
margin: 0 auto;
width: 750px;
}
#menu {
display: block;
position: relative;
z-index: 99;
}
#menu li {
display: block;
float: left;
}
#menu li a {
display: block;
position: relative;
float: left;
padding: 0 35px;
font-size: 1.5em;
line-height: 70px;
font-weight: bold;
text-decoration: none;
color: #f5f5f5;
}
#menu li a:hover, #menu li a.active {
background: #006579;
color: #fff;
}
#menu li ul {
display: none;
position: absolute;
top: 70px;
width: 200px;
background: #006579;
z-index: -1;
-webkit-box-shadow: 0 2px 7px rgba(0,0,0,0.45);
-moz-box-shadow: 0 2px 7px rgba(0,0,0,0.45);
box-shadow: 0 2px 7px rgba(0,0,0,0.45);
}
#menu li ul li {
display: block;
width: 200px;
}
#menu li ul li a {
display: block;
float: none;
color: #b9d7df;
font-size: 1.35em;
line-height: 50px;
padding: 0 15px;
}
#menu li ul li a:hover {
background: #384958;
color: #fff;
}
#menu li ul.expanded {
width: 400px;
}
#menu li ul.expanded li { margin-right: 200px; }
#menu li ul li ul {
display: none;
position: absolute;
left: 200px;
width:400px;
top: 0;
height: 100%;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#menu li ul li ul li a { color: #fff; }
#menu li ul li ul li a:hover { text-decoration: underline; }
#menu li ul li.purple a:hover, #menu li ul li.purple a.active { background: #014a59; color: #fff; }
#menu li ul li.purple ul { background: #014a59; }
#menu li ul li.green a:hover, #menu li ul li.green a.active { background: #014a59; color: #fff; }
#menu li ul li.green ul { background: #014a59; }
#menu li ul li.aqua a:hover, #menu li ul li.aqua a.active { background: #014a59; color: #fff; }
#menu li ul li.aqua ul { background: #014a59; color: #fff; }
#menu li ul li.red a:hover, #menu li ul li.red a.active { background: #014a59; color: #fff; }
#menu li ul li.red ul { background: #014a59; }
#menu li ul li.blue a:hover, #menu li ul li.blue a.active { background: #014a59; color: #fff; }
#menu li ul li.blue ul { background: #014a59; }
#menu li ul li.gold a:hover, #menu li ul li.gold a.active { background: #014a59; color: #fff; }
#menu li ul li.gold ul { background: #014a59; }
/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
.s
{
display: none;
position: absolute;
left: 100px;
width:400px;
top: 0;
height: 100%;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.t
{
display: none;
position: absolute;
left: 200px;
width:400px;
top: 0;
height: 100%;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/** ADDITIONAL CSS **/
#menu li:hover>ul{
display:block;
}
<nav>
<div class="wrapper">
<ul id="menu" class="clearfix">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">The Team</a></li>
<li><a href="#">Our Mission</a></li>
</ul>
</li>
<li><a href="#">Categories</a>
<ul>
<li class="purple"><a href="#">Design</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">InDesign</a></li>
<li><a href="#">Copywriting</a></li>
<li><a href="#">Journalism</a></li>
<li><a href="#">Poetry</a></li>
<li class="s"><a href="#">Storytelling</a></li>
<li class="s" style="margin-top:50px;"><a href="#">Photoshop</a></li>
<li class="s" style="margin-top:100px;"><a href="#">Illustrator</a></li>
<li class="s" style="margin-top:150px;"><a href="#">InDesign</a></li>
<li class="s" style="margin-top:200px;"><a href="#">Copywriting</a></li>
<li class="s" style="margin-top:250px;"><a href="#">Journalism</a></li>
<li class="t"><a href="#">Storytelling</a></li>
<li class="t" style="margin-top:50px;"><a href="#">Photoshop</a></li>
<li class="t" style="margin-top:100px;"><a href="#">Illustrator</a></li>
<li class="t" style="margin-top:150px;"><a href="#">InDesign</a></li>
<li class="t" style="margin-top:200px;"><a href="#">Copywriting</a></li>
<li class="t" style="margin-top:250px;"><a href="#">Journalism</a></li>
</ul>
</li>
<li class="green"><a href="#">Writing</a>
<ul>
<li><a href="#">Copywriting</a></li>
<li><a href="#">Journalism</a></li>
<li><a href="#">Poetry</a></li>
<li><a href="#">Storytelling</a></li>
</ul>
</li>
<li class="aqua"><a href="#">Accounting</a>
<ul>
<li><a href="#">Taxes</a></li>
<li><a href="#">Credit</a></li>
<li><a href="#">Asset Management</a></li>
</ul>
</li>
<li class="red"><a href="#">Marketing</a>
<ul>
<li><a href="#">Print</a></li>
<li><a href="#">Digital</a></li>
<li><a href="#">Branding</a></li>
<li><a href="#">Presenting</a></li>
<li><a href="#">Social Media</a></li>
</ul>
</li>
<li class="blue"><a href="#">Development</a>
<ul>
<li><a href="#">HTML5/CSS3</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Ruby on Rails</a></li>
</ul>
</li>
<li class="gold"><a href="#">Photography</a>
<ul>
<li><a href="#">Mechanics</a></li>
<li><a href="#">Composition</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Social</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">YouTube</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#"></a></li>
</ul>
</li>
</ul>
</div>
</nav>
将其转换为 RTL 版本并不难,如果您可以将 direction 添加到正文中,它会给您 rtl 结果,然后您继续从左到右更改浮动属性,从右到左更改边距。
由于它的作用方向相反,您应该耐心地尝试每隔一个 属性 改变一次,以达到您想要的结果。
但是我添加了 RTL 支持并为您删除了 jQuery 部分。
给你
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { overflow-y: scroll; }
body {
font-family: Helvetica, 'Trebuchet MS', Tahoma, sans-serif;
font-size: 62.5%;
line-height: 1;
color: #414141;
background: #fafafa url('bg.png');
direction: rtl;
}
br { display: block; line-height: 1.6em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
input, textarea {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; height: auto; width: 100%; }
/** page structure **/
nav {
display: block;
width: 100%;
height: 70px;
background: #019fbe;
}
.wrapper {
display: block;
margin: 0 auto;
width: 750px;
}
#menu {
display: block;
position: relative;
z-index: 99;
}
#menu li {
display: block;
float: right;
}
#menu li:hover>ul{
display:block;
}
#menu li li:hover>ul{
display:block;
}
#menu li a {
display: block;
position: relative;
float: right;
padding: 0 35px;
font-size: 1.5em;
line-height: 70px;
font-weight: bold;
text-decoration: none;
color: #f5f5f5;
}
#menu li a:hover, #menu li a.active {
background: #006579;
color: #fff;
}
#menu li ul {
display: none;
position: absolute;
top: 70px;
width: 200px;
background: #006579;
z-index: -1;
-webkit-box-shadow: 0 2px 7px rgba(0,0,0,0.45);
-moz-box-shadow: 0 2px 7px rgba(0,0,0,0.45);
box-shadow: 0 2px 7px rgba(0,0,0,0.45);
}
#menu li ul li {
display: block;
width: 200px;
}
#menu li ul li a {
display: block;
float: none;
color: #b9d7df;
font-size: 1.35em;
line-height: 50px;
padding: 0 15px;
}
#menu li ul li a:hover {
background: #384958;
color: #fff;
}
#menu li ul.expanded {
width: 400px;
}
#menu li ul.expanded li { margin-left: 200px; }
#menu li ul li ul {
display: none;
position: absolute;
right: 200px;
width:400px;
top: 0;
height: 100%;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#menu li ul li ul li a { color: #fff; }
#menu li ul li ul li a:hover { text-decoration: underline; }
#menu li ul li.purple a:hover, #menu li ul li.purple a.active { background: #014a59; color: #fff; }
#menu li ul li.purple ul { background: #014a59; }
#menu li ul li.green a:hover, #menu li ul li.green a.active { background: #014a59; color: #fff; }
#menu li ul li.green ul { background: #014a59; }
#menu li ul li.aqua a:hover, #menu li ul li.aqua a.active { background: #014a59; color: #fff; }
#menu li ul li.aqua ul { background: #014a59; color: #fff; }
#menu li ul li.red a:hover, #menu li ul li.red a.active { background: #014a59; color: #fff; }
#menu li ul li.red ul { background: #014a59; }
#menu li ul li.blue a:hover, #menu li ul li.blue a.active { background: #014a59; color: #fff; }
#menu li ul li.blue ul { background: #014a59; }
#menu li ul li.gold a:hover, #menu li ul li.gold a.active { background: #014a59; color: #fff; }
#menu li ul li.gold ul { background: #014a59; }
/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
.s
{
display: none;
position: absolute;
right: 100px;
width:400px;
top: 0;
height: 100%;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.t
{
display: none;
position: absolute;
right: 200px;
width:400px;
top: 0;
height: 100%;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
<nav>
<div class="wrapper">
<ul id="menu" class="clearfix">
<li><a href="#">منزل</a></li>
<li><a href="#">حول</a>
<ul>
<li><a href="#">اريخ</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
</ul>
</li>
<li><a href="#">عرض</a>
<ul>
<li class="purple"><a href="#">عرض</a>
<ul>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li class="s"><a href="#">عرض</a></li>
<li class="s" style="margin-top:50px;"><a href="#">عرض</a></li>
<li class="s" style="margin-top:100px;"><a href="#">عرض</a></li>
<li class="s" style="margin-top:150px;"><a href="#">عرض</a></li>
<li class="s" style="margin-top:200px;"><a href="#">عرض</a></li>
<li class="s" style="margin-top:250px;"><a href="#">عرض</a></li>
<li class="t"><a href="#">عرض</a></li>
<li class="t" style="margin-top:50px;"><a href="#">عرض</a></li>
<li class="t" style="margin-top:100px;"><a href="#">عرض</a></li>
<li class="t" style="margin-top:150px;"><a href="#">عرض</a></li>
<li class="t" style="margin-top:200px;"><a href="#">عرض</a></li>
<li class="t" style="margin-top:250px;"><a href="#">عرض</a></li>
</ul>
</li>
<li class="green"><a href="#">عرض</a>
<ul>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
</ul>
</li>
<li class="aqua"><a href="#">عرض</a>
<ul>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
</ul>
</li>
<li class="red"><a href="#">عرض</a>
<ul>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
</ul>
</li>
<li class="blue"><a href="#">عرض</a>
<ul>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
</ul>
</li>
<li class="gold"><a href="#">عرض</a>
<ul>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">عرض</a>
<ul>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#">عرض</a></li>
<li><a href="#"></a></li>
</ul>
</li>
</ul>
</div>
</nav>