原生导航栏-----logo和导航

最近在使用原生写网站，把导航栏实现记录下来
先看效果图

HTML部分

<div class="header w">
    <div class="logo">
       <div class="logoImg"></div>
       <h6>xxxxxxxxxx</h6>
    </div>
    <div class="nav">
      <ul class="navUl">
        <li><a href="#introduce">产品介绍</a></li>
        <li><a href="#about">关于我们</a></li>
        <li><a href="#cooperation">合作伙伴</a></li
      </ul>
    </div>
  </div>
  

CSS部分

/* 清除元素的内外边距 */
* {
  padding: 0;
  margin: 0;
}
html {
  /*使用a标签瞄点 整个页面平滑滚动效果 */
  scroll-behavior:smooth;
}
a{
  text-decoration: none;
}
/* 清除浮动 */
.clearfix::before,
.clearfix::after{
  content: '';
  display: table;
}
.clearfix::after{
  clear: both;
}
.clearfix::after{
  *zoom:1
}
/* 清除列表样式 */
li {
  list-style: none;
}
/* 清除按钮边框样式 */
button {
  border: none;
}
body {
  background-color: #FFFFFF;
}

/* 版心 1200 */
.w {
  width: 1200px;
  margin: auto;
}
/*  header 头部模块 */
.header {
  height: 42px;
  background-color: #FFFFFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin: 30px auto; */
}
.logo {
  display: flex;
  flex-direction: row;
}
.logoImg {
  width: 23px;
  height: 23px;
  margin-right: 3px;
  background-color: #006CFF;
}

.navUl>li:nth-child(4){
  position: relative;
}
.liImg{
  position: absolute;
  top: 42px;
  left: 0;
  display: none;
}
.navUl>li:nth-child(4):hover .liImg{
  display: block;
}
.nav {
  float: left;
  display: flex;
}
.nav ul li{
  float: left;
}
.nav ul li a:focus {
  background-color:#006CFF;
  color: white;
}
.nav ul li a{
  display: block;
  height: 42px;
  margin-right: 20px;
  padding: 0 10px;
  line-height: 40px;
  font-size: 18px;
  color: #050505;
  text-decoration: none;
}