Question

This is what am trying to replicate in html, the image is done using bootstrap 我正在尝试在html中创建标题，因为在标题左侧保留徽标 导航菜单右侧。在我的导航菜单中，我需要4个链接，如家，关于我们，产品，联系我们。在＆＃34;关于我们＆＃34;链接我需要一个子菜单与其他三个链接，如任务，愿景和服务。在标题下面我需要在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>

您可以查看以下链接： - http://www.codescratcher.com/bootstrap/jumbotron-in-bootstrap/

html中的右侧导航菜单

1 个答案: