单击鼠标时菜单消失

时间：2017-04-25 05:39:44

标签： html css menu submenu

我的html / css子菜单有问题。当我点击子菜单链接（鼠标按下，而不是向上）子菜单消失，我无法按照href中的链接。所有带有javascripts的文件都将关闭。你能解释一下我的错误吗？ 对不起我的英文

.main__menu {
  float: left;
  width: 370px;
}

.main__menu_basic {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.main__menu_basic li {
  margin: 0 0 5px 0;
}

.main__menu_basic li:last-child {
  margin: 0 0 0 0;
}

.main__menu_basic_link {
  background-color: #dd233a;
  border-radius: 5px;
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
  line-height: 24px;
  color: #ffffff;
  display: block;
  padding: 5px 0 5px 10px;
}

.main__menu_basic_link_alignment {
  padding: 17px 0 17px 10px;
}

.main__menu_basic_link:hover {
  background-color: #0077a2;
}

.main__menu_nested {
  display: none;
}

.main__menu_basic_link:focus~.main__menu_nested {
  display: block;
  /*position: fixed;*/
  position: absolute;
  /*left: 35%;
    top: 30%;*/
  left: 100%;
  top: 5%;
  list-style-type: none;
  width: 100%;
}

.main__menu_nested_link {
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
  line-height: 24px;
  background-color: #2f8cad;
  opacity: 0.7;
  display: block;
  padding: 5px 15px;
  border-radius: 5px;
}

.main__menu_nested_link:hover {
  background-color: #2f8cad;
  opacity: 1;
}
<nav class="main__menu">
  <ul class="main__menu_basic">
    <li>
      <a class="main__menu_basic_link main__menu_basic_link_alignment" href="#">Речные круизы по России</a>
      <ul class="main__menu_nested">
        <li>
          <a class="main__menu_nested_link" href="#">Поиск круизов</a>
        </li>
        <li>
          <a class="main__menu_nested_link" href="#">Экскурсии до и после круизов</a>
        </li>
        <li>
          <a class="main__menu_nested_link" href="#">Теплоходы</a>
        </li>
        <li>
          <a class="main__menu_nested_link" href="#">Скидки и спецредложения</a>
        </li>
        <li>
          <a class="main__menu_nested_link" href="#">Карта маршрутов</a>
        </li>
        <li>
          <a class="main__menu_nested_link" href="#">Корпоративным клиентам</a>
        </li>
      </ul>
    </li>

  </ul>
</nav>

2 个答案:

答案 0 :(得分：1)

我已使用以下代码更新了您的代码。

以下代码适用于import os, sys global rec def interpret_string(s): if not isinstance(s, str): return str(s) if s.isdigit(): return int(s) try: return float(s) except ValueError: return s f= open("turn.prn","r") f1=open('turn.out', 'a') if f.mode == 'r': fl = f.readlines() i = 0 a = [0.0] * 1000 rec = [0] * 1000 for x in fl: vol = interpret_string(x[90:96]) ul1 = interpret_string(x[32:40]) ul2 = interpret_string(x[41:49]) if vol != str(x[90:96]): if vol > 0 and ul1 > 0: prin = false # This will trigger the print only if the if- # condition is met Diff = (((ul1 - vol) / ul1) ** 2) ** 0.5 GEH = (((2 * (ul1-vol)**2))/(ul1+vol))**0.5 if GEH > 0.0 : a.append(GEH) prin = true else : a.append(None) rec[i] = i i=i+1 if prin : print(i,a[i],rec[i],GEH) f.close() f1.close() ，它只会使用css切换checkbox#toggleDropdown。

<强> HTML 

submenu

<强> CSS 

<label class="main__menu_basic_link main__menu_basic_link_alignment" for="toggleDropdown">
 Речные круизы по России
</label>
<input type=checkbox id=toggleDropdown>

＆＃13;
＆＃13; 
#toggleDropdown{
  display:none;
}
#toggleDropdown:checked ~ .main__menu_nested {
  display: block;
  /*position: fixed;*/
  position: absolute;
  /*left: 35%;
    top: 30%;*/
  left: 100%;
  top: 5%;
  list-style-type: none;
  width: 100%;
}
＆＃13; 
.main__menu {
  float: left;
  width: 370px;
}

