css vertical dropdown menu

[daya]

If am trying to create my first dropdown menus with css. I'm obviously doing something wrong. Can anybody offer some help to figure it out.

Here's the url for the test page:
http://anythingonmaui.com/index-testmenu-daya.html
(the menu is in the left column and to the right is a graphic showing what it is I am trying to achieve in the over state.

Here is the style sheet for the menu.

ul {
margin: 0;
padding: 0;
list-style: none;
width: 140px;
border-bottom: 1px solid #fff;
font-size: 10px;
font-weight: bold;
color: #77bb00; }

ul li {
position: relative;
padding-bottom: 5px;
}

li ul {
position: absolute;
background: #bbdd99;
left: 139px;
top: 5px;
display: none;
}

ul li a {
display: block;
text-decoration: none;
border: 1px solid #fff;
border-bottom: 0;
padding-left: 10px;
}

li:hover ul {
display: block;
color: #dd6600; }


Any advice would be much appreciated.

Thank you. Aloha

[DeafNLoud]

ok just to clarify this...your menu DOES work within Mozilla brands but does NOT work within IE brands. This is simply because IE does NOT support the :hover on anything else other than anchor links.

You are going to have to use either Javascript to fix this or the IE behavior trick.

Go to http://www.htmldog.com/articles/suckerfish/dropdowns/ which is the page for the "Suckerfish" menus which has the necessary information that you need.

HTH,

Michael

[trinity0159]

DeafNLoud is right about needing Javascript to substitute for the :hover command. You also need a couple more selectors to achieve the look you want.

/* Keeps the hover over the parent menu while hovering through the child menu*/
li:hover li a:hover {background-color: #DBEDC9} 

/* Sets the the intial state of the dropdown back to default until it's hover overed again*/
li:hover li a{background-color: #BBDD99}

Let me know if you have any questions.

Katrina

[daya]

Hi,
Thanks for the feedback. I am working on a Mac so I'm not having the IE problem. I was aware of it and am putting off dealing with that until I get everything else functioning.

What I'm having trouble with is stylizing my buttons to looking like the image at the right of my page (in the over state). I know this is very basic but I just can't figure it out.

I want the buttons to be green in the normal state--rollover to a green background and white type.

Then the subcategories--they are looking ok except when a button is rolled over the background should change to a lighter green.

Also, I would like the type to be center vertically within the boxes and in the rollover state to have the boxes line up horizontally. (see graphic on right side of page) You'll see that now the boxes on the right (subcategories) are dropped down a bit.

http://anythingonmaui.com/index-testmenu-daya.html

I know that very soon this is all going to make to sense to me but at the moment it's quite confusing.

Thanks for your help.

Aloha. Daya
design@dayaceglia.com

[trinity0159]

Daya,

Like I said earlier you need a few more specific selectors to get the menu working the way you want it to work. I changed some of the css and added an ID tag to all of them to make sure that the menu list was the only one inheriting the style properties.

To your main page just add <DIV id="menu"> (You had <DIV id=menu>) and copy the css below. I've checked it and it should work for all browsers except for IE.

#menu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	width: 150px;
}
#menu li {
	margin: 0px;
	padding: 0px;
	height: 1.1em;
   	line-height: 1.1em; /* Vertically centers text */
	width: 150px;
}
#menu ul li ul {
	position: absolute;
	left: 151px;
	top: 0px;
	display: none;
	width: 180px;
}
#menu li ul li {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
	width: 180px;
	height: 1.5em;
   	line-height: 1.5em; /* Vertically centers text */
}

#menu a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	padding-left: 10px;
	color: #336600;
	display: block;
}
#menu li:hover a {
	color: #FFFFFF;
	background-color: #77BB28;
}
/* Keeps the hover over the parent menu while hovering through the child menu*/
#menu li:hover li a:hover{
	background-color: #DDEEC9;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
}

/* Sets the the intial state of the dropdown back to default until it's hovered over again*/
#menu li:hover li a{
	color: #000000;
	background-color: #BBDD93;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
}

