Baskar Kalyanasamy Baskar Kalyanasamy - 1 month ago 11
CSS Question

right side navigation menu in html

This is what am trying to replicate in html, the image is done using bootstrap I am trying to create a header in html, as keeping my logo on the left side of the header and navigation menu on the right side. In my navigation menu i need 4 links such as home, about us, product, contact us. In "about us" link i need a sub menu with three other links, such as mission, vision and services. Below the header i need to create something like jumbotron in bootstrap. Anyone Help me with the code.?
i may sound weird, i have done it using bootstrap so easily but i dont know what takes me more time to do it with raw html.

Here is the 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

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>

May be you can check this link:-http://www.codescratcher.com/bootstrap/jumbotron-in-bootstrap/

Comments