html 中的右侧导航菜单

Question

This is what am trying to replicate in html, the image is done using bootstrap 我正在尝试 在 html 中创建一个 header，因为我的 徽标位于左侧header 的侧 和右侧导航菜单。在我的导航菜单中，我需要 4 link，例如主页、关于我们、产品、联系我们。在 "about us" link 中，我需要一个包含其他三个 link 的子菜单，例如任务、愿景和服务。在 header 下面，我需要在 bootstrap 中创建类似 jumbotron 的东西。任何人帮助我的代码。？我可能听起来很奇怪，我已经很容易地使用 bootstrap 完成了，但我不知道是什么让我花了更多时间来使用原始 html.

这是HTML

<nav> <img id="logo" src="images/google_logo.png" alt="google logo">
  <ul>
    <li><a href="#">Home</a></li>
    <li class="sub"><a href="#">About Us</a>
      <ul>
        <li><a href="#">Mission</a>
          <li><a href="#">Vision</a>
            <li><a href="#">Services</a> </ul>
      </li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

body {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue",Helvetica,Arial, sans-serif;
}

#logo {
    width: 130px;
    height: 55px;
    margin: 5px 0 0 70px;
}

.header {
    margin-bottom: 0;
}

nav {
    width: 100%;
    min-height: 60px;
    background-color: #222;
    border-color: #080808;
}

nav ul {
    list-style-type: none;
    margin: 8px 0 0 0;
    padding: 0;
    vertical-align: middle;
    float: right;
}

nav ul li {
    margin: 0;
    display: inline-block;
    float: left;
    list-style-type: none;
}

nav > ul > li > a {
    color: #fff;
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
}

nav > ul > li > a:hover {
    background-color: #eee;
    color: #000;
    text-align: center;
}

nav li > ul{
    display : none;
    margin-top:1px;
    background-color: #fff;
    color: #fff;
    text-align: center;
}

nav  li > ul li a {
    color: #fff;
    display: inline-block;
    margin: 10px;
    text-align: center;
    padding: 10px;
    text-decoration: none;
}

nav  li > ul li a:hover {
    background-color: #eee;
    color: #000;
    text-align: center;
}

nav li:hover > ul{
    position: absolute;
    width: 130px;
    display : inline-block;
    background-color: #000;
    text-align: center;
}

Answer 1

ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul li {
    display: block;
    position: relative;
    float: left;
}
li ul {
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #2C5463;
    margin-left: 1px;
    white-space: nowrap;
}
ul li a:hover {
    background: #617F8A;
}
li:hover ul {
    display: block;
    position: absolute;
}
li:hover li {
    float: none;
    font-size: 11px;
}
li:hover a {
    background: #617F8A;
}
li:hover li a:hover {
    background: #95A9B1;
}

#menu {
    position: absolute;
    top: 50px;
    right: 0px;
}

 <ul id="menu">
    <li><a href="">Home</a>
    </li>
    <li><a href="">About Us</a> 
        <ul>
            <li><a href="">Mission</a>
            </li>
            <li><a href="">Vision</a>
            </li>
            <li><a href="">Services</a>
            </li>
        </ul>
    </li>
    <li><a href="">Products</a></li>
    <li><a href="">Contact</a> </li>

也许你可以检查这个link:-http://www.codescratcher.com/bootstrap/jumbotron-in-bootstrap/

html 中的右侧导航菜单

right side navigation menu in html

html

css

navbar

navigationbar