/* Places the list next to the parent list */
#menu ul li:hover{
   position: relative;
}

#menu li:hover ul{
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
} 

/* HTML Hacks */
* html #menu ul li { float: left; height: 1%; }
* html #menu a {height: 1%; /* to make display: block work properly */ }

Let me know if you have any more questions.

Trinity

[daya]

Thanks Trinity for your help.

I am making some progress but still a ways to go. Here's my new style sheet:

http://anythingonmaui.com/menu-trinity.css

(I even named it after you)

And, here's my new test page: http://anythingonmaui.com/index-testmenu-daya1.html

As you'll see I'm having some trouble with the positioning. In the rollover state I would like for the dark green box and the lighter green box on the right to line up horizontally. Is that possible.

And I would like for the subcategory box (lighter green) to line up with the righthand edge of the main category box (dark green).

Also the subcategory text is not showing in the normal state--it should only show in the over state.

Other then that everything is lookin' good.

Thanks for your help.

Aloha. Daya
design@dayaceglia.com

[trinity0159]

The problem seems to be the coding on your test page. Just copy and paste the coding below where the menu needs to be and it should work exactly the way you want it to.

 
<div id="menu">
	  <ul>
	   <li><a href="#">Home</a>
	   <li><a href="#">Accommodations</a>
	   <ul>
		<li><a href="htmls/bestpicks.html">Apartments</a>
		<li><a href="#">Hotels</a>
		<li><a href="#">Bed &amp; Breakfast</a>
		<li><a href="#">Camping</a>
		<li><a href="#">Condos</a>
		<li><a href="#">Hostels</a>
		<li><a href="#">Hotels</a>
		<li><a href="#">Houses</a>
		<li><a href="#">Resorts</a>
	   </ul>
	   </li>
	   <li><a href="#">Activities/Attractions</a>
	   <ul>
		<li><a href="#">Beaches/Parks</a>
		<li><a href="#">Excursions</a>
		<li><a href="#">Golf</a>
		<li><a href="#">Hiking</a>
		<li><a href="#">Horseback Riding</a>
		<li><a href="#">Museums/Cultural Centers</a>
		<li><a href="#">Places of Interest</a>
		<li><a href="#">Scuba/Snorkeling</a>
		<li><a href="#">Other Activities</a>
	   </ul>
	   </li>
	   <li><a href="#">Entertainment</a>
	   <ul>
		<li><a href="#">Cinemas</a>
		<li><a href="#">Luaus</a>
		<li><a href="#">Music</a>
		<li><a href="#">Nightspots/Dancing</a>
		<li><a href="#">Theater Shows</a>
	   </ul>
	   </li>
	   <li><a href="#">Restaurants/Catering</a>
	   <ul>
		<li><a href="#">Asian</a>
		<li><a href="#">Bakeries</a>
		<li><a href="#">Bar &amp; Grill</a>
		<li><a href="#">Continental</a>
		<li><a href="#">Family</a>
		<li><a href="#">Fish/Seafood</a>
		<li><a href="#">Hawaiian/Plate Lunch</a>
		<li><a href="#">Latin/Mexican</a>
		<li><a href="#">Pacific Rim</a>
		<li><a href="#">Steak Houses</a>
		<li><a href="#">Coffee Shops</a>
		<li><a href="#">Other Restaurants</a>
	   </ul>
	   </li>
	   <li><a href="#">Weddings/Events</a>
	   <ul>
		<li><a href="#">Clergy/Ministers</a>
		<li><a href="#">Consultants/Planners</a>
		<li><a href="#">Flowers/Florists</a>
		<li><a href="#">Formal Wear</a>
		<li><a href="#">Honeymoon</a>
		<li><a href="#">Licenses</a>
		<li><a href="#">Limousines</a>
		<li><a href="#">Photographers</a>
	   </ul>
	   </li>
	   <li><a href="#">Shopping</a>
	   <ul>
		<li><a href="#">Apparel</a>
		<li><a href="#">Appliances</a>
		<li><a href="#">Art Galleries</a>
		<li><a href="#">Automotive</a>
		<li><a href="#">Centers/Malls</a>
		<li><a href="#">Drug Stores</a>
		<li><a href="#">Furniture</a>
		<li><a href="#">Gifts</a>
		<li><a href="#">Hawaiian Arts &amp; Crafts</a>
		<li><a href="#">Markets/Organic Foods</a>
		<li><a href="#">Sports</a>
		<li><a href="#">Airlines</a>
		<li><a href="#">Other Stores</a>
	   </ul>
	   </li>
	   <li><a href="#">Travel/Transportation</a>
	   <ul>
		<li><a href="#">Airlines</a>
		<li><a href="#">Automobile Rental</a>
		<li><a href="#">Cruises</a>
		<li><a href="#">Limousines</a>
		<li><a href="#">Shipping/Storage</a>
		<li><a href="#">Taxis/Shuttles</a>
		<li><a href="#">Tours/Excursions</a>
		<li><a href="#">Travel Agencies</a>
	   </ul>
	   </li>
	   <li><a href="#">Health/Wellness</a>
	   <ul>
		<li><a href="#">Alternative Healers</a>
		<li><a href="#">Coaching/Counseling</a>
		<li><a href="#">Doctors/Dentists</a>
		<li><a href="#">Fitness/Exercise</a>
		<li><a href="#">Massage</a>
		<li><a href="#">Nutrition/Weight Management</a>
		<li><a href="#">Spas/Health Centers</a>
		<li><a href="#">Veterinarians</a>
		<li><a href="#">Yoga</a>
	   </ul>
	   </li>
	   <li><a href="#">Real Estate</a>
	   <ul>
		<li><a href="#">Agents</a>
		<li><a href="#">Mortgages</a>
		<li><a href="#">Resources</a>
		<li><a href="#">Title Companies</a>
	   </ul>
	   </li>
	   <li><a href="#">Business Services</a>
	   <ul>
		<li><a href="#">Beauty Salons &amp; Services</a>
		<li><a href="#">Accounting</a>
		<li><a href="#">Advertising/Publicity</a>
		<li><a href="#">Attorneys</a>
		<li><a href="#">Automotive</a>
		<li><a href="#">Banks/Mortgages</a>
		<li><a href="#">Builders/Contractors</a>
		<li><a href="#">Cleaning/Maintenance</a>
		<li><a href="#">Computers</a>
		<li><a href="#">Copying/Printing</a>
		<li><a href="#">Electrical/Plumbing</a>
		<li><a href="#">Employment</a>
		<li><a href="#">Interior Decorating</a>
		<li><a href="#">Landscaping/Gardening</a>
		<li><a href="#">Office Supplies/Equipment</a>
		<li><a href="#">Rentals</a>
		<li><a href="#">Tax Consultants/Preparation</a>
		<li><a href="#">Other Services</a>
	   </ul>
	   </li>
	   <li><a href="#">Education</a>
	   <ul>
		<li><a href="#">Colleges/Universities</a>
		<li><a href="#">Continuing Education</a>
		<li><a href="#">Nursery/Preschool</a>
		<li><a href="#">Primary/Secondary</a>
		<li><a href="#">Professional Education Training</a>
	   </ul>
	   </li>
	   <li><a href="#">Community Services</a>
	   <ul>
		<li><a href="#">12-Step Programs</a>
		<li><a href="#">Associations/Clubs</a>
		<li><a href="#">Churches</a>
		<li><a href="#">Government Offices</a>
		<li><a href="#">Programs/Services</a>
		<li><a href="#">Social Services/Welfare</a>
		<li><a href="#">Organizations</a>
		<li><a href="#">Women</a>
		<li><a href="#">Youth</a>
	   </ul>
	   </li>
	  </ul>
	 </div>

Katrina

[daya]

Thank you, thank you, thank you Katrina. I hope I can figure this all out so that I can do it myself next time.

Aloha. Daya

[trinity0159]

You're Welcome.