.main__menu_basic {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.main__menu_basic li {
  margin: 0 0 5px 0;
}

.main__menu_basic li:last-child {
  margin: 0 0 0 0;
}

.main__menu_basic_link {
  background-color: #dd233a;
  border-radius: 5px;
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
  line-height: 24px;
  color: #ffffff;
  display: block;
  padding: 5px 0 5px 10px;
}

.main__menu_basic_link_alignment {
  padding: 17px 0 17px 10px;
}

.main__menu_basic_link:hover {
  background-color: #0077a2;
}

.main__menu_nested {
  display: none;
}

#toggleDropdown{
  display:none;
}
#toggleDropdown:checked ~ .main__menu_nested {
  display: block;
  /*position: fixed;*/
  position: absolute;
  /*left: 35%;
    top: 30%;*/
  left: 100%;
  top: 5%;
  list-style-type: none;
  width: 100%;
}

.main__menu_nested_link {
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
  line-height: 24px;
  background-color: #2f8cad;
  opacity: 0.7;
  display: block;
  padding: 5px 15px;
  border-radius: 5px;
}

.main__menu_nested_link:hover {
  background-color: #2f8cad;
  opacity: 1;
}
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

@charset "UTF-8";
/* Starter CSS for Flyout Menu */
#cssmenu {
  padding: 0;
  margin: 0;
  border: 0;
}
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu ul {
  position: relative;
  z-index: 597;
  float: left;
  width: 220px;
}
#cssmenu ul li {
  float: left;
  min-height: 1px;
  line-height: 1em;
  vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
}
#cssmenu ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%;
}
#cssmenu ul ul li {
  float: none;
}
#cssmenu ul ul ul {
  top: 1px;
  left: 99%;
}
#cssmenu ul li:hover > ul {
  visibility: visible;
}
#cssmenu ul ul {
  top: 1px;
  left: 99%;
}
#cssmenu ul li {
  float: none;
}
#cssmenu ul {
  font-weight: bold;
}
#cssmenu ul ul {
  margin-top: 1px;
}
#cssmenu ul ul li {
  font-weight: normal;
}
/* Custom CSS Styles */
#cssmenu {
  border-radius: 5px 0 0 5px;
  -moz-border-radius: 5px 0 0 5px;
  -webkit-border-radius: 5px 0 0 5px;
  background-color: #141414;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
  background-repeat: repeat-x;
  width: 200px;
}
#cssmenu:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background-color: #141414;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
  background-repeat: repeat-x;
  color: #fff;
  display: block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  font-weight: normal;
  line-height: 180%;
  padding: 13px 20px;
  text-decoration: none;
}
#cssmenu ul {
  border-right: 2px solid #0fa1e0;
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  right: 0;
  top: 50%;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #0fa1e0;
  margin-top: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 0 0 5px;
  -moz-border-radius: 0 0 0 5px;
  -webkit-border-radius: 0 0 0 5px;
}
#cssmenu > ul > li.active a {
  background-color: #070707;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
  background-repeat: repeat-x;
}
#cssmenu > ul > li.active > a {
  box-shadow: inset 0 0 5px black;
  -moz-box-shadow: inset 0 0 5px black;
  -webkit-box-shadow: inset 0 0 5px black;
}
#cssmenu > ul > li:hover > a {
  background-color: #070707;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
  background-repeat: repeat-x;
  box-shadow: inset 0 0 5px black;
  -moz-box-shadow: inset 0 0 5px black;
  -webkit-box-shadow: inset 0 0 5px black;
  color: #fff;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 150px;
  top: 5px;
  left: 100%;
}
#cssmenu .has-sub ul a {
  font-size: 12px;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #0fa1e0;
  border-bottom: 1px dotted #31b7f1;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
  color: #fff;
}
#cssmenu .has-sub ul li:hover a {
  background: #0c82b5;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #0c82b5;
  border-bottom: 1px dotted #0fa1e0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #09638a;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

<body>
<div id="cssmenu">
  <ul>
     <li class="active"><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
     <li class="has-sub"><a href="#"><i class="fa fa-fw fa-bars"></i> Речные круизы по России</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>
        </ul>
     </li>
     <li><a href="#"><i class="fa fa-fw fa-cog"></i> Settings</a></li>
     <li><a href="#"><i class="fa fa-fw fa-phone"></i> Contact</a></li>
  </ul>
</div>
</body>

</html>

相关问题
最新问题