无法在CSS菜单中设置活动类

Question

我有一个CSS菜单，我想将该类设置为单击的菜单项的“活动”。我可以“找到”点击的项目并尝试设置活动类

$(this).addClass("active");

但它没有坚持。

为什么？

jsFiddle

$(document).on("click", "#newSubmission", function() {
  makeActive(this);
});

function makeActive(obj) {
  var tid = $(obj).attr("id");
  $("#cssmenu > ul > li").each(function() {
    if (tid === $(this).attr("id")) {
      $("#result").append("found match<br>")
      $(this).addClass("active");
    } else {
      $(this).removeClass("active");
      $("#result").append("no match<br>")
    }
  });
}

(function($) {
  $(document).ready(function() {

    $("#cssmenu").menumaker({
      title: "Menu",
      breakpoint: 100,
      format: "multitoggle"
    });

    $("#cssmenu").prepend("<div id='menu-line'></div>");

    var foundActive = false,
      activeElement, linePosition = 0,
      menuLine = $("#cssmenu #menu-line"),
      lineWidth, defaultPosition, defaultWidth;

    $("#cssmenu > ul > li").each(function() {
      if ($(this).hasClass('active')) {
        activeElement = $(this);
        foundActive = true;
      }
    });

    if (foundActive === false) {
      activeElement = $("#cssmenu > ul > li").first();
    }

    defaultWidth = lineWidth = activeElement.width();

    defaultPosition = linePosition = activeElement.position().left;

    menuLine.css("width", lineWidth);
    menuLine.css("left", linePosition);

    $("#cssmenu > ul > li").hover(function() {
      activeElement = $(this);
      lineWidth = activeElement.width();
      linePosition = activeElement.position().left;
      menuLine.css("width", lineWidth);
      menuLine.css("left", linePosition);
    }, function() {
      menuLine.css("left", defaultPosition);
      menuLine.css("width", defaultWidth);
    });

  });
})(jQuery);

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#cssmenu:after,
#cssmenu>ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#cssmenu #menu-button {
  display: none;
}

#cssmenu {
  font-family: 'Open Sans', sans-serif;
  line-height: 1;
  background: #b70102;
  width: auto;
}

#menu-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: #f3f3f3;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -ms-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}

#cssmenu>ul>li {
  float: left;
}

#cssmenu.align-center>ul {
  font-size: 0;
  text-align: center;
}

#cssmenu.align-center>ul>li {
  display: inline-block;
  float: none;
}

#cssmenu.align-center ul ul {
  text-align: left;
}

#cssmenu.align-right>ul>li {
  float: right;
}

#cssmenu.align-right ul ul {
  text-align: right;
}

#cssmenu>ul>li>a {
  padding: 20px;
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
  color: #ffffff;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}

#cssmenu>ul>li:hover>a,
#cssmenu>ul>li.active>a {
  color: #f3f3f3;
}

#cssmenu>ul>li.has-sub>a {
  padding-right: 25px;
}

#cssmenu>ul>li.has-sub>a::after {
  position: absolute;
  top: 22px;
  right: 10px;
  width: 4px;
  height: 4px;
  border-bottom: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  content: "";
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
  -ms-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}

#cssmenu>ul>li.has-sub:hover>a::after {
  border-color: #f3f3f3;
}

#cssmenu ul ul {
  position: absolute;
  left: -9999px;
}

#cssmenu li:hover>ul {
  left: auto;
}

#cssmenu.align-right li:hover>ul {
  right: 0;
}

#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0;
}

#cssmenu.align-right ul ul ul {
  margin-left: 0;
  margin-right: 100%;
}

#cssmenu ul ul li {
  height: 0;
  -webkit-transition: height .2s ease;
  -moz-transition: height .2s ease;
  -ms-transition: height .2s ease;
  -o-transition: height .2s ease;
  transition: height .2s ease;
}

#cssmenu ul li:hover>ul>li {
  height: 32px;
}

