Jump to content

UL/LI menu - making the parent LI a link?


kizzycocoa

Recommended Posts

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 by kizzycocoa
Link to comment
Share on other sites

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

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

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 by kizzycocoa
Link to comment
Share on other sites

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 by dsonesuk
Link to comment
Share on other sites

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

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 by dsonesuk
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...