Creating a dropdown menu using CSS and HTML

Question

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.

how I create 4 columns in my dropdown? I tried with float but it didn't work for me — TNK
– TNK, Commented Jul 25, 2013 at 18:02
float: left works jsfiddle.net/qtvVK/6 I didn't fix the whole thing but the reason it's not working is because the parent <div> container wasn't wide enough to contain the elements. Adjust that and your text and it'll work. — Iron3eagle
– Iron3eagle, Commented Jul 25, 2013 at 18:18

AJak · Accepted Answer · 2013-07-25 18:13:25Z

4

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

answered Jul 25, 2013 at 18:13

AJak

3,8931 gold badge22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

TNK Over a year ago

but this rule is not working #navigation ul li.sub-menu > div.subnav > div.content > div.col ul li:last-child { display: inline; }

AJak Over a year ago

Can you be more specific about the intended behavior?

TNK Over a year ago

Ajak thanks for your answer. I have another case, when I click or mouse over on main navigation item it displays my submenu but there is a line appear between two and when I mouse remove from main menu item then other menu items moving little. can you tell me how I fix these problem?

AJak Over a year ago

I think I understand. The reason for this is because of the width is 300px. Its rendering the elements as display inline still, but since your container isn't big enough for the picture + the text its pushing it underneath. If you set the width of the container from 300 to something like 1500px you can see that it is still working. Hope that helps in your debuging.

omma2289 · Accepted Answer · 2013-07-30 22:10:45Z

3

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;
}

edited Jul 30, 2013 at 22:10

answered Jul 25, 2013 at 19:00

omma2289

54.7k8 gold badges66 silver badges68 bronze badges

Comments

aljazerzen · Accepted Answer · 2013-07-25 18:16:03Z

0

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.

answered Jul 25, 2013 at 18:16

aljazerzen

4911 gold badge5 silver badges21 bronze badges

Comments

darshan · Accepted Answer · 2017-10-24 05:04:01Z

0

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>

answered Oct 24, 2017 at 5:04

darshan

3733 silver badges13 bronze badges

Collectives™ on Stack Overflow

Creating a dropdown menu using CSS and HTML

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related