#cssmenu ul ul li a {
  padding: 10px 20px;
  width: 160px;
  font-size: 12px;
  background: #333333;
  text-decoration: none;
  color: #dddddd;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}

#cssmenu ul ul li:hover>a,
#cssmenu ul ul li a:hover {
  color: #ffffff;
}

#cssmenu ul ul li.has-sub>a::after {
  position: absolute;
  top: 13px;
  right: 10px;
  width: 4px;
  height: 4px;
  border-bottom: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  content: "";
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
  -ms-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}

#cssmenu.align-right ul ul li.has-sub>a::after {
  right: auto;
  left: 10px;
  border-bottom: 0;
  border-right: 0;
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
}

#cssmenu ul ul li.has-sub:hover>a::after {
  border-color: #ffffff;
}

#cssmenu.small-screen {
  width: 100%;
}

#cssmenu.small-screen ul {
  width: 100%;
  display: none;
}

#cssmenu.small-screen.align-center>ul,
#cssmenu.small-screen.align-right ul ul {
  text-align: left;
}

#cssmenu.small-screen ul li,
#cssmenu.small-screen ul ul li,
#cssmenu.small-screen ul li:hover>ul>li {
  width: 100%;
  height: auto;
  border-top: 1px solid rgba(120, 120, 120, 0.15);
}

#cssmenu.small-screen ul li a,
#cssmenu.small-screen ul ul li a {
  width: 100%;
}

#cssmenu.small-screen>ul>li,
#cssmenu.small-screen.align-center>ul>li,
#cssmenu.small-screen.align-right>ul>li {
  float: none;
  display: block;
}

#cssmenu.small-screen ul ul li a {
  padding: 20px 20px 20px 30px;
  font-size: 14px;
  color: #ffffff;
  background: none;
}

#cssmenu.small-screen ul ul li:hover>a,
#cssmenu.small-screen ul ul li a:hover {
  color: #ffffff;
}

#cssmenu.small-screen ul ul ul li a {
  padding-left: 40px;
}

#cssmenu.small-screen ul ul,
#cssmenu.small-screen ul ul ul {
  position: relative;
  left: 0;
  right: auto;
  width: 100%;
  margin: 0;
}

#cssmenu.small-screen>ul>li.has-sub>a::after,
#cssmenu.small-screen ul ul li.has-sub>a::after {
  display: none;
}

#cssmenu.small-screen #menu-line {
  display: none;
}

#cssmenu.small-screen #menu-button {
  display: block;
  padding: 20px;
  color: #ffffff;
  cursor: pointer;
  font-size: 12px;
  text-transform: uppercase;
}

#cssmenu.small-screen #menu-button::after {
  content: '';
  position: absolute;
  top: 21px;
  right: 20px;
  display: block;
  width: 15px;
  height: 2px;
  background: #ffffff;
}

#cssmenu.small-screen #menu-button::before {
  content: '';
  position: absolute;
  top: 26px;
  right: 20px;
  display: block;
  width: 15px;
  height: 3px;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

#cssmenu.small-screen .submenu-button {
  position: absolute;
  z-index: 10;
  right: 0;
  top: 0;
  display: block;
  border-left: 1px solid rgba(120, 120, 120, 0.15);
  height: 54px;
  width: 54px;
  cursor: pointer;
}

#cssmenu.small-screen .submenu-button::after {
  content: '';
  position: absolute;
  top: 22px;
  left: 27px;
  display: block;
  width: 1px;
  height: 11px;
  background: #ffffff;
  z-index: 99;
}

#cssmenu.small-screen .submenu-button::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 27px;
  display: block;
  width: 11px;
  height: 1px;
  background: #ffffff;
  z-index: 99;
}

#cssmenu.small-screen .submenu-button.submenu-opened:after {
  display: none;
}

#cssmenu.small-screen.select-list {
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>

