html中的右侧导航菜单

我试图在html中创建一个标题，将我的徽标保持在标题的左侧，而导航菜单保持在右侧。在我的导航菜单中，我需要4个链接，如主页、关于我们、产品、联系我们。在“关于我们”链接中，我需要一个包含其他三个链接的子菜单，如任务、愿景和服务。在标题下面，我需要在引导中创建类似jumbotron的东西。有人帮我查一下密码吗。？ 我可能听起来很奇怪，我已经很容易用引导程序完成了，但是我不知道用原始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;
}

身体{
保证金：0；
填充：0；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
}
#标志{
宽度：130px；
高度：55px；
利润率：5px070px；
}
.标题{
页边距底部：0；
}
导航{
宽度：100%；
最小高度：60px；
背景色：#222；
边框颜色：#080808；
}
导航ul{
列表样式类型：无；
利润率：8px0；
填充：0；
垂直对齐：中间对齐；
浮动：对；
}
李国荣{
保证金：0；
显示：内联块；
浮动：左；
列表样式类型：无；
}
导航>ul>li>a{
颜色：#fff；
显示：内联块；
填充：10px 20px；
文字装饰：无；
}
导航>超视距>视距>a:悬停{
背景色：#eee；
颜色：#000；
文本对齐：居中；
}
nav li>ul{
显示：无；
页边顶部：1px；
背景色：#fff；
颜色：#fff；
文本对齐：居中；
}
nav li>ul li a{
颜色：#fff；
显示：内联块；
利润率：10px；
文本对齐：居中；
填充：10px；
文字装饰：无；
}
导航李>ul李a：悬停{
背景色：#eee；
颜色：#000；
文本对齐：居中；
}
导航李：悬停>ul{
位置：绝对位置；
宽度：130px；
显示：内联块；
背景色：#000；
文本对齐：居中；
}

ul{
字体系列：Arial，Verdana；
字体大小：14px；
保证金：0；
填充：0；
列表样式：无；
}
ulli{
显示：块；
位置：相对位置；
浮动：左；
}
李乌尔{
显示：无；
}
ullia{
显示：块；
文字装饰：无；
颜色：#ffffff；
边框顶部：1px实心#ffffff；
填充：5px15px 5px 15px；
背景：#2C5463；
左边距：1px；
空白：nowrap；
}
悬停{
背景#617F8A；
}
李：悬停{
显示：块；
位置：绝对位置；
}
李：停下来，李{
浮动：无；
字体大小：11px；
}
李：停一停{
背景#617F8A；
}
李：悬停李a：悬停{
背景#95A9B1；
}
#菜单{
位置：绝对位置；
顶部：50px；
右：0px；
}

ul{
字体系列：Arial，Verdana；
字体大小：14px；
保证金：0；
填充：0；
列表样式：无；
}
ulli{
显示：块；
位置：相对位置；
浮动：左；
}
李乌尔{
显示：无；
}
ullia{
显示：块；
文字装饰：无；
颜色：#ffffff；
边框顶部：1px实心#ffffff；
填充：5px15px 5px 15px；
背景：#2C5463；
左边距：1px；
空白：nowrap；
}
悬停{
背景#617F8A；
}
李：悬停{
显示：块；
位置：绝对位置；
}
李：停下来，李{
浮动：无；
字体大小：11px；
}
李：停一停{
背景#617F8A；
}
李：悬停李a：悬停{
背景#95A9B1；
}
#菜单{
位置：绝对位置；
顶部：50px；
右：0px；
}

添加原始HTML和CSS代码。。因此，我们可以帮助您编辑您的问题，并添加您为导航栏编写的原始html css。这是html。css在哪里？现在您可以编辑您的问题了。同时也能找到你的答案快乐地编码：）好运气，我能去掉负号吗？？我不给你分数！！！添加原始HTML和CSS代码。。因此，我们可以帮助您编辑您的问题，并添加您为导航栏编写的原始html css。这是html。css在哪里？现在您可以编辑您的问题了。同时也能找到你的答案快乐地编码：）好运气，我能去掉负号吗？？我不给你分数！！！老兄，你能检查一下添加的图像吗？请你检查一下添加的图片好吗？并根据