Can some super awesome person give me some CSS help :)

Soldato
Joined
5 Feb 2006
Posts
3,524
afternoon all.

so, im trying to create a drop down menu : http://imgur.com/a/0xPyt the top is what i would like it to look like, the bottom is where ive got so far. I haven't managed to do this all on my own, im not that smart. instead of tried to bodge together some tutorials / examples.

here be my code :

Code:
#nav {
	z-index:5;
	position:relative;
	margin-left:20px;
}

#nav li {
	float: left;
	list-style: none;
	display: block;
	padding: 5px 40px;
	margin-right: 10px;
	background: #000;
	color: #FFF;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
border-radius: 15px;

margin-top:13px;
position:relative;
	
}


#nav li li {
	padding:0px 0px;
	margin-top:0px;
	border-bottom:dashed #FFFFFF thin;
	width:auto;
	
}

#nav a{
	display:block;
	padding:5px;
	color:#fff;
	background:#000; /* --- CHANGE COLOUr hERE */
	text-decoration:none;
}

#nav a:hover{
	color:#fff;
	background:#000;
	text-decoration:underline;
}

#nav ul{
	background:#fff;
	background:rgba(255,255,255,0);
	list-style:none;
	position:absolute;
	left:-9999px;
}
#nav ul li {
	
    float:none;
}

#nav ul a {
	white-space:nowrap;
}

#nav li:hover ul {
	left:0;
}

#nav li:hover a {
	text-decoration:underline;
	background:#000;
}

#nav li:hover ul a {
	text-decoration:none;
}

#nav li:hover ul li a:hover {
	background:#000;
	text-decoration:underline;
}

What am i doing wrong ?? :confused: :mad: :)
 
Sorry for the delayed reply gents,

I tried to do multi quote reply but for some reason it wouldn't do all of them, is there a limit ?

So any way :)

- I got the original image sent through to me from a designer.

- I do have skype, thank you for the offer ( i presume you meant to help :P ) or maybe a saucy peep show .... ?


- Wasn't aware of this JSfiddle place. thanks for the heads up. could come in useful

- That looks awesome. thanks so much mate. Its only going to be me updating it. so they can't break it. Can't thank you enough for taking the time.

many internet cookies to you!
 
ran into a slight snag. probably due to lack of brain capacity.

when trying to add the next button along it lines it up under neath instead of a horizontal line across. im probably being really stupid :/

i did this to add another one in the html http://jsfiddle.net/uBBhC/ this stuff confuses the hell out of me :/
 
hey guys, im back :)

so. I've discovered a problem. if there isn't a sub menu beneath the top ones it still does it as if it was. you can see it here : http://jsfiddle.net/cFM7X/ it obviously does this as I've told it too. is there something cheeky and small that i can add that will stop it doing if its just one menu button. The first / last child things mildly transformed my life :)
 
Hi guys, I'm back


One last question I swear. So everything above is working awesomely so thanks so much for that. The last thing that I've realised is our good old friend mobile devices. I only have one menu that actually drops down now. However. when clicking on it it doesn't stay open on a phone as its using the :hover. So, how does one get around this little conundrum ?
 
Hi Guys,

so i did some digging and i found this : http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly.

seems simple enough for an idiot like me to sort out. However, I can't seem to get it to work.

the site is currently sitting at www.inkslinger.co.uk/calibre/ From my limited knowledge i read the javascript as going. looking in the div called nav ( #nav ) If there is a li that has a ul as a child. then run the script. So why doesn't it do it :/

I've tried testing it on my phone. WP and my GF's android. and no joy :(
 
hmmm, thats weird. I only have it on the main index page for the moment. just testing it.

this is how i have it.

to my limited knowledge, this should load it in. then activate it.

<script type="text/javascript" src="js/doubletaptogo.js"></script>
<script tpye="text/javascript">
$( function()
{
$( '#nav li:has(ul)' ).doubleTapToGo();
});
</script>

does it have to be any where specific like in the head tags or anything ?
 
shameless bump, any one have any ideas on this. It's driving me mad. I'm even trying to do media queries, which i know is probably the right way. I'm just not experienced enough to work out the css. Even trying that is driving me nuts, works in Dreamweaver but not in chrome, why the hell is that!

any way. any idea about that little bit of javascript ? would make my life less suicidal
 
Back
Top Bottom