导航栏菜单疑难解答答案

【问题标题】：Navbar Menu Trouble shoot导航栏菜单疑难解答
【发布时间】：2014-06-03 04:47:35
【问题描述】：

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

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

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

或者，你能告诉我任何其他方法来创建一个显示徽标的 NAV 栏吗？所以 LOGO 和 MENUS 在同一行。

提前非常感谢。

【问题讨论】：

标签： html css menu navbar submenu

【解决方案1】：

使用普通的ul li 结构。

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

【讨论】：

【解决方案2】：

我可以建议你使用一个工具。 CSSMENU，您无需编写代码即可创建菜单。如果需要，您还可以根据需要更改代码或添加图像。您也可以使用一些内置图像。

【讨论】：

能否分享CSSMENU的网站或链接，不胜感激
@Nabeel M : \css3menu.com 输入您的邮件 ID，然后您可以下载 mac/windows 的免费版本或高级版。付费版有很多功能。我建议Premium。

【解决方案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 为它们提供适当的宽度并使用填充或边距属性对齐它们

【讨论】：