kizzycocoa Posted December 18, 2014 Share Posted December 18, 2014 (edited) 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? Edited December 18, 2014 by kizzycocoa Link to comment Share on other sites More sharing options...
dsonesuk Posted December 18, 2014 Share Posted December 18, 2014 Well that should not happen unless you are enclosing the parent anchor link around submenus, you should have menu similar to <div id="MenuBar"><ul><li style="width:130px"><a href="home.html">Home</a></li><li style="width:150px"><a href="about-us.html">About Us</a></li><li style="width:200px"><a href="our-sevices.html">Our Services</a><ul><li style="width:200px"><a href="voip.html">VOIP</a></li><li style="width:200px"><a href="broadband.html">Broadband</a></li><li style="width:200px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;"><a href="fixed-lines-and-calls.html">Fixed Lines and Calls</a></li></ul></li><li style="width:200px"><a href="our-systems.html">Our Systems</a><ul><li style="width:200px"><a href="bt.html">BT</a></li><li style="width:200px"><a href="panosonic.html">Panosonic</a></li><li style="width:200px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;"><a href="etc.html">Etc</a></li></ul></li><li style="width:170px"><a href="testimonies.html">Testimonies</a><ul><li style="width:170px"><a href="charities.html">Charities</a></li><li style="width:170px"><a href="schools.html">Schools</a></li><li style="width:170px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;"><a href="businesses.html">Businesses</a></li></ul></li><li style="width:174px"><a href="contact-us.html">Contact Us</a></li></ul></div> Link to comment Share on other sites More sharing options...
tejasamrute Posted December 18, 2014 Share Posted December 18, 2014 I tried adding links everything looks fine & perfect......Possibly you might have got a bug <div id="MenuBar"> <ul><li style="width:130px">Home</li> <li style="width:150px">About Us</li> <li style="width:200px"><a href="https://www.google.com" target="_blank">Our Services</a><ul> <li style="width:200px"><a href="http://www.microsoft.com" target="_blank">VOIP</a></li> <li style="width:200px"><a href="http://www.ebay.com" target="_blank">Broadband</a></li> <li style="width:200px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;"><a href="http://amazon.com" target="_blank">Fixed Lines and Calls</a></li> </ul> </li> <li style="width:200px"><a href="https://www.msn.com" target="_blank">Our Systems</a> <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> Link to comment Share on other sites More sharing options...
tejasamrute Posted December 18, 2014 Share Posted December 18, 2014 Tested in Chrome, Firefox, Opera & IE 8 & 9.......your navigation looks awefully wrong in IE7 Link to comment Share on other sites More sharing options...
kizzycocoa Posted December 18, 2014 Author Share Posted December 18, 2014 (edited) 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? Edited December 18, 2014 by kizzycocoa Link to comment Share on other sites More sharing options...
dsonesuk Posted December 18, 2014 Share Posted December 18, 2014 (edited) 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. Edited December 18, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
dsonesuk Posted December 18, 2014 Share Posted December 18, 2014 You should never use anchor link outside li. Link to comment Share on other sites More sharing options...
kizzycocoa Posted December 18, 2014 Author Share Posted December 18, 2014 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 18, 2014 Share Posted December 18, 2014 (edited) You have to identify that this styling belongs to a menu only, else all unordered list within a page will adopt this styling #MenuBar { height:50px; width: 1024px; background-color:#FFF; } #MenuBar 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); } #MenuBar ul li { font: bold 16px/18px sans-serif; display: inline-block; margin-right: -3px; position: relative; /* padding-top: 16px; padding-bottom:16px; removed by dsonesuk */ 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; } #MenuBar ul li:hover { background: #555; color: #fff; } #MenuBar 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; } #MenuBar ul li ul li { background: #555; display: block; color: #fff; text-shadow: 0 -1px 0 #000; z-index:1; } #MenuBar ul li ul li:hover { background: #666; } #MenuBar ul li:hover ul { display: block; opacity: 1; visibility: visible; } #MenuBar a {display: block; line-height: 50px; /* same height as #MenuBar */} /*added by dsonesuk */ Edited December 18, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
kizzycocoa Posted December 23, 2014 Author Share Posted December 23, 2014 Absolutely perfect! fixed all my issues! Thanks a lot!! ^^ Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now