Simple css header menu Free website plugin

Simple css header menu

Date: 25 October 2013 posted by : Admin on photography, Artistic, Beauty and Art 2 Comments

Click Download File Click View Demo File

Simple C S S horizontal menu , it is very easy to use! c s s and h t m l are needed in this menu. minimum 5 category menu will be created. only some c s s code. mainly simple menu and drop down Simple C S S horizontal menu , it is very easy to use! c s s and h t m l are needed in this menu. minimum 5 category menu will be created. only some c s s code. mainly simple menu and drop down Simple C S S horizontal menu , it is very easy to use! c s s and h t m l are needed in this menu. minimum 5 category menu will be created. only some c s s code. mainly simple menu and drop down

H T M L

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
        <ul>
            <li><a href="#">About Us</a></li>
            <li><a href="#">About Them</a></li>
            <li><a href="#">About You</a>
                <ul>
                    <li><a href="#">More About Us</a></li>
                    <li><a href="#">More About Them</a></li>
                    <li><a href="#">More About You</a></li>                     
                </ul>
            </li>                       
        </ul>
    </li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a>
        <ul>
            <li><a href="#">International</a></li>
            <li><a href="#">Corporate</a>
                <ul>
                    <li><a href="#">International</a></li>
                    <li><a href="#">Corporate</a></li>
                    <li><a href="#">American Offices</a></li>
                </ul>
            </li>
            <li><a href="#">American Offices</a></li>                       
        </ul>
    </li>   
    <li><a href="#">Mission Statement</a></li>      
</ul>

C S S

         
#nav {
    background: #e5e5e5;
    float: left;
    margin: 0;
    padding: 0;
}
 
#nav li a, #nav li {
    float: left;
}
 
#nav li {
    list-style: none;
    position: relative;
}
 
#nav li a {
    padding: 1em 2em;
    text-decoration: none;
    color: white;
    background: #292929;
    background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
    background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
    border-right: 1px solid #3c3c3c;
    border-left: 1px solid #292929;
    border-bottom: 1px solid #232323;
    border-top: 1px solid #545454;
}
 
#nav li a:hover {
    background: #2a0d65;
    background: -moz-linear-gradient(top, #11032e, #2a0d65);
    background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}
 
 
/* Submenu */
 
.hasChildren {
    position: absolute;
    width: 5px;
    height: 5px;
    background: black;
    right: 0;
    bottom: 0;
}
 
#nav li ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    padding: 0;
    margin: 0;
}
 
#nav li:hover > ul {
    display: block;
}
 
#nav li ul li, #nav li ul li a {
    float: none;
}
 
#nav li ul li {
    _display: inline;
 /* for IE6 */;
}
 
#nav li ul li a {
    width: 150px;
    display: block;
}
 
/* SUBSUB Menu */
 
#nav li ul li ul {
    display: none;
}
 
#nav li ul li:hover ul {
    left: 100%;
    top: 0;
}
    

Lorem ipsum dolor sit amet, verenam operibus furiam conclusoque sponte profundo. Conservus mihi esse haec aliquam inlido laetare quod eam ad per. Antiochia videns quia quod non ait est Apollonius non dum animae tertio eam ad te princeps ea docentur Hellenicus ut diem finito convocatis secessit civitatis civium takimata.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis nibh odio. Morbi ipsum turpis, rutrum et dapibus eget, cursus imperdiet orci. Nam nisl nunc, aliquet et porta at, adipiscing vitae sapien. Fusce congue facilisis pulvinar. In vitae lacus ac neque scelerisque vehicula. Quisque sodales, lectus non dignissim egestas, est nulla pretium eros, sed tincidunt massa velit eget lectus. Sed lectus enim, suscipit ut ultrices non, adipiscing quis odio. Cras sodales molestie tellus sit amet convallis. Mauris sed leo orci. Nullam facilisis auctor fringilla. Quisque eget est enim, blandit vestibulum magna. Suspendisse nec leo felis.

Tags: html ◊ css ◊ Design

Comments

28 October 2015, Afternoon 12:00

mehedi 28 October 2015, Afternoon 12:00

Its Help For me thank You! . . .