SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: CSS drop down?

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

    CSS drop down?

    I am having trouble finding a good blog post on how to add a css drop down to my nav. I have changed all the classes and id's to mine but still nothing works. Does anyone know of a really simple one they could point me to?

  2. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,201
    Mentioned
    105 Post(s)
    Tagged
    1 Thread(s)
    Paul O'B has a number on his site:



    His full list can be found on his main page: http://pmob.co.uk/
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    SUPER SIMPLE, 1 level drop :
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<style type="text/css">
    					.nav, .nav ul {padding:0; margin:0; list-style: none;}
    					.nav li { position:relative;  float:left;}
    					.nav a{display:block; padding:.25em; border:2px solid transparent;}
    					.nav li:hover { background:#e8e7df ;color:#371f1b ;}
    					.nav li:hover a { color:#371f1b ;}
    					.nav li:hover> a { color:orange;}
    					.nav li ul  {margin-left:-999em ; top:-999em; background:inherit; position:absolute; width:10em;  }
    					.nav li li{ float:none; }
    					.nav >li:hover>ul {top:100%;  }
    					.nav li  a{padding:.33em 1em; }
    					.nav >li li:hover>ul {top:0; left:100%  }
    					.nav >li:hover>ul,.nav >li:hover>ul {margin-left:0;}
    					.nav { background: silver; width: 50%; margin:0 auto; display:table;}
    					</style>
    	</head>
    	<body>
    <ul class="nav">
    	<li><a href="#">item</a></li>
    	<li><a href="#">item</a></li>
    	<li><a href="#">item</a>
    		<ul>
    			<li><a href="#">item</a></li>
    			<li><a href="#">item</a></li>
    			<li><a href="#">item</a></li>
    		</ul>
    	</li>
    	<li><a href="#">longer sample item</a>
    			<ul>
    			<li><a href="#">item</a></li>
    			<li><a href="#">item</a></li>
    			<li><a href="#">item</a></li>
    			<li><a href="#">item</a></li>
    			<li><a href="#">item</a></li>
    		</ul>
    	</li>
    	<li><a href="#">item</a></li>
    </ul>
    	</body>
    </html>
    Remember to make sure you have a proper nested list:
    <li><a></a> <ul>...</ul></li>
    You really only need ONE class on the root UL

    hope that helps


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
  •