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 13 of 13

Thread: Dropdown menu

  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    40
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Dropdown menu

    Hi,

    I've been asked to create a dropdown menu (without using Javascript or other scriptlanguages, only HTML and CSS).

    I've looked at a few examples and tutorials, but I still can't get it to work correctly.

    This is my HTML code for the menu:
    Code:
    <div id="menu">
    			<ul id="nav">
    				<li><a href="index.html">Home</a></li>
    				<li>Dropdown<ul>
    						<li>Dropdownitem #1</li>
    						<li>Dropdown item #2</li>
    					</ul>
    				</li>
    				<li><a href="page.html">page</a></li>
    				<li><a href="contact.html">Contact</a></li>
    			</ul>
    		</div>
    This is my CSS code:
    Code:
    #menu
    {
    	color: #76859B;
    }
    
    #menu li 
    {
    	list-style-type: none;
    	display: inline;
    	padding-left: 100px;
    }
    
    #menu ul
    {
    	text-align: center;
    	margin-left: 0;
    	padding: 10px 0 10px 0;
    	border-bottom: solid;
    	border-color: #76859B;
    	border-width: 2px;
    	margin: 0 auto;
    }
    
    #menu li:first-child 
    {
    	padding-left: 0px;
    }
    
    #nav ul
    {
    	position: absolute;
    	left: -1000px;
    }
    
    #nav li:hover ul 
    {
    	left: auto;
    }
    I believe I'm doing it completely wrong. This is the correct display:
    http://img130.imageshack.us/img130/3017/dropdowny.png

    Note that I don't want a horizontal dropdown menu, but a vertical one. So if my mouse is hovered on the word "dropdown", a vertical dropdown menu should appear.

    How can I do this correctly?

    Tyvm

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    40
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Thanks, I'll have a look. But I've followed a few of these tutorials already

    Also, there is only one div used in my example

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Thanks, I'll have a look. But I've followed a few of these tutorials already
    Update the thread, if you find it too hard.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Feb 2009
    Posts
    40
    Thanks
    15
    Thanked 0 Times in 0 Posts
    I got this now (and removed the id "nav" from the HTML):

    Code:
    #menu, #menu ul{
    	list-style: none;
    	text-align: center;
    }
    
    #menu ul
    {
    	margin-left: 0;
    	padding: 10px 0 10px 0;
    	border-bottom: solid;
    	border-color: #76859B;
    	border-width: 2px;
    	margin: 0 auto;
    }
    
    #menu a {
    	display: block;
    	text-decoration: none;
    	font-weight: bold;
    	color: #76859B;
    }
    
    #menu li {
    	float: left;
    	width: 10em;
    	padding-left: 100px;
    }
    
    
    #menu li ul {
    	position: absolute;
    	width: 10em;
    	left: -1000px;
    }
    
    #menu li:first-child 
    {
    	padding-left: 0px;
    }
    
    #menu li ul li
    {
    	padding-left: 0px;
    }
    
    #menu li:hover ul {
    	left: auto;
    }
    But now my bottom border isn't at the bottom anymore but at the middle of the text. And the menu is not centered anymore...

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    But now my bottom border isn't at the bottom anymore but at the middle of the text.
    Try
    Code:
    #menu ul
    {
    	margin-left: 0;
    	/*padding: 10px 0 10px 0;*/
    	overflow:auto;
    	border-bottom: solid;
    	border-color: #76859B;
    	border-width: 2px;
    	margin: 0 auto;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New Coder
    Join Date
    Feb 2009
    Posts
    40
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Thank you, I'm getting close

    This is my current code:
    Code:
    #menu, #menu ul{
    	list-style: none;
    	text-align: center;
    }
    
    #menu ul
    {
    	margin-left: 0;
    	overflow:auto;
    	border-bottom: solid;
    	border-color: #76859B;
    	border-width: 2px;
    	margin: 0 auto;
    	padding-bottom: 10px;
    	padding-top: 10px;
    }
    
    #menu a {
    	display: block;
    	text-decoration: none;
    	font-weight: bold;
    	color: #76859B;
    }
    
    #menu li {
    	float: left;
    	width: 10em;
    	padding-left: 100px;
    }
    
    
    #menu li ul {
    	position: absolute;
    	width: 150px;
    	left: -1000px;
    	border: none;
    	background-color: blue;
    }
    
    #menu li:first-child 
    {
    	padding-left: 0px;
    }
    
    #menu li ul li
    {
    	padding-left: 0px;
    }
    
    #menu li:hover ul {
    	left: auto;
    }
    One problem left: the dropdown menu is not centered.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    *{
    margin:0;padding:0;
    }
    #menu{
    width:40em;
    margin:0 auto;
    }
    #menu li {
    	float: left;
    	width: 10em;
    	/*padding-left: 100px;*/
    }
    Now, if you need that border to stretch to full width, you'd need top bring back that <div>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New Coder
    Join Date
    Feb 2009
    Posts
    40
    Thanks
    15
    Thanked 0 Times in 0 Posts
    That's not working, but is only breaking the whole menu...

    EDIT:
    Had to revert the code to the first version. Whatever I try, this is NOT working...
    Last edited by Bv202; 04-02-2011 at 05:11 PM.

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    <div id="wrapper">
    			<ul id="menu">
    				<li><a href="index.html">Home</a></li>
    				<li>Dropdown<ul>
    						<li>Dropdownitem #1</li>
    						<li>Dropdown item #2</li>
    					</ul>
    				</li>
    				<li><a href="page.html">page</a></li>
    				<li><a href="contact.html">Contact</a></li>
    			</ul>
    		</div>
    Code:
    *{
    margin:0;padding:0;
    }
    #wrapper{
    border-bottom: 2px solid #76859B;
    }
    #menu{
    width:40em;
    margin:0 auto;
    overflow:auto;
    }
    #menu, #menu li{
    	list-style: none;
    }
    
    }
    
    #menu a {
    	display: block;
    	text-decoration: none;
    	font-weight: bold;
    	color: #76859B;
    }
    
    #menu li {
    	float: left;
    	width: 10em;
    	/*padding-left: 100px;*/
    }
    
    
    #menu li ul {
    	position: absolute;
    	width: 10em;
    	left: -1000px;
    }
    
    #menu li:first-child 
    {
    	padding-left: 0px;
    }
    
    #menu li ul li
    {
    	padding-left: 0px;
    }
    
    #menu li:hover ul {
    	left: auto;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Bv202 (04-02-2011)

  • #11
    New Coder
    Join Date
    Feb 2009
    Posts
    40
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Thanks, but I got that far already...

    It's the dropdown which is not centered:
    http://img846.imageshack.us/img846/9350/dropdown.png

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Bv202,
    I've never built a dropdown that positions the dropped ul off the page when it's not in use, I'll have to play with that a while. I don't much like hovering on an li so I added a link there. I also added some colors just so you could see the size of the li. When you add content you may need some z-index to make sure the dropped ul stays on top...

    Give this a try -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	padding: 100px 0;
    	background: #fc6;
    }
    #wrapper {
    	height: 30px;
    	border-bottom: 2px solid #76859B;
    }
    ul#menu {
    	width: 40em;
    	margin: 0 auto;
    	padding: 0;
    	line-height: 30px;
    	text-align: center;
    }
    	ul#menu li {
    		width: 10em;
    		margin: 0;
    		padding: 0;
    		float: left;
    		position: relative;
    		list-style: none;
    		background: #c93;
    	}
    		ul#menu li a {
    			text-align: center;
    			text-decoration: none;
    			color: #fff;
    		}
    		ul#menu li:hover {background: #cc3;}
    			ul#menu ul {
    				width: 10em;
    				margin: 0;
    				padding: 0;
    				position: absolute;
    				left: 0;
    				top: 30px;
    				visibility: hidden;
    			}
    				ul#menu li:hover ul {visibility: visible;}	
    ul#menu a {
    	display: block;
    	text-decoration: none;
    	font-weight: bold;
    	color: #76859B;
    }
    ul#menu a:hover {color: #666666;}
    </style>
    </head>
    <body>
    	<div id="wrapper">
            <ul id="menu">
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Dropdown</a>
                	<ul>
                        <li>Dropdownitem #1</li>
                        <li>Dropdown item #2</li>
                    </ul>
                </li>
                <li><a href="page.html">page</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        <!--end wrapper--></div>
    </body>
    </html>
    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

  • Users who have thanked Excavator for this post:

    Bv202 (04-02-2011)

  • #13
    New Coder
    Join Date
    Feb 2009
    Posts
    40
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Thank you very much, that's exactly what I'm looking for!

    I'll try a few things out, thanks


  •  

    Posting Permissions

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