SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint 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>&nbsp;</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;
    }

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    Manchester, UK
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Google for one.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •