制作二级菜单，内含注册和登录子菜单 （1）当单击注册时，弹出一个注册表单，表单中含有用户名、密码、性别、爱好、户籍所在地等信息，填写完成后单击“注册”按钮，显示表单中注册信息，同时隐藏注册表单。单击重置按钮是清空相关信息； （2）当单击登录时，弹出登录表单，表单中含有用户名和密码信息，当输入用户名为admin,密码是123456时，单击登录后显示正确，同时隐藏登录表单。单击“重置”按钮时清空所填信息。

好的，以下是一个简单的实现二级菜单的示例代码：

HTML 代码：

<ul>
  <li>首页</li>
  <li>关于我们</li>
  <li>服务项目
    <ul class="submenu">
      <li>注册</li>
      <li>登录</li>
    </ul>
  </li>
  <li>联系我们</li>
</ul>

<!-- 注册表单 -->
<div id="register-form" style="display:none;">
  <h2>注册</h2>
  <form>
    <label>用户名：<input type="text" name="username"></label><br>
    <label>密码：<input type="password" name="password"></label><br>
    <label>性别：
      <select name="gender">
        <option value="male">男</option>
        <option value="female">女</option>
      </select>
    </label><br>
    <label>爱好：<input type="text" name="hobbies"></label><br>
    <label>户籍所在地：<input type="text" name="location"></label><br>
    <input type="submit" value="注册">
    <input type="reset" value="重置">
  </form>
  <div id="register-info"></div>
</div>

<!-- 登录表单 -->
<div id="login-form" style="display:none;">
  <h2>登录</h2>
  <form>
    <label>用户名：<input type="text" name="username"></label><br>
    <label>密码：<input type="password" name="password"></label><br>
    <input type="submit" value="登录">
    <input type="reset" value="重置">
  </form>
  <div id="login-info"></div>
</div>

CSS 代码：

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  padding: 10px;
}

.submenu {
  display: none;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}

#register-form, #login-form {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px;
}

JavaScript 代码：

var submenu = document.querySelector('.submenu');
var registerForm = document.getElementById('register-form');
var registerInfo = document.getElementById('register-info');
var loginForm = document.getElementById('login-form');
var loginInfo = document.getElementById('login-info');

submenu.addEventListener('click', function(event) {
  var target = event.target;
  if (target.nodeName === 'LI') {
    if (target.textContent === '注册') {
      registerForm.style.display = 'block';
      loginForm.style.display = 'none';
    } else if (target.textContent === '登录') {
      registerForm.style.display = 'none';
      loginForm.style.display = 'block';
    }
  }
});

registerForm.addEventListener('submit', function(event) {
  event.preventDefault();
  var inputs = registerForm.querySelectorAll('input[name], select[name]');
  var info = '';
  for (var i = 0; i < inputs.length; i++) {
    info += inputs[i].name + ': ' + inputs[i].value + '<br>';
  }
  registerInfo.innerHTML = info;
  registerForm.style.display = 'none';
});

registerForm.addEventListener('reset', function(event) {
  registerInfo.innerHTML = '';
});

loginForm.addEventListener('submit', function(event) {
  event.preventDefault();
  var username = loginForm.querySelector('input[name="username"]');
  var password = loginForm.querySelector('input[name="password"]');
  if (username.value === 'admin' && password.value === '123456') {
    loginInfo.innerHTML = '登录成功';
    loginForm.style.display = 'none';
  } else {
    loginInfo.innerHTML = '用户名或密码错误';
  }
});

loginForm.addEventListener('reset', function(event) {
  loginInfo.innerHTML = '';
});

以上代码中，我们首先使用 CSS 将二级菜单隐藏起来，并分别创建了注册表单和登录表单。然后使用 JavaScript 添加了事件监听器，当点击注册或登录菜单项时，显示相应的表单，并隐藏另一个表单。当注册表单提交时，获取表单中的数据并显示在页面上。当登录表单提交时，判断用户名和密码是否正确，如果正确则显示登录成功信息，否则显示用户名或密码错误信息。同时，我们也添加了重置按钮的事件监听器，当点击重置按钮时，清空表单中的数据。