SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    My CSS drop down menu problem (with code)

    Ok, so I have looked at a 100 examples online today for css drop down. changing them all the my classes/id's and it never works. I have applied the simplest parts of the drop down css to my code. Can anyone tell me what i need to add? It won't even display when i hover

    HTML:

    Code:
    <html>
    <head>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    
    </head>
        <body>
    		<div id="content">
    	<div id="logo">
    		<img src=".png" width="600" height="82" ><a href=""></a>
    	</div>
    			<div id="surround">
                <div id="nav">
                    <ul>
                        <li><a href="">button</a></li>
                             <ul>
                                  <li><a href="">sub-button</a></li>
                                  <li><a href="">sub-button</a></li>
                             </ul>
                        <li><a href="">button</a></li>
                        <li><a href="">button</a></li>
                        <li><a href="">button</a></li>
                    </ul>
                </div>
            	</div>
            </div><!-- end of content" div -->
            <div id="footer-wrap">
                <div id="footer">
                    <p>content</p>
                    <p>content</p>
                    <p>content</p>
                </div> <!-- end of "footer" div --> 
            </div><!-- end of "footer-wrap" div -->
    
        </body>
    </html>

    CSS:

    Code:
    body {
    	background: #fff;
    }
    
    #content {
    	width: 970px;
    	margin: auto;
    	padding: 0px 10px 10px 10px;
    	position: relative;
    	top: -8px;
    	background: #fff;
    	min-height: 580px;
    	border-right: 2px solid #000;
    	border-left: 2px solid #000;
    }
    
    #logo {
    	margin: 0px 0px 0px 10px;
    }
    
    
    #nav {
    	float: right;
    	display: block;
    	margin: -16px 0 0 0;
    }
    
    #nav li {
    	list-style-type: none;
    	display: inline;
    	float: right;
    	font-size: 16px;
    	position: relative;
    	top: -84px;
    	right: 7px;
    }
    
    #nav a {
    	text-decoration: none;
    	color: #000;
    	font-family: Trebuchet MS, sans-serif;
    	font-weight: bold;
    	padding: 8px 13px 8px 13px;
    	border-bottom: 2px solid #000;
    	border-right: 2px solid #000;
    	border-left: 2px solid #000;
    	margin: 5px;
    
    }
    
    #nav a:link, a:visited {
    	color: #000;
    	-webkit-transition: color .25s linear .05s;
    	transition: color .25s linear .05s;
    }
    
    #nav a:hover {
    	color: #fff;
    	border-bottom: 2px solid #000;
    	border-right: 2px solid #000;
    	border-left: 2px solid #000;
    	border-top: 6px solid #000;
    	margin: 5px;
    	background: #000;
    }
    
    /*my basic drop down code that needs help */
     #nav ul ul {
     	display: none;
     }
    
     #nav ul ul:hover {
     	display: block;
     }
    
    
    #footer-wrap {
    	background: #fff;
    	height: 150px;
    	border-top: 2px solid #000;
    	margin: 0;
    	padding: 0;
    }
    
    #footer {
    	width: 970px;
    	margin: auto;
    	padding: 10px;
    
    }
    
    #footer p {
    	color: #000;
    }
    Last edited by ralph.m; Feb 28, 2013 at 16:55. Reason: code tags

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    In viewing all of those examples, you missed one of the key points, that the sub ul goes inside its parent li:

    Code:
    <li><a href="">button</a>
    	<ul>
    	<li><a href="">sub-button</a></li>
    	<li><a href="">sub-button</a></li>
    	</ul>
    </li>
    But there are lots of problems with the CSS, too, so I've tidied it up for you in the example below. I removed the surrounding div, as that's not needed, and also it's best to avoid all those negative top and left positions and negative margins etc. That's a sign of poor layout strategy anyway.

    If you like, we can help you with the larger layout as well.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    	
    <style media="all">
    body, ul, li {margin:0; padding: 0;}
    
    #nav {
    	float: right;
    	display: block;
    	margin: 0 0 0 0;
    	list-style: none;
    }
    
    #nav > li {
    	float: left;
    	font-size: 16px;
    	position: relative;
    	margin-left: 5px;
    }
    
    #nav a {
    	text-decoration: none;
    	color: #000;
    	font-family: Trebuchet MS, sans-serif;
    	font-weight: bold;
    	padding: 8px 13px 8px 13px;
    	border-color: #000;
    	border-style: solid;
    	border-width: 0 2px 2px;
    	display: block;
    }
    
    #nav a:link, a:visited {
    	color: #000;
    	-webkit-transition: color .25s linear .05s;
    	transition: color .25s linear .05s;
    }
    
    #nav a:hover {
    	color: #fff;
    	background: #000;
    }
    
    #nav ul {
    	position: absolute;
    	left: -9999px;
    	list-style: none;
    }
    
    #nav li:hover ul {
    	left: 0;
    }
    </style>
    	
    </head>
    <body>
    
    <ul id="nav">
    <li><a href="">button</a>
    	<ul>
    	<li><a href="">sub-button</a></li>
    	<li><a href="">sub-button</a></li>
    	</ul>
    </li>
    <li><a href="">button</a></li>
    <li><a href="">button</a></li>
    <li><a href="">button</a></li>
    </ul>
    
    
    </body>
    </html>

  3. #3
    Non-Member Wisestepp's Avatar
    Join Date
    Aug 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i think "<ul>" should not be used in the sub menu just check it in w3schools website

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Wisestepp View Post
    i think "<ul>" should not be used in the sub menu
    No, it's perfectly fine to do that—utterly valid HTML.

    just check it in w3schools website
    There are much better places to check.

  5. #5
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,011
    Mentioned
    56 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Wisestepp View Post
    i think "<ul>" should not be used in the sub menu just check it in w3schools website
    Erm, Don't cite w3schools. They are wildly inaccurate most of the time. The site is a link farm, nothing more, using a deceptive name to try to look like a legitimate representative of the w3c. It is not.


Bookmarks

Posting Permissions

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