| SitePoint Sponsor |
|
|
User Tag List
Results 1 to 2 of 2
-
Aug 26, 2009, 11:00 #1SitePoint Member
- Join Date
- Aug 2009
- Posts
- 1
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Two-level Vertical Navigation menu using CSS
Hi Guys,
I have spent last few days figure out how to make the 2-level vertical menu work using CSS with no success?
I want my main menu to display first and hide the submenus. A paricular submenu should be displayed when user hover over the corresponding main menu. Following is my html and CSS code.
Any idea and suggestions on this would be greatly appreciated. Thanks in Advance.
html code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>NavMenu</title>
<link href="navMenu.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<style type="text/css">
/*.navmenu li a{
padding: 6px 8px;
}*/
</style>
<![endif]-->
</head>
<body>
<div>
<ul class="navmenu">
<li><a href="index.html">Home</a></li>
<li><a href="indext.html">About Us</a>
<ul class="navmenu">
<li> <a href="index.html">Staff</a></li>
<li> <a href="index.html">Chart</a></li>
</ul>
</li>
<li><a href="index.html">Programs and Services</a>
<ul class="navmenu">
<li> <a href="index.html">Bookstore</a></li>
<li> <a href="index.html">Campus Escort</a></li>
</ul>
</li>
</ul>
</div>
<p> </p>
</body>
</html>
--------------------------------------------------------------------------
CSS code : navMenu.css:
--------------------------------------------------------------------------
.navmenu {
font-family: "Comic Sans MS", "Freestyle Script";
text-decoration: none;
display: block;
list-style-type: none;
}
.navmenu li {
display: block;
width: 211px;
height: 47px;
list-style-type: none;
padding: 0px;
}
.navmenu li a{
display: block;
float:none;
text-decoration: none;
font-family: "Comic Sans MS", "Freestyle Script";
background-image: url(images/menuimg1.jpg);
background-repeat: no-repeat;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 30px;
height: 44px;
width: 211px;
font-weight: normal;
color: #CCCCCC;
}
.navmenu li a:hover {
background-image: url(images/menuimg2.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
display: block;
height: 44px;
width: 211px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 30px;
}
.navmenu li: hover ul{
display:block;
}
.navmenu ul li ul{
display:none;
}
.navmenu ul li a: hover ul, .navmenu ul li:hover ul ,
.navmenu ul li a:hover ul ul{
display:block;
}
-
Aug 27, 2009, 23:52 #2SitePoint Enthusiast
- Join Date
- Apr 2009
- Location
- Manchester, UK
- Posts
- 38
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Google for one.
Bookmarks