Share
ShareSidebar
adam_g
adam_g

+6
2011-09-24 02:42:52 +3

CSS Menu - Horizontal

CSS Menu

CSS Menu Horizontal

CSS

* { margin: 0px;
    padding: 0px; outline: 0;
}
html, body { width: 100%;}
body { background: #366;
       font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu {  text-align: center;
         font-size: 0.7em;
         width: 820px;
         margin: 20px auto;
}
#menu ul { list-style-type: none;}
#menu ul li.level1 { float: left;
                     width: 162px;
                     margin-right: 2px;
}
#menu ul li a {display: block;
               text-decoration: none;
               color: #fff;
               background-color: #399;
               border: solid 1px #fff;
               padding: 8px;
               position: relative;
}
#menu ul li:hover {position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.level1 {background-color: #6CC;
                                                 color: #000;
                                                 position: relative;
}
#menu ul li a.level1 {display: block!important;display: none;
                      position: relative;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
                                              position: absolute;left: 0px;
}
#menu ul li u* { margin: 0px;
                 padding: 0px; outline: 0;
}
html, body { width: 100%;}
body { background: #366;
       font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu {  text-align: center;
         font-size: 0.7em;
         width: 820px;
         margin: 20px auto;
}
#menu ul { list-style-type: none;}
#menu ul li.level1 { float: left;
                     width: 162px;
                     margin-right: 2px;
}
#menu ul li a {display: block;
               text-decoration: none;
               color: #fff;
               background-color: #399;
               border: solid 1px #fff;
               padding: 8px;
               position: relative;
}
#menu ul li:hover {position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.level1 {background-color: #6CC;
                                                 color: #000;
                                                 position: relative;
}
#menu ul li a.level1 {display: block!important;display: none;
                      position: relative;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
                                              position: absolute;left: 0px;
}
#menu ul li ul li a {width: 160px;
                     padding: 6px 0px 8px 0px;
                     border-top-color: #000;
}
#menu ul li ul li a:hover {border-top-color: #000;
                           position: relative;
}
table.false {border-collapse:collapse;
             border:0px;
             float: left;
             position: relative;
}l li a {width: 160px;
         padding: 6px 0px 8px 0px;
         border-top-color: #000;
}
#menu ul li ul li a:hover {border-top-color: #000;
                           position: relative;
}
table.false {border-collapse:collapse;
             border:0px;
             float: left;
             position: relative;
}

Page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
    <head>
        <title>Menu CSS</title>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" href="style.css" type="text/css" />
    </head>
    <body>
        <div id="menu">
            <ul>
                <li class="level1"><a href="http://www.sharemycode.com" class="level1">Option 1</a>
                    <!--[if lte IE 6]><a href="http://www.sharemycode.com" class="level1ie">Option 1<table class="false"><tr><td><![endif]-->
                    <ul>
                        <li><a href="#">Option 1.1</a></li>
                        <li><a href="#">Option 1.2</a></li>
                    </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <li class="level1"><a href="#" class="level1">Option 2</a>
                    <!--[if lte IE 6]><a href="#" class="level1ie">Option 2<table class="false"><tr><td><![endif]-->
                    <ul>
                        <li><a href="#">Option 2.1</a></li>
                        <li><a href="#">Option 2.2</a></li>
                        <li><a href="#">Option 2.3</a></li>
                        <li><a href="#">Option 2.4</a></li>
                        <li><a href="#">Option 2.5</a></li>
                    </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <li class="level1"><a href="#" class="level1">Option 3</a>
                    <!--[if lte IE 6]><a href="#" class="level1ie">Option 3<table class="false"><tr><td><![endif]-->
                    <ul>
                        <li><a href="#">Option 3.1</a></li>
                        <li><a href="#">Option 3.2</a></li>
                        <li><a href="#">Option 3.3</a></li>
                    </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <li class="level1"><a href="#" class="level1">Option 4</a>
                    <!--[if lte IE 6]><a href="#" class="level1ie">Option 4<table class="false"><tr><td><![endif]-->
                    <ul>
                        <li><a href="#">Option 4.1</a></li>
                        <li><a href="#">Option 4.2</a></li>
                        <li><a href="#">Option 4.3</a></li>
                        <li><a href="#">Option 4.4</a></li>
                    </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
            </ul>
        </div>
    </body>
