Introduction:
25/02/17: We can make drop down menu by coding. For this insert the menu code inside of div ><. We can use spray menu bar by using Dreamweaver e.g. Horizontal / Vertical.
Please use .ul and li for horizontal menu bar.
ul - le for sub item
16px = 1em
CSS Code:
@charset "utf-8";/* CSS Document */
#menu{
height:40px;
margin:0px auto;
width: 500px;
text-align:center;
font-weight:05px;
background-color:#333;
}
#menu a{
color: #EEEEEE;
font-size: 15px;
font-weight: bold; line-height:40px;
padding: 8px 16px;
text-decoration: none;
}
#menu a:hover{
background-color:#069;
text-decoration:underline;}
HTML Code:
<!DOCTYPE html>
<head>
<title>Untitled Document</title>
<link href="Untitled-2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu" >
<a href="home.html">Home</a>
<a href="About.html">About Us</a>
<a href="Services.html">Services</a>
<a href="Partners.html">FAQ</a>
<a href="Contact.html">Contact Us</a>
</div><!-- #menu -->
</body>
</html>
Result of Above CSS and HTML Code:
HTML Code:
<!DOCTYPE html>
<head>
<title>basic style</title>
<link rel="stylesheet" type="text/css" href="style1.css" />
</head>
<body>
<!-- #Menu Start-->
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">About Me</a></li>
<li><a href="#">About CEO</a></li>
</ul>
</li>
<li><a href="#">Project</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</body>
</html>
CSS Code:
@charset "utf-8";
/* CSS Document */
body {
background-color:#FFFFFF;
color:#666666;
font-size:12px;
font-family:Geneva, Arial, Helvetica, sans-serif;
margin:0px;
}
#menu{
padding:0px;
margin:0px;
}
#menu ul{
padding:0px;
margin:0px;
line-height:30px;
}
#menu li{
list-style:none;
float:left;
padding:0px;
margin:0px;
position:relative;
background-color:#0FF;
}
#menu a{
color:#000;
font-size:12px;
text-decoration:none;
border:1px solid #F00;
display:block;
text-align:center;
width:140px;
}
#menu a:hover{
background-color:#00F;
color:#FFF;
}
#menu ul ul{
visibility:hidden;
position:absolute;
top:32px;
}
#menu ul li:hover ul{
visibility:visible;
}
/* CSS Document */
body {
background-color:#FFFFFF;
color:#666666;
font-size:12px;
font-family:Geneva, Arial, Helvetica, sans-serif;
margin:0px;
}
#menu{
padding:0px;
margin:0px;
}
#menu ul{
padding:0px;
margin:0px;
line-height:30px;
}
#menu li{
list-style:none;
float:left;
padding:0px;
margin:0px;
position:relative;
background-color:#0FF;
}
#menu a{
color:#000;
font-size:12px;
text-decoration:none;
border:1px solid #F00;
display:block;
text-align:center;
width:140px;
}
#menu a:hover{
background-color:#00F;
color:#FFF;
}
#menu ul ul{
visibility:hidden;
position:absolute;
top:32px;
}
#menu ul li:hover ul{
visibility:visible;
}
Result of Above HTML and CSS Code:
Spry Menu HTML Code:
Spry Menu CSS Code:
@charset "utf-8";
/* CSS Document */
body
{ background-color:#999; margin:0px;
}
.main_layout
{width:900px; height:900px; margin:0px auto; background-color:#333;
}
.header_area
{width:900px; height:150px; margin:0px; background-color: #036; float:left;
}
.nav_area
{width:900px; height:35px; margin:0px ; background-color: #FFF; float:left;
}
0 Komentar untuk "CSS Programming for Wordpress Website Part5"