HTML code for a menu bar

Menu bar requires html and css to make it look good. There is different ways of doing it. I went ahead and did a quick one for you. I did the ground code for you, the rest is simple... I'm not going to do it for you but I just create the basics for it. Good luck

CSS:

    #list li {
display: inline;
margin: 10px;
text-align: center;
   }

#list a {
text-decoration: none;
color: green;
}

#list {
background-color: black;
width:  300px;
height: 25px;
border-radius: 5px;
}

HTML:

< div id="list" >

< ul >

< li > < a href="#" > Menu1 < /a >< /li >

< li > < a href="#" > Menu2 < /a >< /li >

< li > < a href="#" > Menu3 < /a >< /li > 

< /ul >

< /div >

well, first you would be better to learn yourself how to write code and implement CSS to that code. Doing that will make you able to do it like its a second language to you instead of asking us to do it for you. I will start you off with it but you will have to style it yourself:

first you would start by making a div with an id of header: <div id="header></div>

inside that div you would sit a container for all the things you are putting into the nav so something like a header inner: <div class="header-inner"></div>

now the code would be like so:

<div id="header">
<div class="header-inner"></div>
</div>

after this you want to put the logo in so something like so:

<a class="home-link" href="https://teamtreehouse.com/dashboard">
<span class="logo"></span>
</a>

all of this would give you this code:

<div id="header">
<div class="header-inner">
<a class="home-link" href="https://teamtreehouse.com/dashboard"><span class="logo"></span></a>
</div>
</div>

now for the CSS for what we have done so far: the header:

#header {
background: none repeat scroll 0 0 #363E45;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
height: 56px;
position: fixed;
width: 100%;
z-index: 100;
}

the header-inner:

.header-inner:after {
clear: both;
content: "";
display: table;
}
.header-inner {
padding: 8px 10px 0;
position: relative;
}

the logo:

.logo {
background: url("https://wac.A8B5.edgecastcdn.net/80A8B5/static-assets/assets/logo-4510a0c634a1b5a5a038bdbee4272d78.png") no-repeat scroll 0 0 / 31px 68px transparent;
display: block;
height: 34px;
width: 31px;
}

now the last part of the logo:

.header-inner a {
color: #959B9D;
}

.home-link {
float: left;
margin: -8px 5px 0 -10px;
padding: 11px 15px;
}

i am not going to keep going with it as i will pretty much be doing it all for you but i'm sure f yu have a look in FireBug you will find it alot easier, never copy though, always look at a code yeah for reference on how it was done but edit the code and make it your own / better.

Good luck and happy coding :)