<div id="cssmenu" class="align-center">
  <ul>
    <li id="editHome"><a href="#">Edit</a></li>
    <li id="newSubmission"><a href="#">new submission</a></li>
    <li class="has-sub"><a href="#"><i class="fa fa-fw fa-bar-chart"></i> reports</a>
      <ul>
        <li><a href="#">Dr.&#39;s notes</a></li>
        <li><a href="#">number of samples</a></li>
        <li><a href="#">arrival temperatures</a></li>
        <li><a href="#">culture count</a></li>
        <li class="has-sub"><a href="#">summaries</a>
          <ul>
            <li><a href="#">% of target</a></li>
            <li><a href="#">stored motility</a></li>
            <li><a href="#">morphology</a></li>
            <li><a href="#">motility</a></li>
            <li><a href="#">TSD</a></li>
            <li><a href="#">CSA report for TSD date range</a></li>
            <li><a href="#">culture summary  by submission</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="has-sub active"><a href="#">setup</a>
      <ul>
        <li><a href="#">users</a></li>
        <li><a href="#">clients</a></li>
        <li><a href="#">canned comments</a></li>
      </ul>
    </li>
    <li id="logOff"><a href="#">log off</a></li>
  </ul>
</div>
<p>
  click "new submission" and it should keep the "active" class
</p>
<div id="result">

</div>

Answer 1

我已经快速而又肮脏，会有更优雅的解决方案，但这会让你工作。

问题的主要来源是您在页面加载时设置白线的起始位置。你不能在其他任何地方修改它。 active css类在这里几乎无关紧要。

我所做的是将点击处理程序和makeActive方法移动到文档就绪方法中，以便为它们提供相同的范围。然后在makeActive方法中重置宽度和位置参数。

＆＃13;

＆＃13;

(function($) {
  $(document).ready(function() {

    $(document).on("click", "#newSubmission", function() {
      makeActive(this);
    });

    $("#cssmenu").menumaker({
      title: "Menu",
      breakpoint: 100,
      format: "multitoggle"
    });

    $("#cssmenu").prepend("<div id='menu-line'></div>");

    var foundActive = false,
      activeElement, linePosition = 0,
      menuLine = $("#cssmenu #menu-line"),
      lineWidth, defaultPosition, defaultWidth;

    $("#cssmenu > ul > li").each(function() {
      if ($(this).hasClass('active')) {
        activeElement = $(this);
        foundActive = true;
      }
    });

    if (foundActive === false) {
      activeElement = $("#cssmenu > ul > li").first();
    }

    defaultWidth = lineWidth = activeElement.width();

    defaultPosition = linePosition = activeElement.position().left;

    menuLine.css("width", lineWidth);
    menuLine.css("left", linePosition);

    $("#cssmenu > ul > li").hover(function() {
      activeElement = $(this);
      lineWidth = activeElement.width();
      linePosition = activeElement.position().left;
      menuLine.css("width", lineWidth);
      menuLine.css("left", linePosition);
    }, function() {
      menuLine.css("left", defaultPosition);
      menuLine.css("width", defaultWidth);
    });

    function makeActive(obj) {
      var tid = $(obj).attr("id");
      $("#cssmenu > ul > li").each(function() {
        if (tid === $(this).attr("id")) {
          $("#result").append("found match<br>")
          $(this).addClass("active");
          //This is the new stuff - reset the defaults
          defaultWidth = lineWidth = $(this).width();
          defaultPosition = linePosition = $(this).position().left;
        } else {
          $(this).removeClass("active");
          $("#result").append("no match<br>")
        }
      });
    }

  });
})(jQuery);

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#cssmenu:after,
#cssmenu>ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#cssmenu #menu-button {
  display: none;
}

#cssmenu {
  font-family: 'Open Sans', sans-serif;
  line-height: 1;
  background: #b70102;
  width: auto;
}

#menu-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: #f3f3f3;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -ms-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}

#cssmenu>ul>li {
  float: left;
}

#cssmenu.align-center>ul {
  font-size: 0;
  text-align: center;
}

#cssmenu.align-center>ul>li {
  display: inline-block;
  float: none;
}

#cssmenu.align-center ul ul {
  text-align: left;
}

#cssmenu.align-right>ul>li {
  float: right;
}

