Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    79
    Thanks
    45
    Thanked 0 Times in 0 Posts

    In Dropdown menu in css really that hard?

    I've been trying to create a dropdown menu in css for weeks now but keep failing, Is it really that hard or I'm not getting it very well. I can make a simple nav but dropdown menu keeps giving me problem

  • #2
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts
    Posts
    283
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    Have you tried using an HTML option / select dropdown menu and then styling it with CSS?
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Quote Originally Posted by L0adOpt1c View Post
    Have you tried using an HTML option / select dropdown menu and then styling it with CSS?
    Very hard to style, I'd have thought.
    I'd suggest having a look at son of suckerfish.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #4
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts
    Posts
    283
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    It's not super difficult, there are challenges, yes, but I think it's worth it because you can get a sweet menu going, with very easy functioning links and cool design.
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello h123er2,
    A pure CSS only dropdown is not hard once you understand what it takes to make it work. Properly formed ul, hide the dropped ul in normal state and show the dropped ul in hover state.

    A simple CSS dropdown example here.

    Maybe post some code here and we can see why your menu doesn't work.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New to the CF scene
    Join Date
    Mar 2013
    Location
    Lawton, OK
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is a simple one in CSS...
    #cssmenu{ height:37px; display:block; padding:0; margin:20px auto; border:1px solid; border-radius:5px; }
    #cssmenu > ul {list-style:inside none; padding:0; margin:0;}
    #cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}
    #cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }
    #cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}
    #cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }
    #cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}
    #cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }
    #cssmenu > ul > li.has-sub:hover > a:before{top:19px;}
    #cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; }
    #cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}
    #cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}
    #cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; }
    #cssmenu ul li > ul{width:200px;}
    #cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}
    #cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }


    #cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#bf4143; background:-moz-linear-gradient(top, #bf4143 0%, #a13742 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#bf4143), color-stop(100%,#a13742)); background:-webkit-linear-gradient(top, #bf4143 0%,#a13742 100%); background:-o-linear-gradient(top, #bf4143 0%,#a13742 100%); background:-ms-linear-gradient(top, #bf4143 0%,#a13742 100%); background:linear-gradient(top, #bf4143 0%,#a13742 100%); filterrogidXImageTransform.Microsoft.gradient( startColorstr='#bf4143', endColorstr='#a13742',GradientType=0 ); }
    #cssmenu{border-color:#712730;}
    #cssmenu > ul > li > a{border-right:1px solid #712730; color:#fff;}
    #cssmenu > ul > li > a:after{border-color:#f0696c;}
    #cssmenu > ul > li > a:hover{background:#8f2f34;}

  • #7
    New to the CF scene
    Join Date
    Mar 2013
    Location
    Lawton, OK
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here it is in HTML...
    <div id='cssmenu'>
    <ul>
    <li class='active'><a href='index.html'><span>Home</span></a></li>
    <li class='has-sub'><a href='#'><span>Products</span></a>
    <ul>
    <li><a href='#'><span>Product 1</span></a></li>
    <li class='last'><a href='#'><span>Product 2</span></a></li>
    </ul>
    </li>
    <li><a href='#'><span>About</span></a></li>
    <li class='last'><a href='#'><span>Contact</span></a></li>
    </ul>
    </div>

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,465
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Quote Originally Posted by TigerJ View Post
    Here is a simple one in CSS...
    Not a very simple one - it has about four times as much CSS as is needed for a simple one.

    See http://www.felgall.com/cshow29.htm for all the code (including a working example) for two and three level menus. Each additional level would need an extra 2 lines of CSS so for 5 levels of menu you'd need 11 lines of CSS.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •