基于CSS+HTML菜鸟自己研究的居中导航栏透明双下拉框

1，居中导航栏做出来的效果

效果：

2.透明下拉框

透明导航栏：

图中效果是我用最简单最笨的方式写出来的，也是作为平时的练习，建一个完整的网站，因为是自己拼凑的，所以两个并排下拉框是使用绝对定位来改变位置的,所以需要自己调节left,top的值，直接上代码段。

css样式

    <style>
    * {
    margin:0; padding:0;}
ul, li{
   
  list-style:none;
}
a {
    
    text-decoration:none;
}
.nav {
    
padding-left:15%;
list-style-type:none;

overflow:hidden;
width: 100%;
height:40px;
background-color:rgb(184, 0, 0);
padding-top: 1px ;
font-size: 17px;
    }
    /* 上面代码设置总体的长度高度，如果在网页中是会自适应的*/
.nav ul li {
    float:left;}
.nav ul li a {
   

  z-index:10;
     width:180px; 
     height:40px;
      text-align:center; 
      line-height:30px; 
      display:block; 
      border-right:2px solid