下拉按钮保持打开状态并且不会关闭

时间:2019-04-03 22:09:33

标签: javascript html css

我有一个问题,因为我的下拉菜单保持打开状态并且没有关闭。我做了什么还是需要添加一些东西?

以下是我所指的屏幕截图:

https://imgur.com/VbU5nit

我正在研究一种解决方案,但找不到与该问题有关的任何东西

我的代码是:

queryset = node.__class__._tree_manager.db_manager(
                node._state.db).filter(filters).order_by(*order_by)
```
<div class="NavigationTop__groupRight__3UIqi">
                  <span class="NavigationTop__navPlayer__2TGn7">
                    <div id="myDropdown" class="dropdown-content">
                      <a href="#" onclick="showDropDown()" class="NavigationTop__icon__32Kg3" data-ui-name="info"><span class="NavigationTop__iconBg__3nlrW">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="16" width="16" class="UI__Icon__icon"><path d="M15.6 32s-.1 0 0 0h-.8c-2.7 0-5.6 0-8.4-.8-3-.9-4.6-2.4-4.7-4.7-.1-1.1.3-2.2 1-3.1 1.1-1.5 2.7-2.4 4.1-3.1.5-.3 1-.5 1.5-.8.6-.4 2-1.4 2.1-2.7 0-.6-.2-1.3-.8-2.1l-.6-.9c-.4-.6-.8-1.2-1.2-1.9-1.2-2.5-1-5.6.4-7.9.2-.3.4-.6.7-.9 1.8-2 4.3-3.1 7-3.1 2.7-.1 5.3 1.1 7.2 3 .3.3.6.7.8 1 1.4 2.3 1.5 5.4.3 7.9-.4.7-.8 1.3-1.2 1.9l-.6.9c-.5.8-.8 1.5-.8 2.1.1 1.3 1.5 2.3 2.1 2.7.5.3 1 .6 1.5.8 1.4.7 3 1.5 4.1 3.1.7.9 1 2.1 1 3.1-.1 2.2-1.7 3.8-4.7 4.7-.7.2-1.4.3-2 .5-.7.1-1.5-.4-1.6-1.1-.1-.7.4-1.5 1.1-1.6.6-.1 1.2-.2 1.7-.4 2.4-.7 2.7-1.5 2.7-2.2 0-.5-.1-.9-.5-1.4-.7-1-1.9-1.6-3.1-2.3-.6-.3-1.1-.6-1.7-.9-2.1-1.3-3.3-3-3.4-4.9-.1-1.2.3-2.4 1.2-3.8.2-.3.4-.7.7-1 .4-.5.7-1 1-1.5.8-1.6.7-3.6-.2-5.2-.1-.1-.2-.2-.4-.5-1.3-1.4-3.2-2.2-5.2-2.2-1.9 0-3.7.8-5 2.2-.2.2-.3.4-.4.5-.9 1.6-1 3.6-.2 5.2.3.5.6 1 1 1.5.2.3.5.6.7 1 .9 1.3 1.3 2.6 1.2 3.8-.1 1.9-1.3 3.6-3.4 4.9-.5.3-1.1.6-1.7.9C6.9 23.4 5.7 24 5 25c-.3.4-.5.9-.5 1.4 0 .7.4 1.5 2.7 2.2 2.4.7 4.9.7 7.6.7h.8c.4 0 .8.2 1 .5.3.3.4.7.3 1.1 0 .6-.6 1.1-1.3 1.1z"></path></svg></span></a>

                    <div class="NavigationPlayer__nav__1GtYE NavigationPlayer__navOpen__kmIqC">

                      <ul class="NavigationPlayer__navSub__SIRkf">

                        <li class="NavigationPlayer__signUp__2AOMK">

                          <a href="https://signin.rockstargames.com/create/?cid=socialclub&amp;lang=en-US&amp;returnUrl=%2F" class="NavigationPlayer__navLink__2oeuj NavigationPlayer__highlight__2lzxA" data-ui-name="signUp">Sign Up</a></li>

                        <li class="NavigationPlayer__signIn__3qaVH"><a href="#" class="NavigationPlayer__navLink__2oeuj" data-ui-name="signIn">Sign In</a></li>
                        <div id="dropdown" class="dropdown">
                        <li><a href="#" class="NavigationPlayer__navLink__2oeuj" data-ui-name="legal">Legal</a></li>

                        <li><a href="#" class="NavigationPlayer__navLink__2oeuj" data-ui-name="privacy">Privacy</a></li>

                        <li><a href="#" class="NavigationPlayer__navLink__2oeuj" data-ui-name="support">Support</a></li>

                        <li><a href="#" class="NavigationPlayer__navLink__2oeuj" data-ui-name="cookies">Cookies</a></li>

                        <li><div class="NavigationPlayer__languageWrap__2jmcz">
                            <div class="UI__DropDown__custom-select LanguageSelector__dropdown__2uNdg">
                                <select class="select" data-ui-name="languageSelector">
                                    <option value="de-DE">Deutsch</option>
                                    <option value="en-US">English</option>
                                    <option value="es-ES">Español</option>
                                    <option value="es-MX">Español Latinoamérica</option>
                                    <option value="fr-FR">Français</option>
                                    <option value="it-IT">Italiano</option>
                                    <option value="ja-JP">日本語</option>
                                    <option value="ko-KR">한국어</option>
                                    <option value="pl-PL">Polski</option>
                                    <option value="pt-BR">Português do Brasil</option>
                                    <option value="ru-RU">Русский</option>
                                    <option value="zh-TW">繁體中文</option>
                                    <option value="zh-CN">简体中文</option>
                                </select>
                                <script>
                                  document.addEventListener("load", hideDropDownOnLoad());
                                  function hideDropDownOnLoad() {
                                  // Is called when the document loads to hide the dropdown
                                  var dropdown = document.getElementById("dropdown");
                                  dropdown.style.display = "none";
                                  function showDropDown() {
                                  // Get the dropdown
                                  var dropdown = document.getElementById("dropdown");
                                  // Check to see if the dropdown is currently hidden
                                  if(dropdown.style.display === "none") {
                                  // It is hidden so show the drop down
                                  dropdown.style.display = "block";
                                } else {
                                // The dropdown is visible so hide it
                                dropdown.style.display = "none";
                              }
                            }
                          </script>
```
@media (min-width: 64em) {
  .NavigationTop__wrap__fQdBR {
    padding: 0 0.625rem;
  }
}

