创建全宽下拉导航菜单

Question

尝试创建一个全宽下拉导航菜单，但无论我尝试什么，它都无法正常工作。菜单是全宽并且被推到一边，或者根本不是全宽。不知道发生了什么。请帮忙！！

我希望它与此类似：

HTML

<nav id="access" class="access" role="navigation" style="">

            <div id="menu" class="menu">

                <ul id="tiny">

                     <li ><a href="#" >Home</a></li>
                     <li ><a href="#">Products  </a></li>
                     <li ><a href="#">Contact us</a></li>

                 </ul>

                </div>

           </nav>

             </div>
             </div>

CSS

#access .menu {
list-style: none;
font-weight: normal;
position: relative;
float: right;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
margin-top: 0px;

}

#access .menu ul {
margin: 0px;
list-style-type: none;
position: relative;
text-align: left;
z-index: 1001;
margin-right:0px;
float: right;
display:inline;
}

#access .menu ul li {
position: relative;
display: inline-block;
padding: 0;
z-index: 101;
margin: 0px 0px 0px 1px;
float: left;
}

 .menu ul li a {
display: inline-block;
text-decoration: none;
font-size: 13px;
line-height: 1;
color: #666;
margin: 0;
font-weight:normal;
padding: 23px 10px 23px 10px;
text-align: center;
}

.menu ul li.first a{    
padding: 23px 12px 23px 12px;
}

.menu ul li.first a:hover{  
padding: 23px 12px 23px 12px !important;
}

.menu ul li.second a{   
padding: 23px 12px 23px 12px;
}

.menu ul li.second a:hover{ 
padding: 23px 12px 23px 12px !important;
}

#access .menu ul li.six a:hover {
margin-top:12px !important;
}

#access .menu ul li a:hover {
color: #318dde;    
padding: 23px 10px 23px 10px;
margin-top:0px !important;
margin-bottom:0px;
} 

#access .menu ul li ul {
position:absolute;
display: none;
visibility: hidden;
width: 100% !important;
padding: 0px;
text-align: left;
background:rgba(255,255,255, .50) !important;
    margin-top:0px;
    left:0;
}

#access .menu ul li.second ul {
position: absolute;
left: 0;
height: auto;
display: none;
visibility: hidden;
width: 120px;
padding: 15px 15px 15px 15px;
text-align: left;
background:rgba(255,255,255, .97);
    margin-top:0px;
}

#access .menu ul li ul li ul {
top: 0;
border-radius:5px;
}

#access .menu ul li ul li a {
border: none;
display: block;
padding: 6px 0px 6px 0px;
font-size: 12px;
color: #999;
width:100%;
font-weight:normal;
text-align: left;
}