-
Posts
4 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by kizzycocoa
-
-
All you need to do is apply display:block; to anchor links, this will cause it to fill the available width within li, and maybe adust line-height,so it is same height as li which will also make link text within it vertically aligned in centre.
You should never use anchor link outside li.
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?
UL/LI menu - making the parent LI a link?
in HTML/XHTML
Posted
Absolutely perfect! fixed all my issues!
Thanks a lot!! ^^