So I wanted to create the fixed nav bar on top of the page. Instead of creating nav bar with ordered list, I used the following approach:

<header>
    <div class="nav">
            <img src="images/logo_ab.png" alt="AurinBioTech Logo"/>
             <a href="index.html">Home</a>    
             <a href="#">About</a>    
             <a href="#">Team</a>    
             <a href="#">Science</a>      
             <a href="#">Need</a>     
             <a href="#">Pipeline</a>     
             <a href="#">Contact</a>     

     </div>
</header>

CSS:

header .nav {
    margin-top:100px;
    width:100%;
    height:10%;
    text-align:center;
    padding-top:2%;
    margin:0 auto;
    position:fixed;
    top:0;



}

header .nav a {
    font-size: 2em;
    padding-left: 15px;
    padding-right: 15px;
    color:rgb(1, 1, 1);
    text-decoration: none;
    font-family: 'Bebas';
}

header .nav a:hover  {
    color:white;
    background-color: #404040;
    border-radius:5px;
    padding:0 auto;
}

header .nav a:active{
    background-color: #404040;
    border-radius:5px;
    text-decoration:overline;
}

header .nav img {
    width:260px;
    height:65px;
    padding-right:4em;
}

The reason I used this approach is because I wanted to use logo image next to the nav bar so it would align properly in the same line. Now the problem is that I need to add sub-menus under Science and Pipeline heading. Since I didn't use UL or LI, how can I add sub-menus under those heading.

OR, can you tell me any other way to create a NAV bar that shows the logo as well. so it would be LOGO and MENUS on the same line.

Great thanks in advance.