HTML

Question

This is what am trying to replicate in html, the image is done using bootstrap에서 오른쪽 탐색 메뉴가 나는 오른쪽에 머리글과 탐색 메뉴의 왼쪽 내 로고를 유지하면, 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; 
} 

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>

입니다

이 링크를 확인하실 수 있습니다 될 수있다 - .. 원시 HTML과 CSS 코드를 추가 http://www.codescratcher.com/bootstrap/jumbotron-in-bootstrap/