SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Threaded 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


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
  •