Social Buttons
  1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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

Discussion in 'HTML & Website Design' started by Md.Saddam Hossain, Jul 28, 2013.

0
Page 1 of 2
  1. #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
  2. turuncu

    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
  3. LeeV18

    LeeV18 Greenhorn

    Messages:
    42
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #3
    here's an example:
    http://jsfiddle.net/leev18/JqUMG/

    HTML:
    Code (Text):
    1. <div id="nav">
    2. <ul>
    3.     <li><a href="#">Menu 1</a></li>
    4.     <li><a href="#">Menu 2</a>
    5.         <ul>
    6.             <li><a href="#">Sub-Menu 1</a></li>
    7.             <li><a href="#">Sub-Menu 2<span class="right-arrow">&#9658;</span></a>
    8.                 <ul>
    9.                     <li><a href="#">Sub-Sub-Menu 1</a></li>
    10.                     <li><a href="#">Sub-Sub-Menu 2</a></li>
    11.                 </ul></li>
    12.         </ul>
    13.     </li>
    14. </ul>
    15.  
    16. <br class="clearboth"/>
    17.  
    18. </div>
    CSS:
    Code (Text):
    1. .clearboth {
    2.     margin: 0;
    3.     padding: 0;
    4.     clear: both;
    5. }
    6.  
    7. #nav {
    8.     font-family: verdana;
    9.     font-weight: bold;
    10.     font-size: 9pt;
    11. }
    12.  
    13. #nav ul {
    14.     margin: 0;
    15.     padding: 0;
    16.     list-style: none;
    17. }
    18.  
    19. #nav a:link,
    20. #nav a:visited {
    21.     color: #ffffff;
    22.     text-decoration: none;
    23. }
    24.  
    25. #nav a {
    26.     display: block;
    27.     padding: 6px 8px;
    28. }
    29.  
    30. #nav li {
    31.     float: left;
    32.     background-color: #000000;
    33.     position: relative;
    34. }
    35.  
    36. #nav li li{
    37.     width: 160px;
    38. }
    39.  
    40. #nav li:hover {
    41.     background-color: #555555;
    42. }
    43. #nav li li:hover {
    44.     background-color: #757575;
    45. }
    46.  
    47.  
    48. #nav ul ul  {
    49.     border-top: solid 1px transparent;
    50.     position: absolute;
    51.     visibility: hidden;
    52. }
    53.  
    54. #nav ul ul ul{
    55.     position: absolute;
    56.     left: 100%;
    57.     top: -1px;
    58.     border: solid 1px transparent;
    59. }
    60.  
    61. #nav li:hover > ul {
    62.     visibility: visible;
    63. }
    64.  
    65. .right-arrow {
    66.     float: right;
    67. }
     
    LeeV18, Jul 28, 2013 IP
  4. Mike Carroll

    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
  5. Md.Saddam Hossain

    Md.Saddam Hossain Member

    Messages:
    58
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    43
    #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
  6. Mike Carroll

    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
  7. deathshadow

    deathshadow Prominent Member

    Messages:
    6,382
    Likes Received:
    947
    Best Answers:
    155
    Trophy Points:
    395
    #7
    @leev18, what's with the DIV for nothing and clearing break like it's still 2001?
     
    deathshadow, Jul 29, 2013 IP
  8. Md.Saddam Hossain

    Md.Saddam Hossain Member

    Messages:
    58
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    43
    #8
    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> <!-- END Drop UL -->
    </li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Home</a></li>
    </ul>
    </div> <!-- END main menu -->
    </div> <!-- END main 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
  9. cc2365

    cc2365 Member

    Messages:
    91
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #9
    Saddam, try replace
    Code (Text):
    1. .menu ul ul {
    2. visibility: hidden;
    3. }
    4.  
    5. .menu ul li:hover ul {
    6. visibility: visible;
    7. }
    with
    Code (Text):
    1. .menu ul ul {
    2. position: absolute;
    3. z-index: 10;
    4. display: none;
    5. }
    6.  
    7. .menu ul li:hover ul {
    8. display: block;
    9. }
    This should work for you.
     
    cc2365, Jul 30, 2013 IP
  10. Md.Saddam Hossain

    Md.Saddam Hossain Member

    Messages:
    58
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    43
    #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.
    I want like this.JPG
     
    Md.Saddam Hossain, Jul 30, 2013 IP
  11. deathshadow

    deathshadow Prominent Member

    Messages:
    6,382
    Likes Received:
    947
    Best Answers:
    155
    Trophy Points:
    395
    #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
  12. Mike Carroll

    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>
    <!--Open-->
    <html>
    <!--Head-->
    <head>
    <title>Some Title</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <!--Start the Body-->
    <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
  13. deathshadow

    deathshadow Prominent Member

    Messages:
    6,382
    Likes Received:
    947
    Best Answers:
    155
    Trophy Points:
    395
    #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
  14. Md.Saddam Hossain

    Md.Saddam Hossain Member

    Messages:
    58
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    43
    #14
    @deathshadow
    Thank you for your post.:)
     
    Last edited: Jul 30, 2013
    Md.Saddam Hossain, Jul 30, 2013 IP
  15. woits

    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
  16. cc2365

    cc2365 Member

    Messages:
    91
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #16
    Your menu shows inline because of the following CSS code:
    Code (Text):
    1. .menu ul li{
    2. float: left;
    3. border: 1px solid #ddd;
    4. }
    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
    Code (Text):
    1. .menu ul li {
    2. border: 1px solid #ddd;
    3. }
    4.  
    5. .menu > ul > li {
    6. float: left;
    7. }
    should solve this issue.
     
    cc2365, Aug 1, 2013 IP
  17. Phaaze

    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:
    HTML:
    1. <!doctype html>
    2. <html lang="en">
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title>Document</title>
    6.         <style>
    7.             *{margin:0;padding:0}
    8.             body{color:#111;font-family:Arial,Verdana,sans-serif;font-size:.75em;margin:0 auto;padding:10px}
    9.             #nav{float:left;font-weight:700;list-style:none;margin-bottom:10px;position:relative;width:100%;z-index:5}
    10.             #nav li{border:1px solid #ddd;float:left;margin-right:10px;position:relative}
    11.             #nav a{background:#fff;color:#111;display:block;padding:5px;text-decoration:none}
    12.             #nav a:hover{color:#35b137;text-decoration:underline}
    13.             #nav ul{background:rgba(255,255,255,0);left:-9999px;list-style:none;position:absolute}
    14.             #nav ul li{border:1px solid #ddd;float:none;margin-top:2px}
    15.             #nav ul a{white-space:nowrap}
    16.             #nav li:hover ul{left:-1px}
    17.             #nav li:hover a{background:#fff;text-decoration:underline}
    18.             #nav li:hover ul a{text-decoration:none}
    19.             #nav li:hover ul li a:hover{background:#fff}
    20.         </style>
    21.     </head>
    22.     <body>
    23.         <nav>
    24.             <ul id="nav">
    25.                 <li><a href="#">Home</a></li>
    26.                 <li>
    27.                     <a href="#">Home</a>
    28.                     <ul>
    29.                         <li><a href="#">Conact</a></li>
    30.                         <li><a href="#">Conact</a></li>
    31.                         <li><a href="#">Conact</a></li>
    32.                         <li><a href="#">Conact</a></li>
    33.                     </ul>
    34.                 </li>
    35.                 <li><a href="#">Home</a></li>
    36.                 <li><a href="#">Home</a></li>
    37.             </ul>
    38.         </nav>
    39.     </body>
    40. </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
  18. deathshadow

    deathshadow Prominent Member

    Messages:
    6,382
    Likes Received:
    947
    Best Answers:
    155
    Trophy Points:
    395
    #18
    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
  19. Phaaze

    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
  20. creativewebmaster

    creativewebmaster Active Member

    Messages:
    643
    Likes Received:
    6
    Best Answers:
    4
    Trophy Points:
    53
    #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
Page 1 of 2