试图创建一个小网站，新的HTML。遇到div问题

Question

我刚开始使用html并下载我认为它是一个简单的模板。现在我一直在尝试添加下拉菜单，并在右侧添加2个与注册/登录相对应的项目。我尝试创建新的div，ul ...但它似乎从来没有排队或项目丢失。

@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  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 {
  width: auto;
  border-bottom: 3px solid #47c9af;
  font-family: Raleway, sans-serif;
  line-height: 1;
}

#cssmenu ul {
  background: #ffffff;
}

#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-right>ul>li {
  float: right;
}

#cssmenu.align-right>ul>li>a {
  margin-right: 0;
  margin-left: -4px;
}

#cssmenu>ul>li>a {
  z-index: 2;
  padding: 18px 25px 12px 25px;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  color: #444444;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  margin-right: -4px;
}

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

#cssmenu>ul>li>a:after {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 120%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  content: "";
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transform: perspective(5px) rotateX(2deg);
  -webkit-transform-origin: bottom;
  -moz-transform: perspective(5px) rotateX(2deg);
  -moz-transform-origin: bottom;
  transform: perspective(5px) rotateX(2deg);
  transform-origin: bottom;
}

#cssmenu>ul>li.active>a:after,
#cssmenu>ul>li:hover>a:after,
#cssmenu>ul>li>a:hover:after {
  background: #47c9af;
}

@import url(http://fonts.googleapis.com/css?family=Raleway);
#logincssmenu,
#logincssmenu ul,
#logincssmenu ul li,
#logincssmenu ul li a {
  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;
}

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

#logincssmenu {
  width: auto;
  border-bottom: 3px solid #47c9af;
  font-family: Raleway, sans-serif;
  line-height: 1;
}

#logincssmenu ul {
  background: #ffffff;
}

#logincssmenu>ul>li {
  float: right;
}

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

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

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

#logincssmenu.align-right>ul>li>a {
  margin-right: 0;
  margin-left: -4px;
}

#logincssmenu>ul>li>a {
  z-index: 2;
  padding: 18px 25px 12px 25px;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  color: #444444;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  margin-right: -4px;
}

#logincssmenu>ul>li.active>a,
#logincssmenu>ul>li:hover>a,
#logincssmenu>ul>li>a:hover {
  color: #ffffff;
}

#logincssmenu>ul>li>a:after {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 120%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  content: "";
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transform: perspective(5px) rotateX(2deg);
  -webkit-transform-origin: bottom;
  -moz-transform: perspective(5px) rotateX(2deg);
  -moz-transform-origin: bottom;
  transform: perspective(5px) rotateX(2deg);
  transform-origin: bottom;
}

#logincssmenu>ul>li.active>a:after,
#logincssmenu>ul>li:hover>a:after,
#logincssmenu>ul>li>a:hover:after {
  background: #47c9af;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 15px;
  font-size: 15px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #47c9af;
  display: block;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 120%;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  content: "";
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transform: rotateX(2deg);
  -webkit-transform-origin: bottom;
  -moz-transform: perspective(5px) rotateX(2deg);
  -moz-transform-origin: bottom;
  transform: rotateX(2deg);
  transform-origin: bottom;
  color: #ffffff;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

z-index: 2;
padding: 18px 25px 12px 25px;
font-size: 15px;
font-weight: 400;
text-decoration: none;
color: #444444;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
margin-right: -4px;

<!doctype html>
<html lang=''>

<head>
  <meta charset='utf-8'>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="css/loginstyle.css">
  <link rel="stylesheet" href="css/dropdownstyle.css">
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script src="script.js"></script>
  <title>CSS MenuMaker</title>
</head>

<body>

  <div id='cssmenu'>
    <ul>
      <li class='active'><a href='#'>Home</a></li>
      <li><a href='#'>Products</a></li>
      <li><a href='#'>Company</a></li>
      <li><a href='#'>Contact</a></li>
      <div class="dropdown">
        <button class="dropbtn">Dropdown</button>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
      <div id='logincssmenu'>
        <ul>
          <li><a href='#'>Login</a></li>
        </ul>
      </div>
    </ul>
  </div>
</body>
<html>

我还尝试通过复制粘贴原始styles.css中的一些代码来模仿下拉按钮的样式，但没有很好的结果。我几天前才开始，但我不明白为什么有时它会消失和分散。 这是原始模板。 http://cssmenumaker.com/menu/flat-tabbed-menu

Answer 1

把它放在第一个。我认为应该这样做。

    <ul>
       <li class='active'><a href='#'>Home</a></li>
       <li><a href='#'>Products</a></li>
       <li><a href='#'>Company</a></li>
       <li><a href='#'>Contact</a></li>
        <div class="dropdown">
      <button class="dropbtn">Dropdown</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
        <div id='logincssmenu'>
    <li><a href='#'>Login</a></li>
</div>

建议：如果您是html＆amp; css的新手，请尝试制作一些简单的教程。不要下载模板，因为您不会理解发生了什么。