CSS menu

Discussion in 'Web Design' started by ellena3321, Jan 31, 2013.

  1. ellena3321

    ellena3321 Newbie

    Joined:
    Jan 28, 2013
    Messages:
    2
    Likes Received:
    0
    Hi,
    Any one can tell me the CSS for vertical menu.
     
  2. atnvisions

    atnvisions Newbie

    Joined:
    May 6, 2012
    Messages:
    29
    Likes Received:
    5
    Gender:
    Male
    Occupation:
    MediaBuyer
    Home Page:
    Hey,

    depends on your code.
    You can check some great examples while searching on google ;)

    Also CSS can be different in case that a navigation should be reponsive.

    Just an example for a vertical navigation

    #subnav {
    background:url(../images/subnav.png);
    background-repeat:no-repeat;
    height:298px;
    width:300px;
    position:absolute;
    z-index:3;
    font-size:0.8em;
    }
    #subnav ul {
    list-style:none;
    margin:0px;
    padding:0px;
    padding-left:10px;
    padding-top:10px;
    }
    #subnav ul li {
    margin:0px;
    padding:0px;
    }
    #subnav ul li a {
    background-image:url(../images/li.png);
    background-position:left center;
    background-repeat:no-repeat;
    padding-left:25px;
    color:white;
    text-decoration:none;
    display:block;
    margin-right:26px;
    padding-top:5px;
    padding-bottom:5px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    }
    #subnav ul li a:hover {
    background-image:url(../images/li.png);
    background-color:#7e0043;
    background-position:left center;
    background-repeat:no-repeat;
    padding-left:25px;
    color:white;
    text-decoration:none;
    }

    the html should look like this:

    <div id="subnav">
    <ul>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    </ul>
    </div>