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

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

或者，你能告诉我任何其他方法来创建一个显示徽标的NAV栏。所以它就是LOGO和MENUS在同一条线上。

非常感谢提前。

Answer 1

使用普通的ul li结构。

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

Answer 2

我建议你使用工具。 CSSMENU，您可以在不编写代码的情况下创建菜单。如果需要，您还可以根据需要更改代码或添加图像。有一些内置图像，您也可以使用它们。

Answer 3

导航栏中有两列结构，一列用于徽标，另一列用于导航栏选项。

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

和用css给它们适当的宽度并使用填充或边距属性对齐它们

导航栏菜单故障排除

3 个答案: