CODEWITHSUNDEEP
htmlcss
sonya
sonya

Reputation: 183

How can I create a horizontal HTML menu with a vertical submenu using CSS only?

I want to design a Horizontal menu and onMouseover I want a vertical submenu to appear. I surfed a lot and found out some codes ,but when I execute, in almost all the codes I get the Horizontal menu properly but the submenus dont get displayed at all.

i am programming using ActivePerl 5.12 on Windows.

I am using IE7 for display, is that the reason why am not getting the proper result? Please do help me find the solution. Thank you.

Here's the piece of code which i was trying to execute..

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body {
        font-family: "Trebuchet MS", Helvetica, Sans-Serif;
        font-size: 14px;
    }

    a {
        text-decoration: none;
        color: #838383;
    }

    a:hover {
        color: black;
    }

    menu {
        position: relative;
        margin-left: 30px;
    }

    menu a {
        display: block;
        width: 140px;
    }

    menu ul {
        list-style-type: none;
        padding-top: 5px;
    }

    menu li {
        float: left;
        position: relative;
        padding: 3px 0;
        text-align: center;
    }

    menu ul.sub-menu {
        display: none;
        position: absolute;
        top: 20px;
        left: -10px;
        padding: 10px;
        z-index: 90;
    }

    menu ul.sub-menu li {
        text-align: left;
    }

    menu li:hover ul.sub-menu {
        display: block;
        border: 1px solid #ececec;
    }
</style>

HTML Part

    <div id="menu">
    <ul>
        <li>
            <a href="#">Home</a>
            <ul class="sub-menu">
                <li><a href="#">Pages</a></li>
                <li><a href="#">Archives</a></li>
                <li><a href="#">New Posts</a></li>
                <li><a href="#">Recent Comments</a></li>
            </ul>
        </li>
        <li>
            <a href="#" >About</a>
            <ul class="sub-menu">
                <li><a href="#">Get to know us</a></li>
                <li><a href="#">Find out what we do</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Contact</a>
            <ul class="sub-menu">
                <li><a href="#">E-mail Us</a></li>
                <li><a href="#">Use Our Contact Form</a></li>
            </ul>
        </li>
    </ul>
</div>

Upvotes: 2

Views: 78292

Answers (4)

Roman Polen.
Roman Polen.

Reputation: 559

You can use online HTML CSS horizontal and vertical menu layout generator to create any HTML menu with up to three submenu levels using CSS only.

Upvotes: -1

user2161297
user2161297

Reputation: 11

<html xmlns="http://www.w3.org/1999/xhtml">

CSS code

div {
    width: 550px;
    margin: 0px auto;
}
div ul li a:link, div ul li a:visited {
    display: block;
    background-color: #98bf21;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: Red;
    text-align: center;
    text-decoration: none;
    padding: 4px;
    border-bottom: 1px solid #fff;
    width: 170px;        
}
div ul li a:hover{
    background-color: #030;
}
li ul li a:link, li ul li a:visited {
    display: block;
    background-color: #98bf21;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 12px;
    color: Blue;
    text-align: center;
    text-decoration: none;
    padding: 4px;
    border-bottom: 1px solid #fff;
    width: 170px;
}
li ul li a:hover {
    background-color: #050;
}
ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;   
}
div ul li {
    float: left;
    margin-left: 5px;
}
ul li ul li {
    float: none;
    margin-left: 0px;
}
li ul {
    display: none;  
}
li:hover ul{
    display: block; 
}

HTML

<div>
    <ul>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 1</a>
            <ul>
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
                <li><a href="#">Sub 3</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 3</a>
            <ul>
                <li><a href="#">Sub 4</a></li>
                <li><a href="#">Sub 5</a></li>
                <li><a href="#">Sub 6</a></li>        
            </ul>
        </li>
    </ul>   
</div>

Upvotes: 1

Spudley
Spudley

Reputation: 168843

Firstly, if you have a choice, upgrade to IE8. IE7 really has no reason to be in use. :-) That said, IE7 should do what you want... just be aware that it has significant missing functionality, so it might make your life harder.

Secondly, your question says you've found some 'codes' (tutorials?), but you're not getting the results you want; it would help if you told us which tutorials you've used, or at least showed us some of the code that doesn't work, and tell us what problems you've had with it.

I will try to provide an answer, though...

Your question implies that you want to write a menu that is controlled only by CSS.

With that in mind, it doesn't really matter what language you use to generate the HTML, because your HTML should only need to consist of nested <ul> and <li> tags, with a few IDs or classes to tell your CSS where to apply its styles.

From that perspective, the Perl code (or any other language) shouldn't be particularly complex. The CSS may be complex, but that would be separate from your Perl code.

In CSS, the :hover style will allow you to build mouse-over drop-down functionality. No Perl (or Javascript) required. I'd suggest looking at the A List Apart site; it's a good site for CSS tutorials and has some very good examples of CSS-driven menus.

Upvotes: 4

Pramendra Gupta
Pramendra Gupta

Reputation: 14873

Making menu is all about css and javascript

I will recommend some jquery plugin coz its clean and easy to use.

see tutorial

http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/

demo link

http://www.sohtanaka.com/web-design/examples/mega-dropdowns/

Upvotes: -1

Related Questions