CODEWITHSUNDEEP
htmlcssdrop-down-menu
TNK
TNK

Reputation: 4323

Creating a dropdown menu using CSS and HTML

I am trying to make a navigation bar with a four columns submenus. I coded most of things, but when I creating the submenu I found the problem.

This is my HTML: 

<div id="navigation">
    <ul>
        <li class="current">
            <a href="" class="">Home</a>
        </li>
        <li class="sub-menu">
            <a href="">Our Products</a>
            <div class="subnav product">
                <div class="content">
                    <div class="col">
                        <ul>
                            <li class="one">
                                <a href="">Main Menu Item</a>
                            </li>
                            <li class="one">
                                <a href="">Main Menu Item</a>
                            </li>
                            <li class="one">
                                <a href="">Main Menu Item</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col">
                        <ul>
                            <li class="two">
                                <img src="" />
                                <a href="">Promoting Peace in the Niger Delta</a>
                            </li>
                            <li class="three">
                                <img src="" />
                                <a href="">Promoting Peace in the Niger Delta</a>
                            </li>
                            <li class="four">
                                <img src="" />
                                <a href="">Promoting Peace in the Niger Delta</a>
                            </li>
                            <li class="five">
                                <img src="" />
                                <a href="">Promoting Peace in the Niger Delta</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
        <li class="">
            <a href="">Service Maintenance</a>
        </li>
        <li class="sub-menu">
            <a href="">Frequently Ask Questions</a>
        <li class="sub-menu">
            <a href="">Our Products</a>
            <div class="subnav product">
                <div class="content">
                    <div class="col">
                        <ul>
                            <li class="one">
                                <a href="">Main Sub Item</a>
                            </li>
                            <li class="one">
                                <a href="">Main Sub Item</a>
                            </li>
                            <li class="one">
                                <a href="">Main Sub Item</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
    </ul>               
</div>

Hope somebody will help me out. Thank you.

Upvotes: 1

Views: 2782

Answers (4)

darshan
darshan

Reputation: 373

css 

ul li ul
{
    display: none;
    position: fixed;
    margin-left: 191px;
    margin-top: -37px; 
}
ul li:hover ul
{
    display: block; 
}

ul li a:hover
{
    color: #fff;
    background: #939393;
    border-radius:20px;
}

 ul li a
{
    display: block;
    padding: 10px 10px;
    color: #333;
    background: #f2f2f2;
    text-decoration: none;

}
ul
{
   background: #f2f2f2;
   list-style:none;
   padding-left: 1px;
   width: 194px;
   text-align: center;

}

html

<ul>
   <li><a href="#">Home</a></li>
   <li>
      <a href="#">About</a>
      <ul>
         <li><a href="#">About Me</a>
         <li><a href="#">About Site</a>
      </ul>
   </li>
   <li><a href="#">Contact</a></li>
</ul>

Upvotes: 0

omma2289
omma2289

Reputation: 54619

Check this http://jsfiddle.net/qtvVK/11/embedded/result/.

I made some changes to your markup and used display:inline-block; instead of floating elements

Relevant CSS syles

/* Dropdown styles */
 #navigation ul > li > ul.sub-menu {
    display: none;
    position:absolute;
    padding:10px 0;
    background:#fff;
    border: 1px solid #DDDCDC;
    top: 24px;
    z-index: 1;
}
/* Show dropdown when hover */
 #navigation ul > li:hover > ul.sub-menu {
    display:block;
}
.row {
    width:auto;
    white-space: nowrap;
}
.col {
    display: inline-block;
    vertical-align: top;
    padding: 0 10px;
}

Upvotes: 3

aljazerzen
aljazerzen

Reputation: 469

i suggest using jQuery. it has simple function called slideDown(). Here is a link to a good tutorial.

You should do like so: First hide your menu when script starts:

$("#idOfDropDownMenu").hide();

And command to drop menu down when mouse enters button and slide up when it leaves it:

$("#idOfButton").hover(function(){      //function that fires when mouse enters
    $("#idOfDropDownMenu").slideDown();
}, function() {                         //function that fires when mouse leaves
    $("#idOfDropDownMenu").slideUp();
}

Instead of using IDs you can use any CSS selector.

I hope this helps with your question.

Upvotes: 0

AJak
AJak

Reputation: 3873

The problem is the container width is defined at 300px

#navigation ul li > div.product {
    width: 300px;
}

And its child elements are taking up 100% of that space. So you need to make sure they have room to float left. 

#navigation div.col {
float: left;
    height:200px;
    width: 25%;
}

Hopefully that helps with your question.

Fiddle

Upvotes: 4

Related Questions