</html>

CSS Menu 2

Menu 2

CSS

* { margin: 0px;
    padding: 0px; outline: 0;
}
html, body { width: 100%;}
body { background: #366;
       font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu {  text-align: center;
         font-size: 0.7em;
         width: 820px;
         margin: 20px auto;
         position: relative;
}
#menu ul { list-style-type: none;}
#menu ul li.level1 { float: left;
                     width: 162px;
                     margin-right: 2px;
                     position: relative;
}
#menu ul li { float: left;}
#menu ul li a {display: block;
               text-decoration: none;
               color: #fff;
               background-color: #399;
               border: solid 1px #fff;
               padding: 8px;
               position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.level1 {background-color: #6CC;
                                                 color: #000;
                                                 position: relative;
                                                 border-bottom: solid 1px #6CC;
}
#menu ul li a.level1 {display: block!important;display: none;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
                                              position: absolute;width: 816px;border: solid 1px #fff;border-top: none;background-color: #6CC;
}
#menu ul li ul li a {width: 160px;
                     padding: 6px 0px 8px 0px;
                     border: none;
                     background-color: #6CC;
}
#menu ul li ul li a:hover {
    position: relative;
    text-decoration: underline;
    border-bottom: none;
}
table.false {border-collapse:collapse;
             border:0px;
             float: left;
             position: relative;
}
ul.one {left: -0px;}
ul.two {left: -164px;}
ul.three {left: -328px;}
ul.four {left: -492px;}
ul.five {left: -656px;}

Page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
    <head>
        <title>Menu CSS</title>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" href="style.css" type="text/css" />
    </head>
    <body>
        <div id="menu">
            <ul>
                <li class="level1"><a href="http://www.sharemycde.com" class="level1">Option 1</a>
                    <!--[if lte IE 6]><a href="http://www.sharemycode.com" class="level1ie">Option 1<table class="false"><tr><td><![endif]-->
                    <ul class="one">
                        <li><a href="#">Option 1.1</a></li>
                        <li><a href="#">Option 1.2</a></li>
                    </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <li class="level1"><a href="#" class="level1">Option 2</a>
                    <!--[if lte IE 6]><a href="#" class="level1ie">Option 2<table class="false"><tr><td><![endif]-->
                    <ul class="two">
                        <li><a href="#">Option 2.1</a></li>
                        <li><a href="http://www.sharemycode.com">Option 2.2</a></li>
                        <li><a href="#">Option 2.3</a></li>
                        <li><a href="#">Option 2.4</a></li>
                        <li><a href="#">Option 2.5</a></li>
                    </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <li class="level1"><a href="#" class="level1">Option 3</a>
                    <!--[if lte IE 6]><a href="#" class="level1ie">Option 3<table class="false"><tr><td><![endif]-->
                    <ul class="three">
                        <li><a href="#"></a></li>
                        <li><a href="#">Option 3.1</a></li>
                        <li><a href="#">Option 3.2</a></li>
                        <li><a href="#">Option 3.3</a></li>
                    </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <li class="level1"><a href="#" class="level1">Option 4</a>
                    <!--[if lte IE 6]><a href="#" class="level1ie">Option 4<table class="false"><tr><td><![endif]-->
                    <ul class="four">
                        <li><a href="#"></a></li>
                        <li><a href="#">Option 4.1</a></li>
                        <li><a href="#">Option 4.2</a></li>
                        <li><a href="#">Option 4.3</a></li>
                        <li><a href="#">Option 4.4</a></li>
                    </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <li class="level1"><a href="#" class="level1">Option 5</a>
                    <!--[if lte IE 6]><a href="#" class="level1ie">Option 5<table class="false"><tr><td><![endif]-->
                    <ul class="five">
                        <li><a href="#"></a></li>
                        <li><a href="#"></a></li>
                        <li><a href="#">Option 5.1</a></li>
                        <li><a href="#">Option 5.2</a></li>
                        <li><a href="#">Option 5.3</a></li>
                    </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
            </ul>
        </div>
    </body>
</html>

Rate this post

You must be registered to vote first

Comments

Comment