Home HTML and CSS Tutorials CSS Menu Style 1

CSS Menu Style 1

Author: Nick La More by this author

Added: Apr 03, 2006 Rating:

Level: Experienced Software: Dreamweaver

Style 2

Source Code

<div id = "style2">
<h1>My Site:</h1>
<ul>
<li><a href="/img_articles/7919/#">Home</a></li>
<li><a href="/img_articles/7919/#">About</a></li>
<li><a href="/img_articles/7919/#">Contact</a></li>
</ul> </div>

<div class = "content_box2">
Style 2 Content Box </div>

Final Result

style 2

Click here to view live demo

CSS for #style2

#style2 {
font-family: Arial;
}

font = Arial

CSS for H1

#style2 h1 {
font-size: 16px;
font-weight: bold;
background-color: #FF6600;
width: 120px;
padding: 5px;
float: left;
border-top: 1px solid #FF6600;
border-right: 1px solid #BB4A00;
border-bottom: 1px solid #FF6600;
border-left: 1px solid #FF6600;
margin: 10px 0px 0px 0px; }

font size = 16px
bold font
background = #FF6600
width = 120px
padding(around) 5px
set H1 float(align) to left
1px border-top #FF6600
1px border-right #BB4A00
1px border-bottom #FF6600
margin: top=10, right=0, bottom=0, left=0

CSS for UL

#style2 ul {
margin: 0px;
padding: 0px;
list-style: none;
float: left;
clear: left; }

margin = 0
padding = 0
no list style
float left
clear left float of H1 tag

CSS for LI

#style2 li {
width: 130px;
font-size: 14px;
font-weight: bold;
background-color: #FF9900;
border-right: 1px solid #DF5900;
border-bottom: 1px solid #FF6600;
border-left: 1px solid #FF6600; }

width = 130
font-size = 14
bold font
background = #FF9900
border-right 1xp
border-bottom 1px
border-left 1px

CSS for link

#style2 li a {
width: 120px;
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 5px; }

width = 120
font color = white
no underline
display as block
padding around = 5

CSS for visited link

#style1 li a:visited {
color: #FFFFFF;
text-decoration: none; }

font color = white
no underline

CSS for hover link

#style2 li a:hover {
color: #000000;
text-decoration: none;
background-color: #FFCC33; }

font color = black
no underline
background = #FFCC33

CSS for content box

.content_box2 {
width: 586px;
font-family: Arial;
font-size: 11px;
background-color: #FFFF91;
border: 1px solid #FF6600;
padding: 15px;
float: left; }