#cssmenu.align-right ul ul {
  text-align: right;
}

#cssmenu>ul>li>a {
  padding: 20px;
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
  color: #ffffff;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}

#cssmenu>ul>li:hover>a,
#cssmenu>ul>li.active>a {
  color: #f3f3f3;
}

#cssmenu>ul>li.has-sub>a {
  padding-right: 25px;
}

#cssmenu>ul>li.has-sub>a::after {
  position: absolute;
  top: 22px;
  right: 10px;
  width: 4px;
  height: 4px;
  border-bottom: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  content: "";
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
  -ms-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}

#cssmenu>ul>li.has-sub:hover>a::after {
  border-color: #f3f3f3;
}

#cssmenu ul ul {
  position: absolute;
  left: -9999px;
}

#cssmenu li:hover>ul {
  left: auto;
}

#cssmenu.align-right li:hover>ul {
  right: 0;
}

#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0;
}

#cssmenu.align-right ul ul ul {
  margin-left: 0;
  margin-right: 100%;
}

#cssmenu ul ul li {
  height: 0;
  -webkit-transition: height .2s ease;
  -moz-transition: height .2s ease;
  -ms-transition: height .2s ease;
  -o-transition: height .2s ease;
  transition: height .2s ease;
}

#cssmenu ul li:hover>ul>li {
  height: 32px;
}

#cssmenu ul ul li a {
  padding: 10px 20px;
  width: 160px;
  font-size: 12px;
  background: #333333;
  text-decoration: none;
  color: #dddddd;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}

#cssmenu ul ul li:hover>a,
#cssmenu ul ul li a:hover {
  color: #ffffff;
}

#cssmenu ul ul li.has-sub>a::after {
  position: absolute;
  top: 13px;
  right: 10px;
  width: 4px;
  height: 4px;
  border-bottom: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  content: "";
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
  -ms-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}

#cssmenu.align-right ul ul li.has-sub>a::after {
  right: auto;
  left: 10px;
  border-bottom: 0;
  border-right: 0;
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
}

#cssmenu ul ul li.has-sub:hover>a::after {
  border-color: #ffffff;
}

#cssmenu.small-screen {
  width: 100%;
}

#cssmenu.small-screen ul {
  width: 100%;
  display: none;
}

#cssmenu.small-screen.align-center>ul,
#cssmenu.small-screen.align-right ul ul {
  text-align: left;
}

#cssmenu.small-screen ul li,
#cssmenu.small-screen ul ul li,
#cssmenu.small-screen ul li:hover>ul>li {
  width: 100%;
  height: auto;
  border-top: 1px solid rgba(120, 120, 120, 0.15);
}

#cssmenu.small-screen ul li a,
#cssmenu.small-screen ul ul li a {
  width: 100%;
}

#cssmenu.small-screen>ul>li,
#cssmenu.small-screen.align-center>ul>li,
#cssmenu.small-screen.align-right>ul>li {
  float: none;
  display: block;
}

#cssmenu.small-screen ul ul li a {
  padding: 20px 20px 20px 30px;
  font-size: 14px;
  color: #ffffff;
  background: none;
}

#cssmenu.small-screen ul ul li:hover>a,
#cssmenu.small-screen ul ul li a:hover {
  color: #ffffff;
}

#cssmenu.small-screen ul ul ul li a {
  padding-left: 40px;
}

#cssmenu.small-screen ul ul,
#cssmenu.small-screen ul ul ul {
  position: relative;
  left: 0;
  right: auto;
  width: 100%;
  margin: 0;
}

#cssmenu.small-screen>ul>li.has-sub>a::after,
#cssmenu.small-screen ul ul li.has-sub>a::after {
  display: none;
}

#cssmenu.small-screen #menu-line {
  display: none;
}

#cssmenu.small-screen #menu-button {
  display: block;
  padding: 20px;
  color: #ffffff;
  cursor: pointer;
  font-size: 12px;
  text-transform: uppercase;
}

