jquery - 如果没有 jQuery，我怎样才能使这个菜单工作？

Question

我尝试了太多菜单，但只有这个有帮助，但我无法通过 CSS 使其从右到左 (rtl)，而且我无法找出 jQuery 中发生了什么...

enter link description here

我希望子菜单从右向左下降。我不能用 float 或方向来做到这一点，每次我尝试时每样东西都会坏掉。

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>

Answer 1

我添加了以下 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>