homepage Welcome to WebmasterWorld Guest from 54.225.24.227
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Horizontal Dropdown Menu For a CSS Beginner
lloyd




msg:3920707
 3:17 am on May 27, 2009 (gmt 0)

My background is in online marketing, but I am now trying to design my own website, but I have now hit a brick wall.

I am writing a smallish website so as I am learning I am writing it all in notepad. What I am trying to write is a horizontal menu with drop down sub categories.

I have looked at many tutorials, but for some reason nothing seems to be working, ie I can not get the sub categories to display/dropping down. The site is not live and all testing is done on my c: drive.

Does anyone have any examples that will work in my testing. I'm not interested in templates and Javascript. I am trying to learn it all in CSS.

Help greatly welcomed.

Many thanks.

 

tangor




msg:3920718
 4:01 am on May 27, 2009 (gmt 0)

For some things it is not a bad idea to look at working examples and take them apart to learn how it was done. Suckerfish is not a bad place to start.

enigma1




msg:3921471
 8:32 am on May 28, 2009 (gmt 0)

Here is an example of a simple hz css menu, that should work if you save it to a file and then load it with a browser.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>test form</title>
<style type="text/css">

#menu {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
}
#menu ul {
padding: 0px;
margin: 0px;
width: 800px;
list-style-type: none;
}

#menu ul li {
position: relative;
width: 200px;
}

#menu li {
float: left;
width: 100%;
background: #990;
border-top: #555 1px solid;
}

#menu li ul li {
float: none;
}

#menu a {
color: #EFEFEF;
width: 200px;
text-indent: 4px;
line-height: 25px;
display: block;
text-decoration: none;
}

#menu a:hover {
color: #FFFFFF;
background-color: #FF0000;
}

#menu ul li ul {
visibility: hidden;
position: absolute;
left: 0;
top: 100%;
}

#menu ul li:hover ul {
visibility: visible;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#Bar1">Bar1</a>
<ul>

<li><a href="#Sub1">Sub1</a></li>
<li><a href="#Sub2">Sub2</a></li>
</ul>
</li>
<li><a href="#Bar2">Bar2</a>
<ul>
<li><a href="#Sub3">Sub3</a></li>

<li><a href="#Sub4">Sub4</a></li>
</ul>
</li>
<li><a href="#Bar4">Bar3</a></li>
</ul>
</div>
</body>
</html>

Lots of the online examples only list the basic HTML and CSS and in many cases it's dependent on the main HTML/stylesheet of the tutorial page which is hard for beginners. So you need the main headers (a separate document is much better).

swa66




msg:3921620
 12:27 pm on May 28, 2009 (gmt 0)

Just know that you can't make this work in IE6 unless you add some scripting as IE6 doesn't support :hover over anything but an <a> element.

My weapon of choice in this is IE7.js (fixes a truckload of other problesm with IE6 as well)

In th epast I've had a few issues with "visibility: hidden" not being willing to turn back visible n some browsers (I think Opera -some version- is doing this). It's probably easier to use display:none instead.

enigma1




msg:3921658
 1:27 pm on May 28, 2009 (gmt 0)

Actually you don't need js at all to make it show on IE6. It can show the same way, but you do need a bunch of additional css and the use of the if IE versions checks in the html. And it's also w3c compliant.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved