SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 36 of 36
  1. #26
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    You bet i did, never before have i had such a struggle with CSS. I guess it was because i always uses classes and id's but now i know things can be done other ways.

    Was good to be part of this challenge and look forward to the next one.

  2. #27
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    Nice challenge, Paul! PM Sent!

  3. #28
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by TheRaptor View Post
    Nice challenge, Paul! PM Sent!

    Thanks and well done as you have the correct answer also.

    Thanks for taking part and hope you had fun also.

  4. #29
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Thanks for taking part and hope you had fun also.
    Yes, really enjoyed this challenge! Can't wait for the next one!

  5. #30
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Last chance for any more entries as I'll wrap this up tomorrow and start a new one

  6. #31
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,179
    Mentioned
    234 Post(s)
    Tagged
    1 Thread(s)
    I'm looking forward to learn how it is done... since I never got it to perform correctly and only partially so obviously I'm missing something!

  7. #32
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Solution Time

    OK time to wrap this up now. I hope you enjoyed it and maybe learned something new in the process or perhaps honed your css skills a little more

    We've had a number of entries and all used similar techniques and it was hard to choose a winner but I've decided that Remon (ScallioXTX) should be awarded first place this time. Well done Remon .

    Congratulations also to all these who also had the correct answers.

    ralph.m, dresden_phoenix, Yurikolovsky, CletusSpuckler, SgtLegend, TheRaptor.

    (If I've missed anyone then please shout and I'll add you to the list.)

    How's It Done?


    I more or less gave the answer away in one of the clues earlier but the secret to the quiz was that its not possible to style a parent a list based on its child but we could style the child instead.

    You may think that perhaps that would be no use but we use the child element and add some pseudo content for our arrow and then we position the arrow back into the parent list.

    All we need to know is that the structure will always have a nested ul so to target only lists that have children we simply target li ul:before{content:""; etc......}. The rest is just calculating where to place the arrow depending on the method we used to hide the ul. For the arrow itselfyou could use background images or you could use mitred borders to create the arrow effect.

    If you used the off-left method to hide the dropdown then the arrow has to be offset from that hiding position to bring it back on screen. On hover the ul is brought back on screen so we must once again offset the arrow position to match.

    If you used the overflow method of hiding the dropdown then the calculations are easier because nothing is moved off screen and you only need to place the arrows where they need to be.

    Some of you may have tried the display:none method of hiding the nested ul but that would make the arrow invisible and therefore no use for this quiz as you can't make a child display when its parent is display:none (although the same isn't true when using visibility:hidden and that method would have been ok).

    For the eagle eyed among you may have seen in earlier posts that I have offered this solution a couple of times anyway.

    Solutions:

    Here's my original solution but I have added an expression (borrowed from Jason in another thread) to give IE6 and 7 the nice little arrow like other browsers (the javascript in the head is just for ie6's lack of hover).

    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" />
    <!--[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">
    body {
    	font: normal 11px verdana;
    }
    ul#nav, ul#nav ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    ul#nav li {
    	position: relative;
    	float: left;
    	width:149px;
    }
    #nav li ul {
    	position: absolute;
    	left: 0; 
    	top: auto;
    	margin-left:-999em;
    }
    #nav li  li{width:149px;}
    #nav li ul ul{
    	position: absolute;
    	left:100%;
    	top: -.1em;
    	margin-left:-999em;
    }
    
    /* Styles for Menu Items */
    ul#nav li a {
    	display: block;
    	text-decoration: none;
    	color: #777;
    	background: #fffccc; /* IE6 likes a background here */
    	padding: 5px 2em 5px 5px;
    	border: 1px solid #ccc;
    	zoom:1.0;
    }
    
    /* this sets all hovered lists to red */
    #nav li:hover a, #nav li.over a, #nav li:hover li:hover a, #nav li.over li.over a, #nav li:hover li:hover li:hover a, #nav li.over li.over li.over a, #nav li:hover li a:hover, #nav li.over li a:hover, #nav li:hover li:hover li:hover a:hover, #nav li.over li li a:hover, #nav li:hover li:hover li:hover li:hover a:hover, #nav li.over li.over li.over li.over a:hover {
    	color: #fff;
    	background-color: red;
    }
    /* set dropdown to default */
    #nav li:hover li a, #nav li.over li a, #nav li:hover li:hover li a, #nav li.over li.over li a, #nav li:hover li:hover li:hover li a, #nav li.over li.over li.over li a {
    	color: #777;
    	background: #fffccc;
    }
    #nav li ul li a {
    	padding: 4px 5px;
    } /* Sub Menu Styles */
    ul#nav li:hover ul ul, ul#nav li:hover ul ul ul, ul#nav li.over ul ul, ul#nav li.over ul ul ul {
    	margin-left:-999em;
    }
    ul#nav li:hover ul, ul#nav li li:hover ul, ul#nav li li li:hover ul,u#navl li li li li:hover ul, ul#nav li.over ul, ul#nav li li.over ul, ul#nav li li li.over ul {
    	margin-left:0;
    }
    
    ul#nav li ul:before,
    ul#nav li ul .before{
    	content:"";
    	display:block;
    	position:absolute;
    	top:-1.3em;
    	left:999em;
    	right:0;
      margin-left:127px;
    	width:0;
    	height:0;
    	z-index:9999;
    	border-left:.5em dashed transparent;
    	border-right:.5em dashed transparent;
    	border-top:.5em solid red;
    	clear:both
    }
    ul#nav li:hover ul:before,
    ul#nav li:hover ul .before,
    ul#nav li.over ul .before{
    	margin-left:0;
    	right:1em;
    	left:auto;
    	border-top:.5em solid #fff;
    }
    ul#nav li:hover li ul:before,
    ul#nav li:hover li:hover li ul:before,
    ul#nav li:hover li ul .before,
    ul#nav li:hover li:hover li ul .before,
    ul#nav li.over li ul .before,
    ul#nav li.over li.over li ul .before{
    	margin-left:997.5em;
    	left:0;
    	right:auto;
    	top:.7em;
    	border-left:.5em solid red;
    	border-bottom:.5em dashed transparent;
    	border-top:.5em dashed transparent;
    	overflow:hidden;
    	height:0;
    }
    ul#nav li:hover li:hover ul:before,
    ul#nav li:hover li:hover li:hover ul:before,
    ul#nav li:hover li:hover ul .before,
    ul#nav li:hover li:hover li:hover ul .before,
    ul#nav li.over li.over ul .before,
    ul#nav li.over li.over li.over ul .before{
    	border-left:.5em solid #fff;
    	left:-1.5em;
    	margin-left:0;
    }
    ul#nav li ul{
    zoom:expression(
    		runtimeStyle.zoom=1,
    		insertAdjacentHTML('beforeEnd','<span class="before"></span>')
    	);
    
    }
    
    </style>
    </head>
    <body>
    <ul id="nav">
    	<li><a href="#">Home</a></li>
    	<li><a href="#">About</a>
    		<ul>
    			<li><a href="#">History</a></li>
    			<li><a href="#">Team</a></li>
    			<li><a href="#">Offices</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Test</a></li>
    	<li><a href="#">Services</a>
    		<ul>
    			<li><a href="#">Web Design</a></li>
    			<li><a href="#">Internet Marketing</a></li>
    			<li><a href="#">testing</a>
    				<ul>
    					<li><a href="#">test 1</a></li>
    					<li><a href="#">test 2</a></li>
    					<li><a href="#">test 3</a></li>
    					<li><a href="#">testing</a>
    						<ul>
    							<li><a href="#">test 1</a></li>
    							<li><a href="#">test 2</a></li>
    							<li><a href="http://www.pmob.co.uk">PMOB</a></li>
    							<li><a href="#">test 4</a></li>
    							<li><a href="#">test 5</a></li>
    						</ul>
    					</li>
    					<li><a href="#">test 4</a></li>
    					<li><a href="#">test 5</a></li>
    				</ul>
    			</li>
    			<li><a href="#">Hosting</a></li>
    			<li><a href="#">Domain Names</a></li>
    			<li><a href="#">Broadband</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Contact Us</a>
    		<ul>
    			<li><a href="#">United Kingdom</a></li>
    			<li><a href="#">France</a></li>
    			<li><a href="#">USA</a></li>
    			<li><a href="#">Australia</a></li>
    		</ul>
    	</li>
    </ul>
    </body>
    </html>
    Remon:
    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" xml:lang="nl" lang="nl">
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    		<style type="text/css">
    			body, html {
    				margin: 0;
    				padding: 0;
    			}
    			
    			body {
    				margin: 30px;
    				font: 0.75em Arial;
    			}
    			
    			/** default menu styling **/
    			#nav, #nav ul, #nav li {
    				position: relative;
    				margin: 0;
    				padding: 0;
    				list-style-type: none;
    			}
    			
    			#nav a {
    				display: block;
    				text-decoration: none;
    				color: #777;
    				font-size: 12px;
    				width: 135px;
    				padding: 6px;
    			}
    			
    			#nav li {
    				background: #ffffcc;
    				border: 1px solid #ccc;
    				float: left;
    			}
    			
    			/** hide fly-outs initially **/
    			#nav li ul {
    				position: absolute;
    				top: -1000px;
    			}
    			
    			/** fly-out styling **/
    			#nav ul li {
    				display: block;
    				float: none;
    			}
    			
    			/** arrows **/
    			#nav > li > ul:after {
    				display: block;
    				position: absolute;
    				top: 1010px;
    				right: 5px;
    				border-style: solid;
    				border-width: 6px;
    				border-color: red #ffffcc #ffffcc #ffffcc;
    				content: '';
    			}
    			
    			#nav > li li > ul:after {
    				display: block;
    				position: absolute;
    				right: 2px;
    				top: 1007px;
    				border-style: solid;
    				border-width: 6px;
    				border-color: #ffffcc #ffffcc #ffffcc red;
    				content: '';
    			}
    			
    			/** show fly-outs on hover **/
    			#nav li:hover > ul {
    				position: absolute;
    				top: 100%;
    				left: -1px;
    			}
    			
    			/** hover styling **/
    			#nav li:hover > ul {
    				display: block;
    			}
    			
    			#nav li:hover {
    				background: #ff0000;
    			}
    			
    			#nav li:hover > a {
    				color: #ffffcc;
    			}
    			
    			#nav li li:hover > ul {
    				position: absolute;
    				left: 100%;
    				top: 0;
    			}
    			
    			#nav li li:hover > ul:before {
    				position: absolute;
    				left: 100%;
    				top: 0;
    			}
    			
    			/** hover arrows **/
    			#nav > li:hover > ul:after {
    				display: block;
    				position: absolute;
    				top: -16px;
    				right: 5px;
    				border-style: solid;
    				border-width: 6px;
    				border-color: #ffffcc red red red;
    				color: #fff;
    			}
    			
    			#nav > li li:hover > ul:after {
    				opacity: 1;
    				display: block;
    				position: absolute;
    				left: -12px;
    				top: 7px;
    				border-style: solid;
    				border-width: 6px;
    				border-color: red red red #ffffcc;
    				width: 0;
    				height: 0;
    				color: #fff;
    			}
    		</style>
    	</head>
    	<body>
    		<ul id="nav">
    			<li><a href="#">Home</a></li>
    			<li><a href="#">About</a>
    					<ul>
    							<li><a href="#">History</a></li>
    							<li><a href="#">Team</a></li>
    							<li><a href="#">Offices</a></li>
    					</ul>
    			</li>
    			<li><a href="#">Test</a></li>
    			<li><a href="#">Services</a>
    					<ul>
    							<li><a href="#">Web Design</a></li>
    							<li><a href="#">Internet Marketing</a></li>
    							<li><a href="#">testing</a>
    									<ul>
    											<li><a href="#">test 1</a></li>
    											<li><a href="#">test 2</a></li>
    											<li><a href="#">test 3</a></li>
    											<li><a href="#">testing</a>
    													<ul>
    															<li><a href="#">test 1</a></li>
    															<li><a href="#">test 2</a></li>
    															<li><a href="http://www.pmob.co.uk">PMOB</a></li>
    															<li><a href="#">test 4</a></li>
    															<li><a href="#">test 5</a></li>
    													</ul>
    											</li>
    											<li><a href="#">test 4</a></li>
    											<li><a href="#">test 5</a></li>
    									</ul>
    							</li>
    							<li><a href="#">Hosting</a></li>
    							<li><a href="#">Domain Names</a></li>
    							<li><a href="#">Broadband</a></li>
    					</ul>
    			</li>
    			<li><a href="#">Contact Us</a>
    					<ul>
    							<li><a href="#">United Kingdom</a></li>
    							<li><a href="#">France</a></li>
    							<li><a href="#">USA</a></li>
    							<li><a href="#">Australia</a></li>
    					</ul>
    			</li>
    		</ul>
    	</body>
    </html>
    ralph.m
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Arrows</title>
    	
    <style media="all">
    
    /* PMOB dropdown styles
    --------------------------------------------- */
    
    body {
    	font: normal 11px verdana;
    }
    
    ul#nav, ul#nav ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    
    ul#nav li {
    	position: relative;
    	float: left;
    	width:149px;
    }
    
    #nav li ul {
    	position: absolute;
    	left: 0; 
    	top: auto;
    	margin-left:-9999px;
    }
    #nav li  li{width:149px;}
    
    #nav li ul ul{
    	position: absolute;
    	left:100%;
    	top: -.1em;
    	margin-left:-9999px;
    }
    
    /* Styles for Menu Items */
    ul#nav li a {
    	display: block;
    	text-decoration: none;
    	color: #777;
    	background: #fffccc; /* IE6 likes a background here */
    	padding: 5px;
    	border: 1px solid #ccc;
    	zoom:1.0;
    }
    
    /* this sets all hovered lists to red */
    #nav li:hover a, #nav li.over a, #nav li:hover li:hover a, #nav li.over li.over a, #nav li:hover li:hover li:hover a, #nav li.over li.over li.over a, #nav li:hover li a:hover, #nav li.over li a:hover, #nav li:hover li:hover li:hover a:hover, #nav li.over li li a:hover, #nav li:hover li:hover li:hover li:hover a:hover, #nav li.over li.over li.over li.over a:hover {
    	color: #fff;
    	background-color: red;
    }
    
    /* set dropdown to default */
    #nav li:hover li a, #nav li.over li a, #nav li:hover li:hover li a, #nav li.over li.over li a, #nav li:hover li:hover li:hover li a, #nav li.over li.over li.over li a {
    	color: #777;
    	background: #fffccc;
    }
    
    #nav li ul li a {
    	padding: 4px 5px;
    }
    
    /* Sub Menu Styles */
    ul#nav li:hover ul ul, ul#nav li:hover ul ul ul, ul#nav li.over ul ul, ul#nav li.over ul ul ul {
    	margin-left:-9999px;
    }
    
    ul#nav li:hover ul, ul#nav li li:hover ul, ul#nav li li li:hover ul,u#navl li li li li:hover ul, ul#nav li.over ul, ul#nav li li.over ul, ul#nav li li li.over ul {
    	margin-left:0;
    }
    
    
    /* RM hover styles
    --------------------------------------------- */
    
    #nav li ul:before, #nav li li ul:before {
    	position: absolute;
    	display: inline-block; 
    	width: 0;   
    	height: 0; 
    	border-width: 5px;
    	content: ' ';
    }
    
    #nav li ul:before {
    	border-top-style: solid;
    	border-top-color: #f00;
    	border-bottom-style: solid;
    	border-bottom-color: transparent;
    	border-left-style: solid; 
    	border-left-color: transparent;
    	border-right-style: solid; 
    	border-right-color: transparent;
    } 
    
    #nav li li ul:before {      
    	border-top-style: solid;
    	border-top-color: transparent;
    	border-bottom-style: solid;
    	border-bottom-color: transparent;
    	border-left-style: solid; 
    	border-left-color: #f00;
    } 
    
    #nav li li ul:before {
    	top: 9px;
    	left: 9986px;
    } 
    
    #nav li ul:before {
    	top: -16px;
    	left: 10130px;
    } 
    
    #nav li:hover > ul:before {
    	border-top-color: #fff;
    	left: 131px;
    } 
    
    #nav li li:hover > ul:before {
    	left: -13px;
    	border-left-color: #fff;
    	border-top-color: transparent;
    }
    </style>	
    </head>
    
    
    <body>
    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a>
            <ul>
                <li><a href="#">History</a></li>
                <li><a href="#">Team</a></li>
                <li><a href="#">Offices</a></li>
            </ul>
        </li>
        <li><a href="#">Test</a></li>
        <li><a href="#">Services</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">Internet Marketing</a></li>
                <li><a href="#">testing</a>
                    <ul>
                        <li><a href="#">test 1</a></li>
                        <li><a href="#">test 2</a></li>
                        <li><a href="#">test 3</a></li>
                        <li><a href="#">testing</a>
                            <ul>
                                <li><a href="#">test 1</a></li>
                                <li><a href="#">test 2</a></li>
                                <li><a href="http://www.pmob.co.uk">PMOB</a></li>
                                <li><a href="#">test 4</a></li>
                                <li><a href="#">test 5</a></li>
                            </ul>
                        </li>
                        <li><a href="#">test 4</a></li>
                        <li><a href="#">test 5</a></li>
                    </ul>
                </li>
                <li><a href="#">Hosting</a></li>
                <li><a href="#">Domain Names</a></li>
                <li><a href="#">Broadband</a></li>
            </ul>
        </li>
        <li><a href="#">Contact Us</a>
            <ul>
                <li><a href="#">United Kingdom</a></li>
                <li><a href="#">France</a></li>
                <li><a href="#">USA</a></li>
                <li><a href="#">Australia</a></li>
            </ul>
        </li>
    </ul>
    </body>
    </html>
    dresden_phoenix
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
    	<head>
    		<title></title>
    		<style type="text/css">
    body {
    	font: normal 11px verdana;
    }
    ul#nav, ul#nav ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    ul#nav li {
    	position: relative;
    	float: left;
    	width:149px;
    }
    #nav li ul {
    	position: absolute;
    	left: 0; 
    	top: auto;
    	margin-left:-999em;
    }
    #nav li  li{width:149px;}
    #nav li ul ul{
    	position: absolute;
    	left:100%;
    	top: -.1em;
    	margin-left:-999em;
    }
    
    /* Styles for Menu Items */
    ul#nav li a {
    	display: block;
    	text-decoration: none;
    	color: #777;
    	background: #fffccc; /* IE6 likes a background here */
    	padding: 5px;
    	border: 1px solid #ccc;
    	zoom:1.0;
    }
    
    /* this sets all hovered lists to red */
    #nav li:hover a, #nav li.over a, #nav li:hover li:hover a, #nav li.over li.over a, #nav li:hover li:hover li:hover a, #nav li.over li.over li.over a, #nav li:hover li a:hover, #nav li.over li a:hover, #nav li:hover li:hover li:hover a:hover, #nav li.over li li a:hover, #nav li:hover li:hover li:hover li:hover a:hover, #nav li.over li.over li.over li.over a:hover {
    	color: #fff;
    	background-color: red;
    }
    /* set dropdown to default */
    #nav li:hover li a, #nav li.over li a, #nav li:hover li:hover li a, #nav li.over li.over li a, #nav li:hover li:hover li:hover li a, #nav li.over li.over li.over li a {
    	color: #777;
    	background: #fffccc;
    }
    #nav li ul li a {
    	padding: 4px 5px;
    } /* Sub Menu Styles */
    ul#nav li:hover ul ul, ul#nav li:hover ul ul ul, ul#nav li.over ul ul, ul#nav li.over ul ul ul {
    	margin-left:-999em;
    }
    ul#nav li:hover ul, ul#nav li li:hover ul, ul#nav li li li:hover ul,u#navl li li li li:hover ul, ul#nav li.over ul, ul#nav li li.over ul, ul#nav li li li.over ul {
    	margin-left:0;
    }
    li:hover a +ul:after {content:"^";  vertical-align: middle; line-height: 2.15; background: orange; position: absolute; top:-2.2em; left:0;right:auto; margin-left:139px}
    li a +ul:after {content:"<";  vertical-align: middle; line-height: 2.15; background: orange; position: absolute; top:-2.2em;  left:139px; margin-left:999em;}
    
    li:hover li:hover a +ul:after, li:hover  li:hover li:hover a +ul:after {content:"^";  vertical-align: middle; line-height: 2.15; background: orange; position: absolute; left:auto;right:100%; margin-left:0}
    
    li:hover li a +ul:after, li:hover li:hover li a +ul:after {content:"<";  top:1px; vertical-align: middle; line-height: 2.15; background: orange; position: absolute; left:1px;right:auto; margin-left:998em}
    		</style>
    	</head>
    	<body>
    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a>
            <ul>
                <li><a href="#">History</a></li>
                <li><a href="#">Team</a></li>
                <li><a href="#">Offices</a></li>
            </ul>
        </li>
        <li><a href="#">Test</a></li>
        <li><a href="#">Services</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">Internet Marketing</a></li>
                <li><a href="#">testing</a>
                    <ul>
                        <li><a href="#">test 1</a></li>
                        <li><a href="#">test 2</a></li>
                        <li><a href="#">test 3</a></li>
                        <li><a href="#">testing</a>
                            <ul>
                                <li><a href="#">test 1</a></li>
                                <li><a href="#">test 2</a></li>
                                <li><a href="http://www.pmob.co.uk">PMOB</a></li>
                                <li><a href="#">test 4</a></li>
                                <li><a href="#">test 5</a></li>
                            </ul>
                        </li>
                        <li><a href="#">test 4</a></li>
                        <li><a href="#">test 5</a></li>
                    </ul>
                </li>
                <li><a href="#">Hosting</a></li>
                <li><a href="#">Domain Names</a></li>
                <li><a href="#">Broadband</a></li>
            </ul>
        </li>
        <li><a href="#">Contact Us</a>
            <ul>
                <li><a href="#">United Kingdom</a></li>
                <li><a href="#">France</a></li>
                <li><a href="#">USA</a></li>
                <li><a href="#">Australia</a></li>
            </ul>
        </li>
    </ul>	
    </body>
    </html>
    Yurikolovsky

    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>YuriKolovsky - CSS Quiz 39</title>
    <style type="text/css">
    ul {
        margin:0;
        padding:0;
        list-style:none;
    }
    #nav {
        height: 24px;
    }
    #nav li {
        float:left;
        background:#FFFFCC;
        color:#777;
    }
    #nav a {
        color:inherit;
        width:147px;
        display:block;
        border:solid 1px #ccc;
        font-size:13px;
        font-family:arial;
        padding:3px;
        text-decoration:none;
    }
    #nav li li {
        clear:both;
    }
    #nav {
        position:relative;
    }
    #nav li {
        position:relative;
    }
    #nav ul {
        position:absolute;
       
    }
    #nav ul ul {
        left:100%;
        margin-top:-24px;
        background:blue;
    }
    /*I like this deathshadow method*/
    #nav li {
        overflow:hidden;
    }
    #nav li:hover {
        overflow:visible;
    }
    #nav li:hover {
        background:red;
        color:#fff;
    }
     
    #nav li:hover {
        background:red;
        color:#fff;
    }
    #nav ul:before {
        display:block;
        content:" ";
        width:0;height:0;
        position:absolute;
        z-index:1;
        top:-14px;
        left:138px;
        border: dashed 5px transparent;
        border-top: solid red 5px;
    }
    #nav li li ul:before,
    #nav li li:hover li ul:before {
        top:8px;
        left:-12px;
        border: dashed 5px transparent;
        border-left: solid red 5px;
    }
    #nav li:hover ul:before {
        border-top-color:#fff;
    }
    #nav li li:hover ul:before,
    #nav li li li:hover ul:before {
        border-top-color:transparent;
        border-left-color:#fff;
    }
    </style>
    </head>
    <body>
    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a>
            <ul>
                <li><a href="#">History</a></li>
                <li><a href="#">Team</a></li>
                <li><a href="#">Offices</a></li>
            </ul>
        </li>
        <li><a href="#">Test</a></li>
        <li><a href="#">Services</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">Internet Marketing</a></li>
                <li><a href="#">testing</a>
                    <ul>
                        <li><a href="#">test 1</a></li>
                        <li><a href="#">test 2</a></li>
                        <li><a href="#">test 3</a></li>
                        <li><a href="#">testing</a>
                            <ul>
                                <li><a href="#">test 1</a></li>
                                <li><a href="#">test 2</a></li>
                                <li><a href="http://www.pmob.co.uk">PMOB</a></li>
                                <li><a href="#">test 4</a></li>
                                <li><a href="#">test 5</a></li>
                            </ul>
                        </li>
                        <li><a href="#">test 4</a></li>
                        <li><a href="#">test 5</a></li>
                    </ul>
                </li>
                <li><a href="#">Hosting</a></li>
                <li><a href="#">Domain Names</a></li>
                <li><a href="#">Broadband</a></li>
            </ul>
        </li>
        <li><a href="#">Contact Us</a>
            <ul>
                <li><a href="#">United Kingdom</a></li>
                <li><a href="#">France</a></li>
                <li><a href="#">USA</a></li>
                <li><a href="#">Australia</a></li>
            </ul>
        </li>
    </ul>
    </body>
    </html>

    CletusSpuckler

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS - Test Your CSS Skills Number 39 - dropdown arrows</title>
    <style>
    body {
    	background: #fff;
    	color: #000;
    	font: 14px/1.5 sans-serif;
    }
    
    #nav,
    #nav ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    
    #nav li {
    	position: relative;
    	width: 140px;
    }
    
    #nav > li {
    	float: left;
    }
    
    #nav ul {
    	left: -9000px;
    	position: absolute;
    }
    
    #nav ul ul {
    	top: 0;
    }
    
    #nav li:hover > ul {
    	left: 0;
    }
    
    #nav ul li:hover > ul {
    	left: 140px;
    }
    
    #nav a {
    	background: #ffc;
    	color: #000;
    	display: block;
    	padding: 6px;
    	text-decoration: none;
    }
    
    #nav a:hover,
    #nav li:hover > a {
    	background: #d0dde0;
    }
    
    #nav a + ul:before {
    	border: 6px solid transparent;
    	border-top-color: #000;
    	content: "";
    	height: 0;
    	left: 9124px;
    	position: absolute;
    	top: -18px;
    	width: 0;
    }
    
    #nav ul a + ul:before {
    	border-top-color: transparent;
    	border-left-color: #000;
    	left: 9128px;
    	top: 10px;
    }
    
    #nav li:hover > a + ul:before {
    	left: 124px;
    }
    
    #nav ul li:hover > a + ul:before {
    	left: -12px;
    }
    </style>
    </head>
    
    <body>
    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a>
            <ul>
                <li><a href="#">History</a></li>
                <li><a href="#">Team</a></li>
                <li><a href="#">Offices</a></li>
            </ul>
        </li>
        <li><a href="#">Test</a></li>
        <li><a href="#">Services</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">Internet Marketing</a></li>
                <li><a href="#">testing</a>
                    <ul>
                        <li><a href="#">test 1</a></li>
                        <li><a href="#">test 2</a></li>
                        <li><a href="#">test 3</a></li>
                        <li><a href="#">testing</a>
                            <ul>
                                <li><a href="#">test 1</a></li>
                                <li><a href="#">test 2</a></li>
                                <li><a href="http://www.pmob.co.uk">PMOB</a></li>
                                <li><a href="#">test 4</a></li>
                                <li><a href="#">test 5</a></li>
                            </ul>
                        </li>
                        <li><a href="#">test 4</a></li>
                        <li><a href="#">test 5</a></li>
                    </ul>
                </li>
                <li><a href="#">Hosting</a></li>
                <li><a href="#">Domain Names</a></li>
                <li><a href="#">Broadband</a></li>
            </ul>
        </li>
        <li><a href="#">Contact Us</a>
            <ul>
                <li><a href="#">United Kingdom</a></li>
                <li><a href="#">France</a></li>
                <li><a href="#">USA</a></li>
                <li><a href="#">Australia</a></li>
            </ul>
        </li>
    </ul>
    </body>
    </html>
    TheRaptor
    Code here.

    SgtLegend
    zip here


    Thanks to all the above for taking part and making this an interesting quiz.

    Watch out for the new quiz which will follow tomorrow.

  8. #33
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Thanks for posting the explanation and solutions, Paul. It's fascinating to compare answers.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #34
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Thanks for posting the explanation and solutions, Paul. It's fascinating to compare answers.
    Indeed it was, its nice to see more correct answers for myself as it helps to see why i struggled so much with something so simple

  10. #35
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    New quiz Posted

    (If you think you are tough enough )

  11. #36
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,179
    Mentioned
    234 Post(s)
    Tagged
    1 Thread(s)
    I'll need to study this a little. Although my approach was very similar, it didn't work properly. Close, but not well enough. I even targeted a+ul to style, and I used :before!

    I need to compare my no-solution with the real one


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
  •