I’m using div’s for the main navigation of my site and want to create a drop down for the first two buttons. All the tutorials I have seen have been for using unordered lists but I need to use divs for this navigation set as I they were better to control in this case.
Can anyone help me get them set up please? Ideally I would like the drop downs to fade in but it’s not essential. I take it I need to create an absolutely positioned div where I want my drop downs to appear, is that correct? - but then where do I go from there?
I need to use divs for this navigation set as I they were better to control in this case.
No you don’t and there is little difference in "controlling " DIVs vs UL/LI’s. In fact, LI adds semantic structure and element levels for wich you’d otherwise have to add class to your DIVs to obtain. ALSO, since you are using jQuery (for the fade out’s) you can target te effects via he same selectors you use in your CSS, although I dunno how accessible jQuery fades are, but that can be dealt with later.
Essentially, your submenu is the UL within an LI ( LI UL)
<!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">
.root, .root ul {padding:0; margin:0}/* you dont need this if you used a your general reset*/
.root a {display:block; padding:10px;
/* width 10em;*//* this is optional if you wnt to restrict the width of your submenu*/
}
.root li {float: left; list-style: none; }
.root li li{float: none; position: relative }
.root {background: pink; overflow: hidden; padding:0}
.root li ul{background: orange; position: absolute; top:100%; left:-9999em; overflow: visible }
#nav {position: relative}
.root li:hover ul{left:auto; color:red; }
.root li:hover {background: orange}
.root li li:hover {background: pink}
</style>
</head>
<body>
<div id="nav">
<ul class="root" >
<li><a href="index.php">Services</a>
<ul>
<li><a href="#">Item</a>
<li><a href="#">Some longer item</a>
<li><a href="#">Item</a>
<li><a href="#">Item</a>
<li><a href="#">Item</a>
</ul>
</li>
<li><a href="profile.php">Cars</a>
<ul>
<li><a href="#">Item</a>
<li><a href="#">Some longer item</a>
<li><a href="#">Item</a>
<li><a href="#">Item</a>
<li><a href="#">Item</a>
</ul>
</li>
<li><a href="news.php">Calendar</a></li>
<li><a href="gallery.php">Gallery</a></li>
<li><a href="video.php">Video</a></li>
<li><a href="partners.php">Partners</a></li>
</ul></div>
</body>
just incorporate this into your CSS and your markup.
I removed the overflow:hidden and added a clear:both like you suggested.
The only thing now is that the drop down lists are not displaying the correct colours as they used to and they don’t stay down when I hover over them. Do you have any ideas?
Looks like all you need to do is change the position:relative on .root li li{} to position:static. Pretty sure that’s all you’d need to change :). At college right now so I’m unable to really do any tests.
So now the things that I don’t understand is why the background image for the main buttons is not lining up (the li’s are set to 166px width, the same as the background image) and why the drop down boxes don’t appear in the set styles.
Sorry, the background images for the main buttons (which are kind of like breaks between each of the buttons) are 166px in width - the same 166px that the widths of the buttons are set to, but I don’t understand why they are not lining up with eachother. It looks like the background images are repeating themselves.
You can always set the background image to not repeat. I opened the image in a tab and I must say I didn’t even think the image was loading for some reason.
The reason it looks “doubled” up is because each anchor (via first-child) has an extra image set on it.
You can assign the first anchor in the list a class, and assign the special image that way :).
I’ve gone to the page you’ve given us, and not a single change has been uplaoded on there (from what I see). Your page has had too many changes for me to do them all again in my local tester AND THEN go find out your current issue.
I have to go to class now. I have a computer class in 90 minutes so I’ll be back on here during then :).
Yeah, what I was talking about is that there should be a line to the left of the ‘Services’ button but it seems to have disappeared when I changed…
.root a:first-child
…to…
.root li li:first-child
…but I found it should be…
.root li:first-child
Just checked it all in Safari and Chrome and the drop downs don’t appear for some reason. The drop down lists are there because you can see the cursor changes to a hand, but they don’t don’t appear visible. Is there a fix do you know? - I tried visability:visible and overflow:visible on a couple of elements but it didn’t work - it actually made them not appear at all!
!).