.NavigationTop__inner__1LxZ7 {
  margin: 0 auto;
  max-width: 1420px;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}

@media (min-width: 88.75em) {
  .NavigationTop__inner__1LxZ7 {
    padding: 0 0.625rem;
  }
}

.NavigationTop__icon__32Kg3 {
  display: block;
  padding: 14px 0.625rem;
  position: relative;
}

.NavigationTop__icon__32Kg3:focus {
  outline: 0;
}

.NavigationTop__icon__32Kg3 .NavigationTop__iconBg__3nlrW {
  -ms-flex-align: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: -ms-flexbox;
  display: flex;
  height: 32px;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 8px;
  position: relative;
  width: 32px;
}

.NavigationTop__iconBg__3nlrW svg {
  fill: #ffffff;
}

.NavigationTop__icon__32Kg3:focus .NavigationTop__iconBg__3nlrW svg,
.NavigationTop__icon__32Kg3:hover .NavigationTop__iconBg__3nlrW svg {
  fill: url("#gradient") #f7931e;
}

.hide {
  display: none;
}

.NavigationTop__hamburger__KU-ur {
  padding-left: 0.625rem;
}

@media (min-width: 64em) {
  .NavigationTop__hamburger__KU-ur {
    display: none;
  }
}

.NavigationTop__search__UDzfT {
  margin-right: auto;
}

.NavigationTop__groupLeft__3lTQW {
  display: -ms-flexbox;
  display: flex;
  margin-right: auto;
}

@media (min-width: 64em) {
  .NavigationTop__groupLeft__3lTQW {
    margin-left: auto;
    margin-right: 0;
  }
}

.NavigationTop__groupRight__3UIqi {
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin-left: auto;
  min-width: 104px;
}

@media (min-width: 64em) {
  .NavigationTop__groupRight__3UIqi {
    margin-left: 0;
    min-width: 0;
  }
}

