1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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
    Home Page:
    Hi,
    Any one can tell me the CSS for vertical menu.
     
  2. atnvisions

    atnvisions Newbie

    Joined:
    May 6, 2012
    Messages:
    9
    Likes Received:
    0
    Occupation:
    MediaBuyer
    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>