This is a forum where members new and old can come to ask questions and get info and opinions. It is not a place to advertise your business or have other forms of advertising, whether it be in your posts or signature.

All links in the forum will not be indexed by Search Engines and any unapproved forms of advertising or spam will be dealt with accordingly, deleted, and that member's account banned.

Forums

Overview » Dreamweaver » How to create a horizontal menu

How to create a horizontal menu
Jason Calvert Member Since: 09 Jan 2007 Posts: 9	Posted 04 Mar 2007 02:45:51 I want to create a horizontal menu simular to the Cozumel website - www.islacozumel.com.mx/ The menu running horizontal across the page. Maybe "ABOUT" has sub categories like contact, history, etc. I'd like a mouse over that would display them horizontaly below the main links. How do you go about creating this? I want to create a horizontal menu simular to the Cozumel website - www.islacozumel.com.mx/ The menu running horizontal across the page. Maybe "ABOUT" has sub categories like contact, history, etc. I'd like a mouse over that would display them horizontaly below the main links. How do you go about creating this?

How to create a horizontal menu

Jason Calvert
Member

Since: 09 Jan 2007
Posts: 9

Posted 04 Mar 2007 02:45:51

I want to create a horizontal menu simular to the Cozumel website - www.islacozumel.com.mx/

The menu running horizontal across the page. Maybe "ABOUT" has sub categories like contact, history, etc. I'd like a mouse over that would display them horizontaly below the main links. How do you go about creating this?

I want to create a horizontal menu simular to the Cozumel website - www.islacozumel.com.mx/

The menu running horizontal across the page. Maybe "ABOUT" has sub categories like contact, history, etc. I'd like a mouse over that would display them horizontaly below the main links. How do you go about creating this?

Javier Castro Total freaking Member Since: 09 Sep 2004 Posts: 454	Replied 04 Mar 2007 05:20:11 Have you tried the popup menu in DWeaver? It works for me. Also you can check at some CSS based menus. Just Google, CSs horizontal menu. Check here for CSS menus of all flavours: www.cssplay.co.uk/menus/index.html

Jason Calvert Locked Member Since: 09 Jan 2007 Posts: 9	Replied 04 Mar 2007 06:12:13 Thanks for the reply. I've tried the pop-menu in DW but I can't get it to work. I tested it with just a text link in a table on a blank page and it works. But it doesn't work on the page that is already complete. I have a nav div for my navigation and when I use the same settings from the test I did, it doesn't work. I'm going to try your CSS suggestion. Thanks

Jason Calvert Locked Member Since: 09 Jan 2007 Posts: 9	Replied 07 Mar 2007 21:12:10 I've created a basic horizontal CSS menu but can't get the sub menus to display in a line. I can get them as a verticle list but not as a horizontal one. Here is the code, if anyone can help HTML <body> <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">ITEM ONE</a></li> <li><a href="#">ITEM TWO</a> <ul id="subnavlist"> <li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li> <li><a href="#">Subitem two</a></li> <li><a href="#">Subitem three</a></li> <li><a href="#">Subitem four</a></li> </ul> </li> <li><a href="#">ITEM THREE </a></li> <li><a href="#">ITEM FOUR</a></li> <li><a href="#">ITEM FIVE </a></li> <li><a href="#">ITEM SIX </a></li> <li><a href="#">ITEM SEVEN </a></li> <li><a href="#">ITEM EIGHT </a></li> <li><a href="#">ITEM NINE </a></li> </ul> </div> </body> CSS ul#navlist { white-space: nowrap; margin: 0; padding: 0; } #navlist li { display: inline; list-style-type: none; } #navlist a { padding: 2px 5px; } #navlist a:link { color: #000000; text-decoration: none; font: bold 10px Verdana, Arial, Helvetica, sans-serif; border-right: 1px solid #000000; } #navlist a:visited { color: #990000; text-decoration: none; font: bold 10px Verdana, Arial, Helvetica, sans-serif; } #navlist a:hover { color: #006600; text-decoration: none; font: bold 12px Verdana, Arial, Helvetica, sans-serif; } ul#subnavlist { display: none; } ul#subnavlist li { float: none; } ul#subnavlist li a { padding: 0px; margin: 0px; } ul#navlist li:hover ul#subnavlist { display: block; position: absolute; font-size: 8pt; padding-top: 5px; } ul#navlist li:hover ul#subnavlist li a { display: block; width: 10em; border: none; padding: 2px; } ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; }

Jason Calvert Locked Member Since: 09 Jan 2007 Posts: 9	Replied 07 Mar 2007 21:23:02 Just got it to work. I deleted the last line of code in CSS file and its working fine now. Whats weird is that I put it back in and the menu is working with that now as well. I've noticed that sometimes I get these weird glitches with dreamweaver 8. Is anyone else having weird things going on with 8?

Jason Calvert Locked Member Since: 09 Jan 2007 Posts: 9	Replied 07 Mar 2007 22:54:22 Hey guys, I have one more issue. I can't seem to get the different sub listings to line up under the main links. The link to the far right has its listings pop up over on the far left. How could I fix this?