Menu-Bar Style in CSS

Introduction

In this article you will learn how to insert an image in a list and anchor tag, like: <a href="#">

In this article I used the following images:


homeBg.png

home_hover.png 

vertical.png

verticalBg.png

If you want a reversed image then you need to use:

  #menu ul li ul li ul {

            display: none !important;

            right: 195px;

            top: 0px;

            position: absolute;

            margin-right: 13px;

}

  #menu ul li ul li.vertical a {

            background: url(verticald.png) no-repeat!important;

            margin-right: -13px;

        }

    #menu ul li ul li.vertical:hover a {

            background: url(vertic.jpg) no-repeat!important;

        }

vertic.jpg

verticald.jpg

The full code is given below.

<!DOCTYPE html>

<html>

<head>

    <title>style</title>

    <style>

        * {

            margin: 0px;

            padding: 0px;

        }

 

        body {

            font-family: Arial, Helvetica, sans-serif;

            font-size: 18px;

            font-weight: lighter;

            text-transform: capitalize;

            color: #fff;

        }

 

        #main {

            width: 100%;

            margin: 0px auto;

            height: 600px;

        }

         #menubox {

            margin-top: 15px;

            height: 50px;

            background: #666666;

            width: 100%;

        }

         #menu {

            margin: 0px auto;

            width: 70%;

        }

             #menu ul {

                list-style: none;

            }

                 #menu ul li {

                    float: left;

                    position: relative;

                }

                     #menu ul li a {

                        text-decoration: none;

                        display: block;

                        padding: 14px 50px 14px 50px;

                        background: #3300CC;

                        color: #FFFFFF;

                    }

                         #menu ul li a:hover {

                            background: #003366;

                        }

                     #menu ul li ul {

                        position: absolute;

                        display: none;

                        top: 27px;

                        width: 200px;

                    }

                         #menu ul li ul li {

                            position: relative;

                            float: none;

                        }

                     #menu ul li.home a {

                        background: url(homeBg.png)left top no-repeat !important;

                        padding: 14px 10px;

                        margin-top: 12px;

                        height: 34px;

                        width: 180px;

                        display: block;

                    }

                     #menu ul li ul li a {

                        border-bottom: 1px solid #666666;

                        background: #b2a9b0;

                        padding: 14px 10px;

                    }

                     #menu ul li:hover ul {

                        display: block;

                    }

                     #menu ul li.home:hover a {

                        background: url(home_hover.png) left top no-repeat !important;

                    }

                 #menu ul li ul li ul {

            display: none !important;

            left: 195px;

            top: 0px;

            position: absolute;

            margin-left: 13px;

        }

             #menu ul li ul li ul li {

                position: relative;

            }

                #menu ul li ul li ul li a

              }

        #menu ul li ul li.vertical a {

            background: url(verticalBg.png) no-repeat!important;

            margin-left: -13px;

        }

        #menu ul li ul li:hover ul {

            display: block !important;

         }

        #menu ul li ul li.vertical:hover a {

            background: url(vertical.png) no-repeat!important;

        }

        #menu ul li ul li ul li ul {

            visibility: hidden;

            position: absolute;

            left: 195px;

        }

         #menu ul li ul li ul li:hover ul {

            visibility: visible;

        }

    </style>

</head>

<body>

    <div id="main">

        <div id="menubox">

            <div id="menu">

                <ul>

                    <li><a href="#">home</a></li>

                    <li><a href="#">aboutUs</a>

                        <ul>

                            <li class="home"><a href="#" class="home">design</a></li>

                            <li><a href="#">home</a>

                                <ul>

                                    <li class="vertical"><a href="#">split</a></li>

                                    <li><a href="#">commands</a></li>

                                    <li><a href="#">window</a></li>

                                    <li><a href="#">edit</a>

                                        <ul>

                                            <li class="vertical"><a href="#">home</a></li>

                                            <li><a href="#">Modify</a></li>

                                            <li><a href="#">text</a></li>

                                            <li><a href="#">insert</a></li>

                                        </ul>

                                    </li>

                                </ul>

                            </li>

                            <li><a href="#">css</a></li>

                            <li><a href="#">home</a></li>

                        </ul>

                    </li>

                    <li><a href="#">service</a></li>

                    <li><a href="#">application</a>

                        <ul>

                            <li class="home"><a href="#" class="home">common</a></li>

                            <li><a href="#">home</a>

                                <ul>

                                    <li class="vertical"><a href="#">winsow</a></li>

                                    <li><a href="#">files </a></li>

                                    <li><a href="#">snippers</a></li>

                                    <li><a href="#">network</a>

                                    </li>

                                </ul>

                            </li>

                            <li><a href="#">site</a></li>

                            <li><a href="#">view</a>

                            </li>

                        </ul>

                    </li>

                    <li><a href="#">company</a></li>

                    <li><a href="#">contect us</a>

                    </li>

                </ul>

            </div>

        </div> 

 </div>

</body>

</html>


Output

Clipboard01.jpg

 

 

Up Next
    Ebook Download
    View all
    Learn
    View all