Question

我是html编码的新手。我目前正在尝试向标题添加下拉菜单。我曾尝试从导航栏复制和粘贴下拉菜单，但没有成功。我将不胜感激！

我尝试仅使用带有下拉菜单和徽标的导航栏，该导航栏可以正常工作，但是我将其添加到云层中，并且它们特别需要标题。

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Oswald:300'     rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-    scale=1">
<style>
* {box-sizing: border-box;}

body { 
  margin: 0;
  font-family: Arial, sans-serif;
}

.header {
  overflow: hidden;
  background-color: #474747;
  padding: 0px 20px;
  font-family: Oswald, sans-serif;
}

.header a {
   float: left;
   color: white;
   text-align: center;
   padding: 12px; 
   text-decoration: none; 
   font-size: 16px; 
   line-height: 2px; 
   border-radius: 4px;
   font-weight: bold;
}

.header a.logo {
   font-size: 20px;
   font-weight: bold;
 }

.header a.active {
   background-color: #8dc0b0;
   color: #ffff;
 }

.header-right {
   float: right;
   padding: 30px 15px;
 }

@media screen and (max-width: 500px) {
.header a {
   float: none;
   display: block;
   text-align: left;
}

 .header-right {
   float: none; 
   text-align: center;
 }
 }
</style>
</head>
<body>

<div class="header">
  <a href="https://www.thejunglelodge.com">
     <img alt="Qries" src="https://static.wixstatic.com/media/34d39e_3c8cc1e385214a6c9cca31b9ae919d3c~mv2_d_2940_2103_s_2.png/v1/fill/w_150,h_108,al_c,q_80,usm_0.66_1.00_0.01/La%20Loma%20White%20Logo.webp"
     width=85" height="60">
     </a> 
   <div class="header-right">
    <a href="https://www.thejunglelodge.com/stay">STAY</a>
    <a href="https://www.thejunglelodge.com/reservations">PLAN 
  YOUR VISIT</a>
<a href="https://www.thejunglelodge.com/chocolate">FARM & CHOCOLATE</a>
<a href="https://www.thejunglelodge.com/community">COMMUNITY</a>
<a href="https://www.thejunglelodge.com/la-loma-2020">ABOUT</a>
<a href="https://www.thejunglelodge.com/reservations">BOOK NOW</a> 
</div>
</div> 

</body>
</html>

我正在尝试用这样的徽标和下拉菜单重新创建标题： https://www.thejunglelodge.com/ 目前，我尚未实现下拉菜单。

Answer 1

在引导程序中，您可以使用以下代码：

<body>
<div class="wrapper">

    <header class="main-header">
        <a href="#" class="logo">          
            <span class="logo-lg"><b>Mjz</b> CO</span>
        </a>
                <!-- Logo -->        

        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
                <span class="sr-only">Toggle</span>
            </a>
            <!-- Navbar left Menu -->
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    <!-- Messages: style can be found in dropdown.less-->
                    <li class="dropdown messages-menu">
                        <a style="cursor: pointer;margin-right: 30px" onclick="..." class="navbar-brand">
                            <table>
                                <tbody>
                                <tr>
                                    <td style="font-size: 19px; padding-right: 5px; padding-left: 5px"><i class="fa fa-globe"> Domains:
                                        Multiple                                </i></td>
                                </tr>
                                </tbody>
                            </table>
                        </a>
                    </li>                         
                </ul>
            </div>               
    </header>

根据需要更改参数

如何将下拉菜单添加到标题导航栏？

1 个答案: