How can I make a drop down menu by HTML & CSS?

Md.Saddam Hossain Well-Known Member

Messages:: 84

Likes Received:: 4

Best Answers:: 1

Trophy Points:: 138

#1

I am trying to make a drop down menu by CSS. I have completed HTML code [div, ul, li (ul,li) ]. But I can not fix the CSS coding. Please help me with details.

- Thanks
Saddam

Md.Saddam Hossain, Jul 28, 2013 IP

turuncu Active Member

Messages:: 94

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 61

#2

http://inspiretrends.com/drop-down-menu-tutorials/ 35 drop down menu examples

turuncu, Jul 28, 2013 IP

LeeV18 Greenhorn

Messages:: 42

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 16

#3

here's an example:
http://jsfiddle.net/leev18/JqUMG/

HTML:

<div id="nav">
<ul>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a>
        <ul>
            <li><a href="#">Sub-Menu 1</a></li>
            <li><a href="#">Sub-Menu 2<span class="right-arrow">&#9658;</span></a>
                <ul>
                    <li><a href="#">Sub-Sub-Menu 1</a></li>
                    <li><a href="#">Sub-Sub-Menu 2</a></li>
                </ul></li>
        </ul>
    </li>
</ul>

<br class="clearboth"/>

</div>

Code (markup):

CSS:

.clearboth {
    margin: 0;
    padding: 0;
    clear: both;
}
 
#nav {
    font-family: verdana;
    font-weight: bold;
    font-size: 9pt;
}
 
#nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
 
#nav a:link,
#nav a:visited {
    color: #ffffff;
    text-decoration: none;
}
 
#nav a {
    display: block;
    padding: 6px 8px;
}
 
#nav li {
    float: left;
    background-color: #000000;
    position: relative;
}
 
#nav li li{
    width: 160px;
}
 
#nav li:hover {
    background-color: #555555;
}
#nav li li:hover {
    background-color: #757575;
}
 
 
#nav ul ul  {
    border-top: solid 1px transparent;
    position: absolute;
    visibility: hidden;
}
 
#nav ul ul ul{
    position: absolute;
    left: 100%;
    top: -1px;
    border: solid 1px transparent;
}
 
#nav li:hover > ul {
    visibility: visible;
}
 
.right-arrow {
    float: right;
}

Code (markup):

LeeV18, Jul 28, 2013 IP

Mike Carroll Greenhorn

Messages:: 89

Likes Received:: 3

Best Answers:: 0

Trophy Points:: 8

#4

Have you tried this site?

Mike Carroll, Jul 29, 2013 IP

Md.Saddam Hossain Well-Known Member

Messages:: 84

Likes Received:: 4

Best Answers:: 1

Trophy Points:: 138

#5

Thank you all.I have got the best solution. @LeeV18 , @turuncu
Yes, I have tried. @Mike Carroll

Md.Saddam Hossain, Jul 29, 2013 IP

Mike Carroll Greenhorn

Messages:: 89

Likes Received:: 3

Best Answers:: 0

Trophy Points:: 8

#6

@Saddam Hossain, it was worth a shot. I might not know the best ways to do things, but I do use things that seem to work for me. Let me know if you need help-I can't promise I have the answer, but I might be willing to try to find something that you can use.

Mike Carroll, Jul 29, 2013 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#7

@leev18, what's with the DIV for nothing and clearing break like it's still 2001?

deathshadow, Jul 29, 2013 IP

Md.Saddam Hossain Well-Known Member

Messages:: 84

Likes Received:: 4

Best Answers:: 1

Trophy Points:: 138

#8

Mike Carroll said: ↑

@Saddam Hossain, it was worth a shot. I might not know the best ways to do things, but I do use things that seem to work for me. Let me know if you need help-I can't promise I have the answer, but I might be willing to try to find something that you can use.
Click to expand...

Thank you @Mike for your interest for helping. Please check the code below , I tried to make dropdown menu.

This is my html code :

<html>
<head>
<title>This is title</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main">
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a>
<ul>
<li><a href="#">Conact</a></li>
<li><a href="#">Conact</a></li>
<li><a href="#">Conact</a></li>
<li><a href="#">Conact</a></li>
</ul> 
</li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</div> 
</div> 
</body>
</html>

This is my css code :

* {
margin: 0;
padding: 0;
}

body {
font-style: arial;
font-size: 14px;
color: #111111;
line-height: 20px;
}

.main {
overflow: hidden;
width: 960px;
margin: 20px auto;
}

.menu {
overflow: hidden;
}
.menu ul{
list-style: none;
margin: 0;
padding: 0;
}
.menu ul li{
float: left;
border: 1px solid #ddd;
}
.menu ul li a{
text-decoration: none;
color: #111111;
}
.menu ul li a:hover{
color: rgb(53,177,55);
}

I have download some according the link of @turuncu.

I am still trying to make a drop down menu. I don't know what is the best way to fix my problem. please see below :

.menu ul ul {
visibility: hidden;
}

.menu ul li:hover ul {
visibility: visible;
}

But I want to use display:none coding for making drop down menu. Please resolve my coding and back it reply if you can.

Thanks

Md.Saddam Hossain, Jul 29, 2013 IP

cc2365 Member

Messages:: 91

Likes Received:: 1

Best Answers:: 0

Trophy Points:: 43

#9

Saddam, try replace

.menu ul ul {
visibility: hidden;
}
 
.menu ul li:hover ul {
visibility: visible;
}

Code (markup):

with

.menu ul ul {
position: absolute;
z-index: 10;
display: none;
}
 
.menu ul li:hover ul {
display: block;
}

Code (markup):

This should work for you.

cc2365, Jul 30, 2013 IP

Md.Saddam Hossain Well-Known Member

Messages:: 84

Likes Received:: 4

Best Answers:: 1

Trophy Points:: 138

#10

@cc2365

yes It works but menu shows in line. I want to create my drop menu like the below image. Please resend me the code.

Md.Saddam Hossain, Jul 30, 2013 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#11

Here, try this:
http://www.cutcodedown.com/for_others/Hossain/template.html

As with all my examples the directory:
http://www.cutcodedown.com/for_others/Hossain/

Is wide open for easy access to the gooey yummy bits and pieces (like the CSS). Feel free to look around.

First step in my mind was to swing an axe at the extra DIV for nothing around it. UL is a perfectly good block level container, you don't need to slap div.menu around it. Less markup is good.

Most menu techniques try to use display:none and display:block to show/hide, but that can cause accessibility issues on things like screen readers. Another technique is to slide the absolute positioned dropdown off-screen to the left, and slide it back into place on hover. This can be a bit tricky, particularly when it comes to working in older browsers or with 100% min-height layouts.

The method I use is to absolute position it where you want it, then simply use overflow:hidden to hide it, and overflow:visible to show it.

By using inline-block (and inline in IE7/lower) instead of floats, you can also change the alignment of the menu by adding text-align to #mainMenu. Likewise it makes it easier to switch the submenus to block. Setting a width on the dropdown lets it be centered too...

Also as it uses display:hidden, if you try to tab through it with the keyboard the anchors will show up in the parent element.

Hope this helps.

deathshadow, Jul 30, 2013 IP

Mike Carroll Greenhorn

Messages:: 89

Likes Received:: 3

Best Answers:: 0

Trophy Points:: 8

#12

Here is a sample HTML code I would use:

<!DOCTYPE html>

<html>

<head>
<title>Some Title</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
<div id="nav">
Some Links Here
</div>
</body>
</html>

In the CSS-just start working with the #nav function, setting things like ul, ul li, ul li a, etc. This might not be the best way to do it though, just what I tend to do.

Mike Carroll, Jul 30, 2013 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#13

@Mike Carrol, did you even understand the question -- much less what the blazes does your post even have to do with anything?!?

deathshadow, Jul 30, 2013 IP

Md.Saddam Hossain Well-Known Member

Messages:: 84

Likes Received:: 4

Best Answers:: 1

Trophy Points:: 138

#14

@deathshadow
Thank you for your post.

Last edited: Jul 30, 2013

Md.Saddam Hossain, Jul 30, 2013 IP

woits Greenhorn

Messages:: 29

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 6

#15

did you got solution for this or not?
can get something from www.dynamicdrive.com

woits, Jul 30, 2013 IP

cc2365 Member

Messages:: 91

Likes Received:: 1

Best Answers:: 0

Trophy Points:: 43

#16

Md.Saddam Hossain said: ↑

yes It works but menu shows in line.
Click to expand...

Your menu shows inline because of the following CSS code:
.menu ul li{
float: left;
border: 1px solid #ddd;
}
Code (markup):
by using .menu ul li, you selected both .menu > ul > li and .menu > ul > li > ul > li, thus made the sub-menu floated as well. Change it to
.menu ul li {
border: 1px solid #ddd;
}
 
.menu > ul > li {
float: left;
}
Code (markup):
should solve this issue.

cc2365, Aug 1, 2013 IP

Phaaze Member

Messages:: 51

Likes Received:: 1

Best Answers:: 0

Trophy Points:: 45

#17

Ok, firstly - You're likely to run into trouble until your decide on which DOCTYPE you're going to use. Personally, at this stage in the game, I'd go with HTML5's DOCTYPE. Plus, it's the easiest to remember.

Secondly, you need to make sure that you're using elements properly according to the specifications for the DOCTYPE that you choose.

Now, let's say we decide on HTML5; we'll put <!DOCTYPE html> at the top of our code. Then continue to code our menu... We'll keep things pretty simple here:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{margin:0;padding:0}
            body{color:#111;font-family:Arial,Verdana,sans-serif;font-size:.75em;margin:0 auto;padding:10px}
            #nav{float:left;font-weight:700;list-style:none;margin-bottom:10px;position:relative;width:100%;z-index:5}
            #nav li{border:1px solid #ddd;float:left;margin-right:10px;position:relative}
            #nav a{background:#fff;color:#111;display:block;padding:5px;text-decoration:none}
            #nav a:hover{color:#35b137;text-decoration:underline}
            #nav ul{background:rgba(255,255,255,0);left:-9999px;list-style:none;position:absolute}
            #nav ul li{border:1px solid #ddd;float:none;margin-top:2px}
            #nav ul a{white-space:nowrap}
            #nav li:hover ul{left:-1px}
            #nav li:hover a{background:#fff;text-decoration:underline}
            #nav li:hover ul a{text-decoration:none}
            #nav li:hover ul li a:hover{background:#fff}
        </style>
    </head>
    <body>
        <nav>
            <ul id="nav">
                <li><a href="#">Home</a></li>
                <li>
                    <a href="#">Home</a>
                    <ul>
                        <li><a href="#">Conact</a></li>
                        <li><a href="#">Conact</a></li>
                        <li><a href="#">Conact</a></li>
                        <li><a href="#">Conact</a></li>
                    </ul>
                </li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
            </ul>
        </nav>
    </body>
</html>

HTML:

You can see it in action here: http://jsfiddle.net/NPSGH/
If you want the CSS formatted differently, you can use http://cleancss.com

Hope this helps.

Phaaze, Aug 1, 2013 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#18

Phaaze said: ↑

I'd go with HTML5's DOCTYPE. Plus, it's the easiest to remember.
Click to expand...

Whereas I'd advise against that pointless garbage that encourages sloppy coding practices... see the stupid/pointless NAV tag you have in there...

Also, the illegible "lets stuff all the CSS on single lines" garbage, redundant declarations, values on elements that can cause layout issues (the extra styling on the LI tripping the staircase bug in IE8), lack of display triggers making your flyouts not work in Opera 12 or IE7-, etc, etc... not all that great a method of building the CSS for that.

Though it is ENTIRELY what I've come to expect from anyone using HTML 5...

deathshadow, Aug 2, 2013 IP

Phaaze Member

Messages:: 51

Likes Received:: 1

Best Answers:: 0

Trophy Points:: 45

#19

Firsly, deathshadow, I'd appreciate it if you'd calm down and stop being so hostile towards others. Just because they don't do things the way you'd prefer to do them, does not mean they're wrong.

Anyway, moving on... The nav element I left there as he had a container around the ul in his initial code anyway, I simply made it more semantic.

The css on one line is how I code, I find it easier to find selectors that way than trying to scroll through hundreds of lines. With tools such as cleancss.com, that is really a matter of personal preference as it's a breeze to reformat it. When pushing code to a server, I always compress my code even more to save bandwidth and increase loading speeds.

Lastly, I'm not seeing the staircase in IE8 on my end (I didn't use display, but I did float them - that should prevent the staircase too), but you're right about IE7- not working. Still, no reason to be so rude and disrespectful towards others that are trying to help. One of the big advantages to HTML5/CSS3, and actually using browsers that support them, is that we're finally moving away from the crude world of having to worry about common bugs such as the staircase, double margin, and rather or not we've successfully tripped hasLayout. Yea, I can go back and make a drop-down menu that will render in IE6 if I wanted to, but seeing as we're trying to help a beginner - I figure it's best not to get too involved. He should learn the basics first, and if he's worried about backwards compatibility to that extent, then he can simply ask a follow-up question.

Between your XHTML example that puts meta attributes on their own line and breaks the title into 3 lines, and my HTML5 example with compressed CSS. He should be off to a pretty good start in learning not only how to build a menu, but also in seeing that even if two developers cannot agree on a formatting standard, adopting a standard is still important.

Phaaze, Aug 2, 2013 IP

creativewebmaster Active Member

Messages:: 654

Likes Received:: 7

Best Answers:: 4

Trophy Points:: 78

#20

Here are the basic method for the CSS based drop down menu. You can create your self very easy.

ul.dropdown ul { display: none; visibility: visible; }
ul.dropdown li:hover > ul { display: block; }

creativewebmaster, Aug 2, 2013 IP

Log in or Sign up

Advertising (learn more)

How can I make a drop down menu by HTML & CSS?

Md.Saddam Hossain Well-Known Member

turuncu Active Member

LeeV18 Greenhorn

Mike Carroll Greenhorn

Md.Saddam Hossain Well-Known Member

Mike Carroll Greenhorn

deathshadow Acclaimed Member

Md.Saddam Hossain Well-Known Member

cc2365 Member

Md.Saddam Hossain Well-Known Member

deathshadow Acclaimed Member

Mike Carroll Greenhorn

deathshadow Acclaimed Member

Md.Saddam Hossain Well-Known Member

woits Greenhorn

cc2365 Member

Phaaze Member

deathshadow Acclaimed Member

Phaaze Member

creativewebmaster Active Member

Log in or Sign up

Advertising (learn more)

How can I make a drop down menu by HTML & CSS?

Md.Saddam Hossain Well-Known Member

turuncu Active Member

LeeV18 Greenhorn

Mike Carroll Greenhorn

Md.Saddam Hossain Well-Known Member

Mike Carroll Greenhorn

deathshadow Acclaimed Member

Md.Saddam Hossain Well-Known Member

cc2365 Member

Md.Saddam Hossain Well-Known Member

deathshadow Acclaimed Member

Mike Carroll Greenhorn

deathshadow Acclaimed Member

Md.Saddam Hossain Well-Known Member

woits Greenhorn

cc2365 Member

Phaaze Member

deathshadow Acclaimed Member

Phaaze Member

creativewebmaster Active Member

Useful Searches