#cssmenu.small-screen #menu-button::after {
  content: '';
  position: absolute;
  top: 21px;
  right: 20px;
  display: block;
  width: 15px;
  height: 2px;
  background: #ffffff;
}

#cssmenu.small-screen #menu-button::before {
  content: '';
  position: absolute;
  top: 26px;
  right: 20px;
  display: block;
  width: 15px;
  height: 3px;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

#cssmenu.small-screen .submenu-button {
  position: absolute;
  z-index: 10;
  right: 0;
  top: 0;
  display: block;
  border-left: 1px solid rgba(120, 120, 120, 0.15);
  height: 54px;
  width: 54px;
  cursor: pointer;
}

#cssmenu.small-screen .submenu-button::after {
  content: '';
  position: absolute;
  top: 22px;
  left: 27px;
  display: block;
  width: 1px;
  height: 11px;
  background: #ffffff;
  z-index: 99;
}

#cssmenu.small-screen .submenu-button::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 27px;
  display: block;
  width: 11px;
  height: 1px;
  background: #ffffff;
  z-index: 99;
}

#cssmenu.small-screen .submenu-button.submenu-opened:after {
  display: none;
}

#cssmenu.small-screen.select-list {
  padding: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>

<div id="cssmenu" class="align-center">
  <ul>
    <li id="editHome"><a href="#">Edit</a></li>
    <li id="newSubmission"><a href="#">new submission</a></li>
    <li class="has-sub"><a href="#"><i class="fa fa-fw fa-bar-chart"></i> reports</a>
      <ul>
        <li><a href="#">Dr.&#39;s notes</a></li>
        <li><a href="#">number of samples</a></li>
        <li><a href="#">arrival temperatures</a></li>
        <li><a href="#">culture count</a></li>
        <li class="has-sub"><a href="#">summaries</a>
          <ul>
            <li><a href="#">% of target</a></li>
            <li><a href="#">stored motility</a></li>
            <li><a href="#">morphology</a></li>
            <li><a href="#">motility</a></li>
            <li><a href="#">TSD</a></li>
            <li><a href="#">CSA report for TSD date range</a></li>
            <li><a href="#">culture summary  by submission</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="has-sub active"><a href="#">setup</a>
      <ul>
        <li><a href="#">users</a></li>
        <li><a href="#">clients</a></li>
        <li><a href="#">canned comments</a></li>
      </ul>
    </li>
    <li id="logOff"><a href="#">log off</a></li>
  </ul>
</div>
<p>
  click "new submission" and it should keep the "active" class
</p>
<div id="result">

</div>

＆＃13;

＆＃13;

＆＃13;

修改

如果您想使用active课程，可以执行以下操作。我认为这更好。

我在这里完成的是退出悬停条件，找到活动元素并根据它设置行。如果没有活动元素，我们将回退到初始默认值。

＆＃13;

＆＃13;

$(document).on("click", "#newSubmission", function() {
  makeActive(this);
});

function makeActive(obj) {
  var tid = $(obj).attr("id");
  $("#cssmenu > ul > li").each(function() {
    if (tid === $(this).attr("id")) {
      $("#result").append("found match<br>")
      $(this).addClass("active");
    } else {
      $(this).removeClass("active");
      $("#result").append("no match<br>")
    }
  });
}