.NavigationTop__logo__3GmAs {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

@media (min-width: 64em) {
  .NavigationTop__logo__3GmAs {
    -ms-flex-order: -1;
    order: -1;
    margin-left: 10px;
  }
}

.NavigationTop__logoThunder__1m1Ou {
  background-image: url(../images/react/logo/thunder.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  box-sizing: content-box;
  display: inline-block;
  height: 32px;
  position: relative;
  top: 1px;
  width: 34px;
}

@media (max-width: 64.6875em) {
  .pl-PL .NavigationTop__logoSocialClub__1EfPy {
    display: none;
  }
}

@media (max-width: 68.125em) {
  .pt-BR .NavigationTop__logoSocialClub__1EfPy {
    display: none;
  }
}

@media (max-width: 69.375em) {
  .es-ES .NavigationTop__logoSocialClub__1EfPy,
  .es-MX .NavigationTop__logoSocialClub__1EfPy {
    display: none;
  }
}

@media (max-width: 70.625em) {
  .fr-FR .NavigationTop__logoSocialClub__1EfPy,
  .ru-RU .NavigationTop__logoSocialClub__1EfPy {
    display: none;
  }
}

.NavigationTop__logoSocialClub__1EfPy {
  background-image: url(../images/react/logo/socialclub_small.png);
  background-repeat: no-repeat;
  background-size: 100%;
  box-sizing: content-box;
  display: none;
  height: 36px;
  margin-left: 8px;
  width: 128px;
}

@media (min-width: 64em) {
  .NavigationTop__logoSocialClub__1EfPy {
    display: inline-block;
  }
}

.NavigationTop__logo__3GmAs:hover .NavigationTop__logoSocialClub__1EfPy {
  -webkit-filter: drop-shadow(0 0 5px rgba(252, 175, 23, 0.5));
  filter: drop-shadow(0 0 5px rgba(252, 175, 23, 0.5));
}

.NavigationTop__notifications__2lGKZ {
  color: #4d4d4d;
  cursor: pointer;
}

@media (min-width: 64em) {
  .NavigationTop__notifications__2lGKZ {
    position: relative;
  }
}

.NavigationTop__notifications__2lGKZ:focus {
  outline: 0;
}

.NavigationTop__notifications__2lGKZ .NavigationTop__new__1FmP_ {
  font-size: 0.75rem;
  line-height: 1.25rem;
  -ms-flex-align: center;
  align-items: center;
  background-color: #bd0808;
  border-radius: 3px;
  color: #ffffff;
  display: -ms-flexbox;
  display: flex;
  font-weight: bold;
  -ms-flex-pack: center;
  justify-content: center;
  right: -5px;
  line-height: 1;
  padding: 3px 5px;
  position: absolute;
  top: -5px;
}

.NavigationTop__nav__1InFQ {
  display: none;
  list-style: none;
  padding: 0;
}

@media (max-width: 63.9375em) {
  .NavigationTop__nav__1InFQ {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    height: 100%;
    left: 0;
    margin: 0;
    padding-bottom: 60px;
    position: fixed;
    top: 60px;
    width: 50%;
  }
}

@media (min-width: 64em) {
  .NavigationTop__nav__1InFQ {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 60px;
    margin: 0 0 0 10px;
  }
}

.NavigationTop__nav__1InFQ li {
  position: relative;
}

.NavigationTop__navLink__k_LuP {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: break-word;
  word-wrap: break-word;
  color: #000000;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: bold;
  padding: 1.25rem;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  z-index: 0;
}

.NavigationTop__navLink__k_LuP:focus {
  outline: 0;
}

.NavigationTop__navLink__k_LuP:hover {
  color: #000000;
}

@media (min-width: 64em) {
  .NavigationTop__navLink__k_LuP {
    color: #ffffff;
  }
  .NavigationTop__navLink__k_LuP:hover {
    color: #ffffff;
  }
}

.NavigationTop__navLink__k_LuP::after,
.NavigationTop__navLinkSub__2QMkZ::after {
  background: linear-gradient(45deg, #f7931e, #fcaf17);
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  content: ' ';
  display: none;
  height: 6px;
  left: 10px;
  position: absolute;
  top: 0;
  width: 88%;
  z-index: -1;
}

@media (min-width: 64em) {
  .NavigationTop__navLink__k_LuP::after,
  .NavigationTop__navLinkSub__2QMkZ::after {
    left: 6%;
  }
}

@media (min-width: 64em) {
  .NavigationTop__nav__1InFQ li:hover .NavigationTop__navLink__k_LuP::after,
  .NavigationTop__nav__1InFQ li .NavigationTop__navLink__k_LuP:focus::after {
    display: block;
  }
}

.NavigationTop__navLink__k_LuP.NavigationTop__navLinkActive__1-yPY {
  color: #f7931e;
}

@media (min-width: 64em) {
  .NavigationTop__navLink__k_LuP.NavigationTop__navLinkActive__1-yPY {
    color: #ffffff;
  }
}

.NavigationTop__navLinkSub__2QMkZ.NavigationTop__navLinkActive__1-yPY {
  color: #fcaf17;
}

@media (min-width: 64em) {
  .NavigationTop__navLink__k_LuP.NavigationTop__navLinkActive__1-yPY::after {
    background: linear-gradient(45deg, #f7931e, #fcaf17);
    display: block;
  }
}

@media (max-width: 63.9375em) {
  .NavigationTop__navSub__3YEgK.NavigationTop__navSubOn__QIUAx,
  .NavigationTop__navSubSub__2Xm48.NavigationTop__navSubOn__QIUAx {
    display: block;
  }
}

.NavigationTop__navSub__3YEgK::before,
.NavigationTop__navSubSub__2Xm48::before {
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  content: '';
  -webkit-filter: drop-shadow(0 0 1px #999999);
  filter: drop-shadow(0 0 1px #999999);
  position: absolute;
  top: -6px;
}

.NavigationTop__navSub__3YEgK::before {
  left: 30px;
}

@media (min-width: 64em) {
  .NavigationTop__navSub__3YEgK::before {
    left: 60px;
  }
}

.NavigationTop__navSubSub__2Xm48::before {
  left: 40px;
}

@media (min-width: 64em) {
  .NavigationTop__navSubSub__2Xm48::before {
    border-bottom: 6px solid transparent;
    border-right: 6px solid #ffffff;
    border-left: 0;
    border-top: 6px solid transparent;
    left: -6px;
    top: 22px;
  }
}

@media (min-width: 64em) {
  .NavigationTop__nav__1InFQ li:hover>.NavigationTop__navSub__3YEgK,
  .NavigationTop__nav__1InFQ li:hover>.NavigationTop__navSubSub__2Xm48,
  .NavigationTop__nav__1InFQ li>.NavigationTop__navSub__3YEgK:focus,
  .NavigationTop__nav__1InFQ li>.NavigationTop__navSubSub__2Xm48:focus {
    visibility: visible;
  }
}

.NavigationTop__navLinkSub__2QMkZ {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: break-word;
  word-wrap: break-word;
  background-color: #ffffff;
  color: #000000;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: bold;
  padding: 1.25rem 2.5rem 1.25rem 1.875rem;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  z-index: 0;
}

@media (min-width: 64em) {
  .NavigationTop__navLinkSub__2QMkZ:hover {
    background: linear-gradient(45deg, #f7931e, #fcaf17);
    color: #ffffff;
  }
}

.NavigationTop__nav__1InFQ li ul li ul li .NavigationTop__navLinkSub__2QMkZ {
  padding: 1.25rem 2.5rem;
}

@media (max-width: 63.9375em) {
  .NavigationTop__navLinkToggle__2zB_R {
    box-sizing: content-box;
    padding: 22px 16px;
    position: absolute;
    right: 0;
    top: 0;
  }
}

@media (min-width: 64em) {
  .NavigationTop__navLinkToggle__2zB_R {
    display: none;
  }
}

.NavigationTop__navSub__3YEgK,
.NavigationTop__navSubSub__2Xm48 {
  list-style: none;
  margin: 0;
  min-width: 300px;
  padding: 0;
  top: calc(100% + -1px);
}

@media (max-width: 63.9375em) {
  .NavigationTop__navSub__3YEgK,
  .NavigationTop__navSubSub__2Xm48 {
    border-bottom: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
    display: none;
    position: relative;
    width: 100%;
    left: 0;
  }
}

@media (min-width: 64em) {
  .NavigationTop__navSub__3YEgK {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
    left: -25px;
    position: absolute;
    visibility: hidden;
  }
}

@media (min-width: 64em) {
  .NavigationTop__navSubSub__2Xm48 {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
  }
}

@media (max-width: 63.9375em) {
  .NavigationTop__menuOpen__r1RJG {
    height: 100%;
    overflow-y: hidden;
    position: fixed;
    width: 100%;
  }
  .NavigationTop__menuOpen__r1RJG body {
    height: 100%;
    overflow-y: hidden;
    position: fixed;
    width: 100%;
  }
}

@media (max-width: 63.9375em) {
  .NavigationTop__nav__1InFQ>li:nth-child(even) .NavigationTop__navLink__k_LuP {
    background-color: #fafafa;
  }
}

.NavigationTop__navSub__3YEgK>li:nth-child(even) .NavigationTop__navLinkSub__2QMkZ {
  background-color: #fafafa;
}

@media (min-width: 64em) {
  .NavigationTop__overlay__h6uED {
    background: rgba(0, 0, 0, 0.3);
    height: calc(100vh - 60px);
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 60px;
    transition: 0.1s 0.2s;
    visibility: hidden;
    width: 100vw;
    z-index: 5000;
  }
  .NavigationTop__nav__1InFQ li:hover>.NavigationTop__overlay__h6uED {
    opacity: 1;
    transition-delay: 0s;
    visibility: visible;
  }
}

.NavigationTop__navLink__k_LuP.NavigationTop__navLinkHighlight__2uEEp,
.NavigationTop__navLinkSub__2QMkZ.NavigationTop__navLinkHighlight__2uEEp {
  color: #ff0000;
}

.NavigationTop__navLink__k_LuP.NavigationTop__navLinkHighlight__2uEEp::after,
.NavigationTop__navLinkSub__2QMkZ.NavigationTop__navLinkHighlight__2uEEp::after {
  color: #ff0000;
}

@media (min-width: 64em) {
  .NavigationTop__signUp__15T16,
  .NavigationTop__signIn__38Mfg {
    display: none;
  }
}

.NavigationTop__navSignedOut__2qibz {
  display: none;
}

@media (min-width: 83.125em) {
  .NavigationTop__navSignedOut__2qibz {
    display: -ms-flexbox;
    display: flex;
  }
}

.NavigationTop__avatar__2rxHG:hover::after {
  border: 2px solid #f7931e;
}

.NavigationTop__avatar__2rxHG {
  display: block;
  padding: 14px 0.625rem;
  cursor: pointer;
}

.NavigationTop__avatar__2rxHG img {
  border-radius: 50%;
  position: relative;
}

.NavigationTop__avatar__2rxHG::after {
  background: transparent;
  border-radius: 50%;
  content: ' ';
  height: 36px;
  left: 8px;
  position: absolute;
  top: 12px;
  width: 36px;
  z-index: -1;
}

.NavigationTop__nav__1InFQ:hover .NavigationTop__avatar__2rxHG::after {
  border: 2px solid #f7931e;
}

.NavigationTop__navPlayer__2TGn7 {
  position: relative;
}

任何帮助将不胜感激,并在此先感谢。

1 个答案:

答案 0 :(得分:1)

我无法让您的代码正常工作,因此我举了一个例子。您需要做的是在文档加载中将下拉菜单的style.display设置为none。

然后将showDropDown函数添加到按钮的onclick方法中,以便您可以根据按钮的当前状态隐藏/显示按钮。它会检查按钮当前是否处于隐藏状态,如果按钮处于隐藏状态,则显示div,否则显示div。

document.addEventListener("load", hideDropDownOnLoad());

function hideDropDownOnLoad() {
  // Is called when the document loads to hide the dropdown
  var dropdown = document.getElementById("dropdown");
  dropdown.style.display = "none";
}

function showDropDown() {
  // Get the dropdown
  var dropdown = document.getElementById("dropdown");
  
  // Check to see if the dropdown is currently hidden
  if(dropdown.style.display === "none") {
    // It is hidden so show the drop down
    dropdown.style.display = "block";
  } else {
    // The dropdown is visible so hide it
    dropdown.style.display = "none";
  }
}
<div class="container">
  <a href="#" onclick="showDropDown()">Click for More...</a>
  <div id="dropdown" class="dropdown">
    <ul>
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
      <li>Option 4</li>
      <li>Option 5</li>
    </ul>
  </div>
</div>

更新 我已经更新了您的实际代码,使其正常工作,请参见下文:

document.addEventListener("load", hideDropDownOnLoad());

function hideDropDownOnLoad() {
  // Is called when the document loads to hide the dropdown
  var dropdown = document.getElementById("dropdown");
  dropdown.style.display = "none";
}

function showDropDown() {
  // Get the dropdown
  var dropdown = document.getElementById("dropdown");
  
  // Check to see if the dropdown is currently hidden
  if(dropdown.style.display === "none") {
    // It is hidden so show the drop down
    dropdown.style.display = "block";
  } else {
    // The dropdown is visible so hide it
    dropdown.style.display = "none";
  }
}
<div class="NavigationTop__groupRight__3UIqi">
  <span class="NavigationTop__navPlayer__2TGn7">
                        <div id="myDropdown" class="dropdown-content">
                        <a onclick="showDropDown()" href="#" class="NavigationTop__icon__32Kg3" data-ui-name="info">

                          <span class="NavigationTop__iconBg__3nlrW">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="16" width="16" class="UI__Icon__icon">
                              <path d="M15.6 32s-.1 0 0 0h-.8c-2.7 0-5.6 0-8.4-.8-3-.9-4.6-2.4-4.7-4.7-.1-1.1.3-2.2 1-3.1 1.1-1.5 2.7-2.4 4.1-3.1.5-.3 1-.5 1.5-.8.6-.4 2-1.4 2.1-2.7 0-.6-.2-1.3-.8-2.1l-.6-.9c-.4-.6-.8-1.2-1.2-1.9-1.2-2.5-1-5.6.4-7.9.2-.3.4-.6.7-.9 1.8-2 4.3-3.1 7-3.1 2.7-.1 5.3 1.1 7.2 3 .3.3.6.7.8 1 1.4 2.3 1.5 5.4.3 7.9-.4.7-.8 1.3-1.2 1.9l-.6.9c-.5.8-.8 1.5-.8 2.1.1 1.3 1.5 2.3 2.1 2.7.5.3 1 .6 1.5.8 1.4.7 3 1.5 4.1 3.1.7.9 1 2.1 1 3.1-.1 2.2-1.7 3.8-4.7 4.7-.7.2-1.4.3-2 .5-.7.1-1.5-.4-1.6-1.1-.1-.7.4-1.5 1.1-1.6.6-.1 1.2-.2 1.7-.4 2.4-.7 2.7-1.5 2.7-2.2 0-.5-.1-.9-.5-1.4-.7-1-1.9-1.6-3.1-2.3-.6-.3-1.1-.6-1.7-.9-2.1-1.3-3.3-3-3.4-4.9-.1-1.2.3-2.4 1.2-3.8.2-.3.4-.7.7-1 .4-.5.7-1 1-1.5.8-1.6.7-3.6-.2-5.2-.1-.1-.2-.2-.4-.5-1.3-1.4-3.2-2.2-5.2-2.2-1.9 0-3.7.8-5 2.2-.2.2-.3.4-.4.5-.9 1.6-1 3.6-.2 5.2.3.5.6 1 1 1.5.2.3.5.6.7 1 .9 1.3 1.3 2.6 1.2 3.8-.1 1.9-1.3 3.6-3.4 4.9-.5.3-1.1.6-1.7.9C6.9 23.4 5.7 24 5 25c-.3.4-.5.9-.5 1.4 0 .7.4 1.5 2.7 2.2 2.4.7 4.9.7 7.6.7h.8c.4 0 .8.2 1 .5.3.3.4.7.3 1.1 0 .6-.6 1.1-1.3 1.1z"></path></svg></span></a>

  <div id="dropdown" class="NavigationPlayer__nav__1GtYE NavigationPlayer__navOpen__kmIqC">

    <ul class="NavigationPlayer__navSub__SIRkf">

      <li class="NavigationPlayer__signUp__2AOMK">

        <a href="#" class="NavigationPlayer__navLink__2oeuj NavigationPlayer__highlight__2lzxA" data-ui-name="signUp">Sign Up</a></li>

      <li class="NavigationPlayer__signIn__3qaVH"><a href="#" class="NavigationPlayer__navLink__2oeuj" data-ui-name="signIn">Sign In</a></li>

      <li><a href="#" class="NavigationPlayer__navLink__2oeuj" data-ui-name="legal">Legal</a></li>

      <li><a href="#" class="NavigationPlayer__navLink__2oeuj" data-ui-name="privacy">Privacy</a></li>

      <li><a href="#" class="NavigationPlayer__navLink__2oeuj" data-ui-name="support">Support</a></li>

      <li><a href="#" class="NavigationPlayer__navLink__2oeuj" data-ui-name="cookies">Cookies</a></li>

      <li>
        <div class="NavigationPlayer__languageWrap__2jmcz">
          <div class="UI__DropDown__custom-select LanguageSelector__dropdown__2uNdg">
            <select class="select" data-ui-name="languageSelector">
              <option value="de-DE">Deutsch</option>
              <option value="en-US">English</option>
              <option value="es-ES">Español</option>
              <option value="es-MX">Español Latinoamérica</option>
              <option value="fr-FR">Français</option>
              <option value="it-IT">Italiano</option>
              <option value="ja-JP">日本語</option>
              <option value="ko-KR">한국어</option>
              <option value="pl-PL">Polski</option>
              <option value="pt-BR">Português do Brasil</option>
              <option value="ru-RU">Русский</option>
              <option value="zh-TW">繁體中文</option>
              <option value="zh-CN">简体中文</option>
            </select>
          </div>