kizzycocoa

Absolutely perfect! fixed all my issues! Thanks a lot!! ^^

Where exactly do I place that in the CSS? What section? Also huh, I didn't know! I'm sorta newish to these kinds of menus.

yeah, it's not compatable in IE7 right now. I'm looking into it, but it's such an old version by now, I'm probably going to glaze over it.RE the issue, I want the entire <li> to be linkable. putting <a> tabs around the <li> tags. Otherwise, you need to click specifically on the word, as opposed to the entire box. It works fine for all submenu items, but as soon as I try it for the parent, it overrides all the child li tags!For example: <ul><a href="https://www.google.com" target="_blank"><li style="width:130px">Home</li></a> <a href="https://www.google.com" target="_blank"><li style="width:150px">About Us</li></a> <a href="https://www.google.com" target="_blank"><li style="width:200px">Our Services<ul> </a><a href="http://www.microsoft.com" target="_blank"><li style="width:200px">VOIP</li></a> <a href="http://www.ebay.com" target="_blank"><li style="width:200px">Broadband</li></a> <a href="http://www.ebay.com" target="_blank"><li style="width:200px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;">Fixed Lines and Calls</li></a> </ul> </li> Any ideas?

I've been trying for a good long while to make a UL/LI menu, and as of right now, everything is working fine. Unfortunately, it seems that the parent Li of a dropdown section of the menu can't be linked to. If I do, all the child Li's inherit that URL, regardless of if they're enclused in their own <a> tags. How do I make a parent LI with another UL/LI dropdown menu within it clickable as a link, without affecting the rest of the menu? Here's the source for the menu setup: <div id="MenuBar"> <ul><li style="width:130px">Home</li> <li style="width:150px">About Us</li> <li style="width:200px">Our Services <ul> <li style="width:200px">VOIP</li> <li style="width:200px">Broadband</li> <li style="width:200px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;">Fixed Lines and Calls</li> </ul> </li> <li style="width:200px">Our Systems <ul> <li style="width:200px">BT</li> <li style="width:200px">Panosonic</li> <li style="width:200px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;">Etc</li> </ul> </li> <li style="width:170px">Testimonies <ul> <li style="width:170px">Charities</li> <li style="width:170px">Schools</li> <li style="width:170px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;">Businesses</li> </ul></li> <li style="width:174px">Contact Us</li> </ul></div> #MenuBar{ height:50px; width: 1024px; background-color:#FFF;}ul { text-align: left; display: inline; margin: 0; padding: 15px 0px 17px 0; list-style: none; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);}ul li { font: bold 16px/18px sans-serif; display: inline-block; margin-right: -3px; position: relative; padding-top: 16px; padding-bottom:16px; background: #fff; cursor: pointer; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; text-align:center; z-index:0;}ul li:hover { background: #555; color: #fff;}ul li ul { padding: 0; position: absolute; top: 48px; left: 0; width: 150px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s;}ul li ul li { background: #555; display: block; color: #fff; text-shadow: 0 -1px 0 #000; z-index:1;}ul li ul li:hover { background: #666; }ul li:hover ul { display: block; opacity: 1; visibility: visible;}any ideas?