SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dropdown: child menu styling question

    Hi all,

    First post, and yep, some n00b questions.

    I'm trying to style some submenus in a dropdown menu. Currently, this menu uses straight HTML and CSS. So far so good. What I don't know how to do is make the submenus expand horizontally, so that they match the width of the grey bar. I don't even know what phrase to search for, to start trying to help myself out!!

    Screen Shot 2012-03-20 at 2.15.43 PM.png

    The submenu will match the entire width of the grey bar no matter which element is the parent - and the submenu items should be displayed in multiple columns, spanning the width of said submenu container.

    The code I'm using is simply
    Code:
    <ul id="spMenu">
    <li><a href="#">Stuff</a></li>
    <li><a class="arrow" href="#">And</a>
    	<ul class="subMenu">
    		<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 class="arrow" href="#">Things</a>
    	<ul class="subMenu">
    		<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>
    ...and so on, down to...
    <li><a class="arrow" href="#">Foobar</a>
    	<ul class="subMenu">
    		<li><a href="#">item</a></li>
        </ul>
    </li>
    <li><a href="#">Baz</a></li>
    </ul>
    I *think* that the styling should go on that .submenu UL, but I'm not sure how to tell that element, "your left margin is going to be independent of your parent. And so is your right margin. And they're going to be much, much wider..."

    I would also like this to be fluid, rather than fixed - to expand and contract with varying browser or device sizes.

    So what do I go look up, to figure out how to style the submenus so that they display the way I want them to?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think you are trying to do something like this old example:

    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>
    <title>Drop down Menu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--[if lt IE 7]>
    <script type="text/javascript">
    
    sfHover = function() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" over";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" over\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    </script>
    <![endif]-->
    
    <style type="text/css">
    html, body {
    	margin:0;
    	padding:0
    }
    body {
    	font-family: Tahoma, Verdana, Century Gothic, Arial, Helvetica, sans-serif;
    	color: #000;
    	background:#fff;
    	text-align:center;/* centre for ie5*/
    	font-size:100%
    }
    p { margin:0 0 1em 0; }
    #outer {
    	width:60%;
    	margin:auto;
    	text-align:left;
    }
    ul#nav {
    	margin:0;
    	padding:0;
    	list-style:none;
    	width:100%;
    	line-height:1.6em;
    	z-index:99;
    	position:relative;
    	background:red;
    }
    ul#nav:after {
    	content:".";
    	clear:both;
    	display:block;
    	height:0;
    	visibility:hidden;
    }
    ul#nav li { float:left; }
    ul#nav li a {
    	height:1.6em;
    	float:left;
    	text-decoration:none;
    	color:#000;
    	padding:0 20px;
    }
    ul#nav li:hover > a { color:#fff }
    /* drop down styling */
    ul#nav ul {
    	position:absolute;
    	top:100%;
    	width:100%;
    	left:0;
    	margin:0 0 0 -999em;
    	padding:0;
    	list-style:none;
    }
    ul#nav ul li a {
    	color:#000;
    	border-right:1px solid #000;
    }
    ul#nav ul li a.final { border:none }/*remove border from last sublist */
    ul#nav ul li:hover a, ul#nav ul li.over a { color:red; }/*subnav list text change on hover*/
    ul#nav li:hover ul, ul#nav li.over ul {
    	margin-left:0;
    	background:silver;
    }
    </style>
    </head>
    <body>
    <h1>Drop Down Menu</h1>
    <h2>based on the <a href="http://www.htmldog.com/articles/suckerfish/dropdowns/">suckerfish</a> menus</h2>
    <div id="outer">
    		<ul id="nav">
    				<li><a href="#">About us</a>
    						<ul>
    								<li><a href="#">Company Facts</a></li>
    								<li><a href="#">History</a></li>
    								<li><a href="#">Factory</a></li>
    								<li><a href="#">People</a></li>
    								<li><a class="final" href="#">Press Releases</a></li>
    						</ul>
    				</li>
    				<li><a href="#">Products</a>
    						<ul>
    								<li><a href="#">test</a></li>
    								<li><a href="#">test2</a></li>
    								<li><a href="#">test3</a></li>
    								<li><a class="final" href="#">test4</a></li>
    						</ul>
    				</li>
    				<li><a href="#">test5</a>
    						<ul>
    								<li><a href="#">Gallery</a></li>
    								<li><a class="final" href="#">Future Events</a></li>
    						</ul>
    				</li>
    				<li><a href="#">Support</a>
    						<ul>
    								<li><a href="#">Manuals &amp; Software</a></li>
    								<li><a href="#">Brochures</a></li>
    								<li><a class="final" href="#">testing</a></li>
    						</ul>
    				</li>
    				<li><a href="dropdown-hoz-safe5.htm">Sales</a>
    						<ul>
    								<li><a href="#">Shopping Cart</a></li>
    								<li><a class="final" href="#">Brochures</a></li>
    						</ul>
    				</li>
    				<li><a href="#">Dealers</a>
    						<ul>
    								<li><a href="#">test</a></li>
    								<li><a href="#">test</a></li>
    								<li><a href="#">test</a></li>
    								<li><a class="final" href="#">Brochures</a></li>
    						</ul>
    				</li>
    		</ul>
    </div>
    </body>
    </html>
    There's plenty of examples on Stu Nichols site under dropline menus also.

  3. #3
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am trying to do something like that, yes, in that I want the submenu to span the width of the entire layout. However, I want these submenus to look like a dropline submenu but act like dropdown submenus - that is, the submenu will not be visible until a user selects a parent item. (ie, it acts just like most other horizontal dropdown menu examples.) I have that functionality in place already - the code works the way I want it to. I just can't get the submenus styled the way I want. Also, I want to actually understand the code, so that I can change it if need be, so I don't want to download someone else's dropdown menu code snippet.

    I couldn't find anything on that linked site that answers my question of "how can I style my submenu ULs so that they span the width of the entire layout, regardless of the width of the actual content." Do you know where I might find such a tutorial, or the answer to that specific question?

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Could yo9u perhaps draw us a picture of how you want it? I thought Paul had given a good answe with what you wanted, however it's not quite the case.

    If you just don't know how to style the dropdown to how you want, we will still need the picture so we can mark it up .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by anonnymouse View Post
    I am trying to do something like that, yes, in that I want the submenu to span the width of the entire layout. However, I want these submenus to look like a dropline submenu but act like dropdown submenus - that is, the submenu will not be visible until a user selects a parent item.
    That's what the example I posted does.

    (ie, it acts just like most other horizontal dropdown menu examples.) I have that functionality in place already - the code works the way I want it to. I just can't get the submenus styled the way I want. Also, I want to actually understand the code, so that I can change it if need be, so I don't want to download someone else's dropdown menu code snippet.
    Its pretty straight forward.

    You set position:relative on the ul instead of the list element and then you position the nested ul at top:100% and left 0 with width :100% and it will stretch to the width of the parent ul as required.

    And as marked in my code:
    Code:
    /* drop down styling */
    ul#nav ul {
    	position:absolute;
    	top:100%;
    	width:100%;
    	left:0;
    	margin:0 0 0 -999em;
    	padding:0;
    	list-style:none;
    }
    I couldn't find anything on that linked site that answers my question of "how can I style my submenu ULs so that they span the width of the entire layout, regardless of the width of the actual content." Do you know where I might find such a tutorial, or the answer to that specific question?
    The example I gave will do that if you use 100% width.

    As Ryan said it sounds as though you are after something different to what you originally said or we have both got the wrong end of the stick again so you may need to clarify a little. Perhaps explain where my example differs from what you need and then we can take it from there.

    Here's a live example. (It should work in IE6 also with a few minor differences.)

  6. #6
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    mbstates-resting2.pngSure. Here's three screenshots: showing current functionality / resting state (no submenus activated), current functionality / one submenu activated, and desired functionality / one submenu activated.

    I want the submenus to look like dropline menu submenus, but not to appear until they've been activated. So the "default" state would be nothing showing below the menu bar.

    These submenus may drop down to three or four lines, eventually - and I have the z-index in place which means that the submenus would float over other content (just like regular dropdown submenus do.) I just don't know how to set the left and right margins of the submenus. Currently I have the submenu size set at 500pixels, but the problem there is that when the rightmost menu item is activated, the submenu shoots WAY beyond the right margin of the browser window - and users might potentially have to scroll to see all the menu items. I don't want that.

    When the dropdown menus do appear, I want them to always appear in the same place in the browser window, regardless of where their parent element is. I want the internal items to appear in columns (I'll figure out the exact spacing and styling later on, but I've got the very basics already.)

    (I tried to attach a new "default" state picture, but am having trouble. I think Paul's explanatory response below answers my question, though. Now I just need to figure out if I can do what *else* I want to do with this..!)
    Attached Images Attached Images
    Last edited by anonnymouse; Mar 21, 2012 at 10:30. Reason: Attach new image for "resting state"

  7. #7
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, thank you. That live example at http://www.pmob.co.uk/temp/dropline-...ent-fluid2.htm looks and acts like I want this menu to act. And it's fluid, yay!

    I'm seeing an initial problem: the parent URL is not that grey container. That grey container is a container div, with a background, and it contains an HTML header widget. I'll see about reworking my code, though. (But...can an HTML header tag, or a div, go inside of a UL tag? Or will I just need to position that, then make it float on top of the UL?

    I've attached a picture showing a mockup of where the header/logo will be, atop that grey bar, so that you can understand my pre-caffeine question above.mbstates-with-otherstuff.png

    I think this is doable with some styling and positioning...correct? Placing the pinkbox atop the styled UL even if the code is outside of the UL itself? (pinkbox contents will be: an H1 with a background image, a link, and a title.)

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You should just be able to float the h1 at the start and a few other little tweaks.

    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>
    <title>Drop down Menu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--[if lt IE 7]>
    <script type="text/javascript">
    
    sfHover = function() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" over";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" over\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    </script>
    <![endif]-->
    
    <style type="text/css">
    html, body {
    	margin:0;
    	padding:0
    }
    body {
    	font-family: Tahoma, Verdana, Century Gothic, Arial, Helvetica, sans-serif;
    	color: #000;
    	background:#fff;
    	text-align:center;/* centre for ie5*/
    	font-size:100%
    }
    p { margin:0 0 1em 0; }
    #outer {
    	width:80%;
    	margin:auto;
    	text-align:left;
    }
    ul#nav {
    	margin:0;
    	padding:0;
    	list-style:none;
    	zoom:1.0;
    	line-height:1.6em;
    	z-index:99;
    	/*position:relative;*/
    	background:red;
    }
    ul#nav li { display:inline }
    ul#nav li a {
    	height:1.6em;
    	float:left;
    	text-decoration:none;
    	color:#000;
    	padding:0 20px;
    }
    ul#nav li a:hover {
    	color:#fff;
    	background:silver
    }
    ul#nav li:hover > a {
    	color:#fff;
    	background:silver
    }
    /* drop down styling */
    ul#nav ul {
    	position:absolute;
    	top:100%;
    	width:100%;
    	left:0;
    	margin:0 0 0 -999em;
    	padding:0;
    	list-style:none;
    }
    ul#nav ul li a {
    	color:#000;
    	border-right:1px solid #000;
    }
    ul#nav ul li a.final { border:none }/*remove border from last sublist */
    ul#nav ul li:hover a, ul#nav ul li.over a { color:red; }/*subnav list text change on hover*/
    ul#nav li:hover ul, ul#nav li.over ul {
    	margin-left:0;
    	background:silver;
    }
    #outer {
    	position:relative;
    	background:green;
    	width:80%;
    	margin:auto;
    }
    #outer:after {
    	content:".";
    	clear:both;
    	display:block;
    	height:0;
    	visibility:hidden;
    }
    h1 {
    	float:left;
    	width:200px;
    	height:1.7em;
    	line-height:1.7em;
    	background:#CB697A;
    	font-size:92%;
    	margin:0;
    }
    </style>
    </head>
    <body>
    <div id="outer">
    		<h1>This is the h1</h1>
    		<ul id="nav">
    				<li><a href="#">About us</a>
    						<ul>
    								<li><a href="#">Company Facts</a></li>
    								<li><a href="#">History</a></li>
    								<li><a href="#">Factory</a></li>
    								<li><a href="#">People</a></li>
    								<li><a class="final" href="#">Press Releases</a></li>
    						</ul>
    				</li>
    				<li><a href="#">Products</a>
    						<ul>
    								<li><a href="#">test</a></li>
    								<li><a href="#">test2</a></li>
    								<li><a href="#">test3</a></li>
    								<li><a class="final" href="#">test4</a></li>
    						</ul>
    				</li>
    				<li><a href="#">test5</a>
    						<ul>
    								<li><a href="#">Gallery</a></li>
    								<li><a class="final" href="#">Future Events</a></li>
    						</ul>
    				</li>
    				<li><a href="#">Support</a>
    						<ul>
    								<li><a href="#">Manuals &amp; Software</a></li>
    								<li><a href="#">Brochures</a></li>
    								<li><a class="final" href="#">testing</a></li>
    						</ul>
    				</li>
    				<li><a href="dropdown-hoz-safe5.htm">Sales</a>
    						<ul>
    								<li><a href="#">Shopping Cart</a></li>
    								<li><a class="final" href="#">Brochures</a></li>
    						</ul>
    				</li>
    				<li><a href="#">Dealers</a>
    						<ul>
    								<li><a href="#">test</a></li>
    								<li><a href="#">test</a></li>
    								<li><a href="#">test</a></li>
    								<li><a class="final" href="#">Brochures</a></li>
    						</ul>
    				</li>
    		</ul>
    </div>
    </body>
    </html>

  9. #9
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not using the sfhover snippet. I have code and styling, and I'm looking to modify that - not replace it with something else. I will be adding animations later to make the menu appearances all pretty, but at this point I'm only worrying about getting the submenus to display the way I want them to.

    I modified the code so that the grey bar is now the top-level UL for the navigation bar, and I did get the other logo-bit to float, and I got the parent UL container to extend the full width of the layout. I was also able to put 100% width on the submenu UL - but the submenus now match the width of the parent UL without starting at the left side of the screen, so again causing scrolling.

    Here's the entirety of the modified code. The bits of inline styling are messy, yes - but this is still "sandbox" code, so I'm using some inline styling to help me visually isolate and identify things and I'll clean things up once I get the subMenu elements working. The dropdowns function like I want them to, I just can't get the placement to cooperate.

    When I try to add the top and left style attributes to the .subMenu style definition, the child LIs lose their formatting and all appear as a vertical list again (and the background disappears.) So this code doesn't have the submenus positioned like I want them. They now match the length of their parent, and span the width of the entire layout; but I'm having trouble with the placement.

    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Nav menu test bed</title>
    <style>
    #spMenu { margin-top: -1px; margin-left: 0; padding-left: 0; height: 50px; width: 100%; background: #444; border-style: 1px solid red }
    #spMenu, #spMenu ul {
        font-family: Arial;
        font-size: 12px;
        list-style-type: none;
    	color: #222;
    }
    #spMenu li {
    	line-height: 1em;
    }
    #spMenu > li {
        float: left;
    	text-align: left;
    	padding: 0px;
    }
    #spMenu li a {
    	display: block;
        line-height: 1.7em;
        padding: 15px 1.4em;
        text-decoration: none;
    }
    #spMenu li:hover ul {
        display: block;
    }
    
    * Main menu
    ------------------------------------------*/
    #spMenu > li > a {
        font-weight: bold;
    	color: #5adfb6;
    }
    #spMenu > li a {
    	font-weight: bold;
    }
    #spMenu li a { color: #5adfb6; font-style: oblique; }
    a.arrow { color: #5adfb6; font-style: oblique; background: url(subfiles/indicator.png) no-repeat bottom right; }
    a:hover.arrow { color: #5adfb6; font-style: oblique; background: url(subfiles/arrow.png) no-repeat bottom right; }
    #spMenu > li:hover > a {
    	text-align: left;
    }
     
    /* Submenu
    ------------------------------------------*/
    .subMenu {
        background: #000;
    	width: 100%;
    	position: absolute;
    	display: none;
    	margin: 0;
    	z-index: 999;
    	border: 1px solid red
    }
    .subMenu li, .subMenu li a, .subMenu li:hover a {
    
    }
    .subMenu > li a {
        color: #eb1b69 !important;
    	font-style: normal !important;
    	margin: 0px !important;
    	padding: 2px !important;
    	float: left;
    	width: 20%;
    	border-bottom: 1px solid white;
    }
    .subMenu li:hover a {
    	color: #eb1b69;
        /* background: #ffc97c;
    	border: 1px solid red; */
    }
    </style>
    </head>
    
    <body>
    
    <div style="margin: auto; width: 960px; height: 50px"><!-- container div for the header and nav menu. Should contain the unified-background for both of those elements -->
    
    
    <div style="float: left">
    <h1 style="background: #C09; width: 265px; height: 50px; margin: 0px"><span style="display: none">site_title</span></h1>
    </div>
    
    <ul id="spMenu">
    <li><a href="#">Stuff</a></li>
    <li><a class="arrow" href="#">And</a>
    	<ul class="subMenu">
    		<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 class="arrow" href="#">Things</a>
    	<ul class="subMenu">
    		<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 class="arrow" href="#">Lorem</a>
    	<ul class="subMenu">
    		<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 class="arrow" href="#">Ipsum</a>
    	<ul class="subMenu">
    		<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 class="subMenu">
    </li>
    <li><a href="#">Hup Hey</a></li>
    <li><a class="arrow" href="#">Baklava</a>
    	<ul class="subMenu">
    		<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 class="arrow" href="#">Foobar</a>
    	<ul class="subMenu">
    		<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="#">Baz</a></li>
    </ul>
    
    </div>
    
    
    </body>
    </html>

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by anonnymouse View Post
    I'm not using the sfhover snippet. I have code and styling, and I'm looking to modify that - not replace it with something else.
    You just needed to follow the patterns I have given you above as all the information you need is there .

    I won't give code this time but I'll tell you where you went wrong.

    The dropline needs to be 100% wide so therefore must base its width on the 100% parent which is now that extra div you wrapped around the whole thing and not the ul. The parent div needs to be position relative and not the main ul (and the ul should be auto width).

    Next you forgot to add the left:0 to the submenu as I already mentioned above which will make it start at the left and not at auto.

    Then you also forgot to remove the default left padding and left margin from the nested ul thus making 100% too wide.

    There is no need for classes on the submneu because they are unique as #spMenu ul and if you had used that instead of .submenu then you wouldn't have needed the !importants to overide the parent styles.

    Using display:none to hide the nested ul is bad for accessibility and the off left method is much better and indeed more stable on older browsers as shown in my example.

    There is no need for the extra div around the h1 - just float the h1 instead.

    You are making this harder than it needs to be. The basics as I said before are this.

    Make your stacking context (position:relative) on the element that you are basing the width on. Set the dropdown to left:0 and 100% width. Control padding, margins, borders and dimensions. It is as simple as that

    I said I wouldn't give code but here is the minimum code to produce the effect and it really couldn't be much easier.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    ul {
    	margin:0 auto;
    	padding:0;
    	list-style:none;
    	width:80%;
    	height:2em;
    	background:red;
    	position:relative;
    }
    li { display:inline }
    a {
    	padding:0 20px;
    	float:left;
    	height:2em;
    	color:#fff;
    }
    ul ul {
    	background:blue;
    	position:absolute;
    	top:100%;
    	left:0;
    	width:100%;
    	height:auto;
    	margin:0 0 0 -999em
    }
    li:hover ul{margin:0}
    </style>
    </head>
    
    <body>
    <ul>
    		<li><a href="#">test</a></li>
    		<li><a href="#">test</a>
    				<ul>
    						<li><a href="#">test sub</a></li>
    						<li><a href="#">test sub</a></li>
    						<li><a href="#">test sub</a></li>
    						<li><a href="#">test sub</a></li>
    				</ul>
    		</li>
    		<li><a href="#">test</a></li>
    		<li><a href="#">test</a></li>
    </ul>
    </body>
    </html>
    Everything else is just decoration


Tags for this Thread

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
  •