将复选框和按钮组合在同一个 CSS 主页菜单中

Combine checkbox and button in same CSS horitonzal menu

本文关键字：CSS 主页 菜单 同一个 复选框 按钮 组合      更新时间：2023-09-26

缩放部分的菜单项 我需要它们作为按钮单击的功能。Test1-4 我需要像复选框一样运行。"缩放到"按钮工作正常。测试1-4无法正常工作

<body>
<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
    <li><a title='Zoom to U.S' input type='button' name='US' onclick='US();'><span>Zoom to U.S.</span></a></li>
    <li><a title='Zoom to Canada' input type='button' name='Canada' onclick='Canada();'><span>Zoom to Canada</span></a></li>
    <li><a title='Zoom to Mexico' input type='button' name='Mexico' onclick='Mexico();'><span>Zoom to Mexico</span></a></li>    
    <li><a title='Test 1 KML' input type='checkbox' id='kml-Test1-check' name='kml-Test1-check' onclick="toggleKml('Test1');"><span>Test 1 KML</span></a></li>
    <li><a title='Test 2 KML' input type='checkbox' id='kml-Test2-check' name='kml-Test2-check' onclick="toggleKml('Test2');"><span>Test 2 KML</span></a></li>
    <li><a title='Test 3 KML' input type='checkbox' id='kml-Test3-check' name='kml-Test3-check' onclick="toggleKml('Test3');"><span>Test 3 KML</span></a></li>
    <li><a title='Test 4 KML' input type='checkbox' id='kml-Test4-check' name='kml-Test4-check' onclick="toggleKml('Test4');"><span>Test 4 KML</span></a></li>
    <li><a title='Additional KMLs'input type='button' name='AKML' onclick='open_win();'><span>Additional KMLs</span></a></li>
    <li><a title='Remove all KMLs on the screen'input type='button' name='RKML' onclick='killKML();'><span>Remove All KMLs</span></a></li>
    <li class='last'><a title="Contact"><span>Contact</span></a></li>
</ul>
</div>
</body>

#cssmenu {
  border: none;
  border: 0px;
  margin: 0px;
  padding: 0px;
  font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  width: auto;
}
#cssmenu ul {
  background: #333333;
  height: 35px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu li {
  float: left;
  padding: 0px;
}
#cssmenu li a {
  background: #333333 url('images/seperator.png') bottom right no-repeat;
  display: block;
  font-weight: normal;
  line-height: 35px;
  margin: 0px;
  padding: 0px 25px;
  text-align: center;
  text-decoration: none;
}
#cssmenu > ul > li > a {
  color: #cccccc;
}
#cssmenu ul ul a {
  color: #cccccc;
}
#cssmenu li > a:hover,
#cssmenu ul li:hover > a {
  background: #2580a2 url('images/hover.png') bottom center no-repeat;
  color: #FFFFFF;
  text-decoration: none;
}
#cssmenu li ul {
  background: #333333;
  display: none;
  height: auto;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: absolute;
  width: 225px;
  z-index: 200;
  /*top:1em;
    /*left:0;*/
}
#cssmenu li:hover ul {
  display: block;
}
#cssmenu li li {
  background: url('images/sub_sep.png') bottom left no-repeat;
  display: block;
  float: none;
  margin: 0px;
  padding: 0px;
  width: 225px;
}
#cssmenu li:hover li a {
  background: none;
}
#cssmenu li ul a {
  display: block;
  height: 35px;
  font-size: 12px;
  font-style: normal;
  margin: 0px;
  padding: 0px 10px 0px 15px;
  text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover > a {
  background: #2580a2 url('images/hover_sub.png') center left no-repeat;
  border: 0px;
  color: #ffffff;
  text-decoration: none;
}
#cssmenu p {
  clear: left;
}

您的 HTML 是正确的，而不是 

<li><a title='Zoom to U.S' input type='button' name='US' onclick='US();'><span>Zoom to U.S.</span></a></li>

用

<li><a title='Zoom to U.S'><input type='button' name='US' onclick='US();'/><span>Zoom to U.S.</span></a></li>

演示

相关文章：