html - 导航栏菜单故障排除

Question

所以我想在页面顶部创建固定的导航栏。我没有使用有序列表创建导航栏，而是使用了以下方法:

<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;
}

我使用这种方法的原因是因为我想在导航栏旁边使用 Logo 图像，以便它可以在同一行中正确对齐。现在的问题是我需要在科学和管道标题下添加子菜单。由于我没有使用 UL 或 LI，我该如何在这些标题下添加子菜单。

或者，您能否告诉我创建同时显示 Logo 的导航栏的任何其他方法。 所以它会是同一行上的 Logo 和菜单。

提前致谢。

Answer 1

使用普通的 ul li 结构。

如果您将顶级 li 标签的高度和行高设置为等于图像的高度，它会将文本对齐到图像的中心。