(function($) {
  $(document).ready(function() {

    $("#cssmenu").menumaker({
      title: "Menu",
      breakpoint: 100,
      format: "multitoggle"
    });

    $("#cssmenu").prepend("<div id='menu-line'></div>");

    var foundActive = false,
      activeElement, linePosition = 0,
      menuLine = $("#cssmenu #menu-line"),
      lineWidth, defaultPosition, defaultWidth;

    $("#cssmenu > ul > li").each(function() {
      if ($(this).hasClass('active')) {
        activeElement = $(this);
        foundActive = true;
      }
    });

    if (foundActive === false) {
      activeElement = $("#cssmenu > ul > li").first();
    }

    defaultWidth = lineWidth = activeElement.width();

    defaultPosition = linePosition = activeElement.position().left;

    menuLine.css("width", lineWidth);
    menuLine.css("left", linePosition);

    $("#cssmenu > ul > li").hover(function() {
      activeElement = $(this);
      lineWidth = activeElement.width();
      linePosition = activeElement.position().left;
      menuLine.css("width", lineWidth);
      menuLine.css("left", linePosition);
    }, function() {
      //New Stuff -- Find the active element
      activeElement = $("#cssmenu .active");  
      //Set based on active element fulling back to defaultt  if there is none
      menuLine.css("left",  activeElement.length > 0 ? activeElement.position().left :  defaultPosition);
      menuLine.css("width", activeElement.length > 0 ? lineWidth = activeElement.width(): defaultWidth);
    });

  });
})(jQuery);

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#cssmenu:after,
#cssmenu>ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#cssmenu #menu-button {
  display: none;
}

#cssmenu {
  font-family: 'Open Sans', sans-serif;
  line-height: 1;
  background: #b70102;
  width: auto;
}

#menu-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: #f3f3f3;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -ms-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}

#cssmenu>ul>li {
  float: left;
}

#cssmenu.align-center>ul {
  font-size: 0;
  text-align: center;
}

#cssmenu.align-center>ul>li {
  display: inline-block;
  float: none;
}

#cssmenu.align-center ul ul {
  text-align: left;
}

#cssmenu.align-right>ul>li {
  float: right;
}

#cssmenu.align-right ul ul {
  text-align: right;
}

#cssmenu>ul>li>a {
  padding: 20px;
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
  color: #ffffff;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}

#cssmenu>ul>li:hover>a,
#cssmenu>ul>li.active>a {
  color: #f3f3f3;
}

#cssmenu>ul>li.has-sub>a {
  padding-right: 25px;
}

#cssmenu>ul>li.has-sub>a::after {
  position: absolute;
  top: 22px;
  right: 10px;
  width: 4px;
  height: 4px;
  border-bottom: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  content: "";
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
  -ms-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}

#cssmenu>ul>li.has-sub:hover>a::after {
  border-color: #f3f3f3;
}

#cssmenu ul ul {
  position: absolute;
  left: -9999px;
}

#cssmenu li:hover>ul {
  left: auto;
}

#cssmenu.align-right li:hover>ul {
  right: 0;
}

#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0;
}

#cssmenu.align-right ul ul ul {
  margin-left: 0;
  margin-right: 100%;
}

#cssmenu ul ul li {
  height: 0;
  -webkit-transition: height .2s ease;
  -moz-transition: height .2s ease;
  -ms-transition: height .2s ease;
  -o-transition: height .2s ease;
  transition: height .2s ease;
}

#cssmenu ul li:hover>ul>li {
  height: 32px;
}

#cssmenu ul ul li a {
  padding: 10px 20px;
  width: 160px;
  font-size: 12px;
  background: #333333;
  text-decoration: none;
  color: #dddddd;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}

#cssmenu ul ul li:hover>a,
#cssmenu ul ul li a:hover {
  color: #ffffff;
}

#cssmenu ul ul li.has-sub>a::after {
  position: absolute;
  top: 13px;
  right: 10px;
  width: 4px;
  height: 4px;
  border-bottom: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  content: "";
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
  -ms-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}

#cssmenu.align-right ul ul li.has-sub>a::after {
  right: auto;
  left: 10px;
  border-bottom: 0;
  border-right: 0;
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
}

#cssmenu ul ul li.has-sub:hover>a::after {
  border-color: #ffffff;
}

#cssmenu.small-screen {
  width: 100%;
}

#cssmenu.small-screen ul {
  width: 100%;
  display: none;
}

#cssmenu.small-screen.align-center>ul,
#cssmenu.small-screen.align-right ul ul {
  text-align: left;
}

#cssmenu.small-screen ul li,
#cssmenu.small-screen ul ul li,
#cssmenu.small-screen ul li:hover>ul>li {
  width: 100%;
  height: auto;
  border-top: 1px solid rgba(120, 120, 120, 0.15);
}

