Navbar Menu Trouble shoot - html

Question

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"/>
Home
About
Team
Science
Need
Pipeline
Contact
</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.

Answer 1

Use the normal ul li structure.
If you set the height and line-height of top level li tags to be equal to the height of the image it will align the text to the center of the image.

Answer 2

I can suggest you to use a tool.
CSSMENU where you can create a menu without writing the code.You can also change the code or add images as your wish if needed. There are some inbuilt images where you can use them too.

Answer 3

have a two column structure in your nav bar one column for the logo and other for the nav-bar options.
<header>
<div class="nav">
<img src="images/logo_ab.png" alt="AurinBioTech Logo"/>
</div>
<div class="options">
<ul>
<li>Home</li>
<li>About</li>
<li>Team</li>
<li>Science</li>
<li>Need</li>
<li>Pipeline</li>
<li>Contact</li>
</ul>
</div>
</header>
and
with css give them appropriate width and align them using padding or margin properties