#cssmenu.small-screen ul li a,
#cssmenu.small-screen ul ul li a {
  width: 100%;
}

#cssmenu.small-screen>ul>li,
#cssmenu.small-screen.align-center>ul>li,
#cssmenu.small-screen.align-right>ul>li {
  float: none;
  display: block;
}

#cssmenu.small-screen ul ul li a {
  padding: 20px 20px 20px 30px;
  font-size: 14px;
  color: #ffffff;
  background: none;
}

#cssmenu.small-screen ul ul li:hover>a,
#cssmenu.small-screen ul ul li a:hover {
  color: #ffffff;
}

#cssmenu.small-screen ul ul ul li a {
  padding-left: 40px;
}

#cssmenu.small-screen ul ul,
#cssmenu.small-screen ul ul ul {
  position: relative;
  left: 0;
  right: auto;
  width: 100%;
  margin: 0;
}

#cssmenu.small-screen>ul>li.has-sub>a::after,
#cssmenu.small-screen ul ul li.has-sub>a::after {
  display: none;
}

#cssmenu.small-screen #menu-line {
  display: none;
}

#cssmenu.small-screen #menu-button {
  display: block;
  padding: 20px;
  color: #ffffff;
  cursor: pointer;
  font-size: 12px;
  text-transform: uppercase;
}

#cssmenu.small-screen #menu-button::after {
  content: '';
  position: absolute;
  top: 21px;
  right: 20px;
  display: block;
  width: 15px;
  height: 2px;
  background: #ffffff;
}

#cssmenu.small-screen #menu-button::before {
  content: '';
  position: absolute;
  top: 26px;
  right: 20px;
  display: block;
  width: 15px;
  height: 3px;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

#cssmenu.small-screen .submenu-button {
  position: absolute;
  z-index: 10;
  right: 0;
  top: 0;
  display: block;
  border-left: 1px solid rgba(120, 120, 120, 0.15);
  height: 54px;
  width: 54px;
  cursor: pointer;
}

#cssmenu.small-screen .submenu-button::after {
  content: '';
  position: absolute;
  top: 22px;
  left: 27px;
  display: block;
  width: 1px;
  height: 11px;
  background: #ffffff;
  z-index: 99;
}

#cssmenu.small-screen .submenu-button::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 27px;
  display: block;
  width: 11px;
  height: 1px;
  background: #ffffff;
  z-index: 99;
}

#cssmenu.small-screen .submenu-button.submenu-opened:after {
  display: none;
}

#cssmenu.small-screen.select-list {
  padding: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>

<div id="cssmenu" class="align-center">
  <ul>
    <li id="editHome"><a href="#">Edit</a></li>
    <li id="newSubmission"><a href="#">new submission</a></li>
    <li class="has-sub"><a href="#"><i class="fa fa-fw fa-bar-chart"></i> reports</a>
      <ul>
        <li><a href="#">Dr.&#39;s notes</a></li>
        <li><a href="#">number of samples</a></li>
        <li><a href="#">arrival temperatures</a></li>
        <li><a href="#">culture count</a></li>
        <li class="has-sub"><a href="#">summaries</a>
          <ul>
            <li><a href="#">% of target</a></li>
            <li><a href="#">stored motility</a></li>
            <li><a href="#">morphology</a></li>
            <li><a href="#">motility</a></li>
            <li><a href="#">TSD</a></li>
            <li><a href="#">CSA report for TSD date range</a></li>
            <li><a href="#">culture summary  by submission</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="has-sub active"><a href="#">setup</a>
      <ul>
        <li><a href="#">users</a></li>
        <li><a href="#">clients</a></li>
        <li><a href="#">canned comments</a></li>
      </ul>
    </li>
    <li id="logOff"><a href="#">log off</a></li>
  </ul>
</div>
<p>
  click "new submission" and it should keep the "active" class
</p>
<div id="result">

</div>

＆＃13;

＆＃13;

＆＃13;