Position ul list within navigation menu

HTML & CSS
1

Hi everyone,

I have a css-driven drop down menu that works for 1 level of drop downs. I’ve added a second level but I need help with adjusting the css so that it will be positioned over to the right. I’m trying to position the ul list which is nested within the li with an id of “level 2” as displayed in the following code block:


          <li id="level2" ><a href="/massage">Massage</a>
            <ul>
              <li  ><a href="/massage/sports">Sports</a></li>
              <li  ><a href="/massage/aromatherapy">Aromatherapy</a></li>
            </ul>
          </li>

The full html and css is shown below. I wondered if anyone could help me revise the code to get this working?

Really appreciate any help.


<nav> <a href="#" id="menu-toggle">Navigation</a>
  <div id="window">
    <ul>
      <li  ><a href="/">Home</a></li>
      <li  ><a href="/about">About</a>
        <ul>
          <li  ><a href="/about/staff">Practitioners</a></li>
        </ul>
      </li>
      <li  ><a href="/features">Features</a>
        <ul>
          <li  ><a href="/store">Store</a></li>
          <li  ><a href="/blog">Blog</a></li>
          <li  ><a href="/features/faqs">FAQs</a></li>
          <li  ><a href="/features/events">Events</a></li>
          <li  ><a href="/features/photo-gallery">Photo Gallery</a></li>
          <li  ><a href="/features/media-downloads">Media Downloads</a></li>
          <li  ><a href="/features/news">News</a></li>
        </ul>
      </li>
      <li  ><a href="#">Modalities</a>
        <ul>
          <li  ><a href="/naturopathy">Naturopathy</a></li>
          <li id="level2" ><a href="/massage">Massage</a>
            <ul>
              <li  ><a href="/massage/sports">Sports</a></li>
              <li  ><a href="/massage/aromatherapy">Aromatherapy</a></li>
            </ul>
          </li>
          <li  ><a href="/reiki">Reiki</a></li>
          <li  ><a href="/iridology">Iridology</a></li>
          <li  ><a href="/herbal-medicine">Herbal Medicine</a></li>
          <li  ><a href="/nutritional-medicine">Nutritional Medicine</a></li>
        </ul>
      </li>
      <li  ><a href="http://www.miessence.com/shop/en/">Buy Organic Goods</a></li>
      <li  ><a href="/contact">Contact</a>
        <ul>
          <li  ><a href="/booking-form">Make a booking</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>




/* ========
	Navigation
======================= */
nav{
	clear: right;
	float: right;
	margin: 25px 0 0;
}
nav ul{
	margin: 0;
	overflow: hidden;
	padding: 0;
}
nav ul > li{
	display: inline;
	float: left;
	margin: 0;
	padding: 0 10px;
}
nav ul li:last-child,
nav ul li:last-child a{
	padding-right: 0;
}
	nav ul a:link,
	nav ul a:visited{
		color: #3f5666;
		display: block;
		font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 0.9em;
		font-weight: 400;
		padding: 5px;
	}
	nav ul li:hover > a,
	nav ul a:active,
	nav ul a:hover,
	nav ul li.selected a{
		color: #758a99;
	}
	#menu-toggle {
		background-color: rgb(210, 85, 66);
		border-color: #ec7c64;
		color: #FFF;
		display: none;
		font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-weight: 600;
		font-size: 17px;
		padding: 15px;
		text-transform: uppercase;
		width: 100%;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}

/* ========
	Sub Navigation
======================= */
nav ul li ul {
	box-shadow: 0 2px 3px rgba(0,0,0,0.2);
    left: -9999em;
    margin: 0;
    min-width: 165px;
    position: absolute;
    width: auto;
    z-index: 333;
}
nav ul li:hover ul {
    left: auto;
}
nav ul li ul li {
    display: block;
    float: none;
    line-height: 36px;
    margin: 0;
	padding: 0;
}
	nav ul li ul li a:link,
	nav ul li ul li a:visited {
		background: rgb(251,247,238);
		border-bottom: 1px solid #aba79c;
		border-top: 1px solid rgb(251,247,238);
		color: #555;
		display: block;
		font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-weight: 600;
		font-size: 12px;
		padding: 5px 20px;
		text-decoration: none;
	}
	nav ul li ul li a:active,
	nav ul li ul li a:hover,
	nav ul li ul li.selected a {
    background: rgb(233,227,215);
		color: #333;
	}
	nav ul ul li:hover a:after{
		content:"»";
		float: right;
	}





/* ========
	Side Navigation
======================= */
aside ul{
	padding: 0;
	margin-left: 0;
	
}
aside li{
	list-style: none;
	margin: 0;
	padding: 0;
}
	aside li a:link,
	aside li a:visited{
		border-top: 1px solid #eaeaea;
		color: #444;
		display: block;
		padding: 5px;
	}
	aside li a:active,
	aside li a:hover,
	aside li.selected a{
		background: rgb(210, 85, 66);
		color: #fff;
	}
	aside li:first-child a{
		border: none;
		font-size: 1.25em;
		font-weight: bold;
	}
	aside li:first-child a:hover,
	aside li.selected:first-child a{
		background: none;
		color: #666;
	}
2

On my way out the door to work so if you want an explanation it will have to wait. Here you go

<!DOCTYPE html><html>


<head>
        <link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
/* ========
	Navigation
======================= */
nav{
	clear: right;
	float: right;
	margin: 25px 0 0;
}
nav ul{
	margin: 0;
	padding: 0;
}
nav ul li{
	display: inline;
	float: left;
	position:relative;
	margin: 0;
	padding: 0 10px;
}
nav ul li:last-child,
nav ul li:last-child a{
	padding-right: 0;
}
	nav ul a:link,
	nav ul a:visited{
		color: #3f5666;
		display: block;
		font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 0.9em;
		font-weight: 400;
		padding: 5px;
	}
	nav ul li:hover > a,
	nav ul a:active,
	nav ul a:hover,
	nav ul li.selected a{
		color: #758a99;
	}
	#menu-toggle {
		background-color: rgb(210, 85, 66);
		border-color: #ec7c64;
		color: #FFF;
		display: none;
		font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-weight: 600;
		font-size: 17px;
		padding: 15px;
		text-transform: uppercase;
		width: 100%;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}


/* ========
	Sub Navigation
======================= */
nav ul li ul {
	box-shadow: 0 2px 3px rgba(0,0,0,0.2);
    left: -999em;
    margin: 0;
    min-width: 165px;
    position: absolute;
    width: auto;
    z-index: 333;
}
nav ul li:hover ul {
    left:auto;
}
nav li#level2:hover ul
{
	left:100%;
	top:0;
}
nav ul li ul li {
    display: block;
    float: none;
    line-height: 36px;
    margin: 0;
	padding: 0;
}
	nav ul li ul li a:link,
	nav ul li ul li a:visited {
		background: rgb(251,247,238);
		border-bottom: 1px solid #aba79c;
		border-top: 1px solid rgb(251,247,238);
		color: #555;
		display: block;
		font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-weight: 600;
		font-size: 12px;
		padding: 5px 20px;
		text-decoration: none;
	}
	nav ul li ul li a:active,
	nav ul li ul li a:hover,
	nav ul li ul li.selected a {
    background: rgb(233,227,215);
		color: #333;
	}
	nav ul ul li:hover a:after{
		content:"»";
		float: right;
	}










/* ========
	Side Navigation
======================= */
aside ul{
	padding: 0;
	margin-left: 0;
	
}
aside li{
	list-style: none;
	margin: 0;
	padding: 0;
}
	aside li a:link,
	aside li a:visited{
		border-top: 1px solid #eaeaea;
		color: #444;
		display: block;
		padding: 5px;
	}
	aside li a:active,
	aside li a:hover,
	aside li.selected a{
		background: rgb(210, 85, 66);
		color: #fff;
	}
	aside li:first-child a{
		border: none;
		font-size: 1.25em;
		font-weight: bold;
	}
	aside li:first-child a:hover,
	aside li.selected:first-child a{
		background: none;
		color: #666;
	}
</style></head>


<body>
   <nav> <a href="#" id="menu-toggle">Navigation</a>
  <div id="window">
    <ul>
      <li  ><a href="/">Home</a></li>
      <li  ><a href="/about">About</a>
        <ul>
          <li  ><a href="/about/staff">Practitioners</a></li>
        </ul>
      </li>
      <li  ><a href="/features">Features</a>
        <ul>
          <li  ><a href="/store">Store</a></li>
          <li  ><a href="/blog">Blog</a></li>
          <li  ><a href="/features/faqs">FAQs</a></li>
          <li  ><a href="/features/events">Events</a></li>
          <li  ><a href="/features/photo-gallery">Photo Gallery</a></li>
          <li  ><a href="/features/media-downloads">Media Downloads</a></li>
          <li  ><a href="/features/news">News</a></li>
        </ul>
      </li>
      <li  ><a href="#">Modalities</a>
        <ul>
          <li  ><a href="/naturopathy">Naturopathy</a></li>
          <li id="level2" ><a href="/massage">Massage</a>
            <ul>
              <li  ><a href="/massage/sports">Sports</a></li>
              <li  ><a href="/massage/aromatherapy">Aromatherapy</a></li>
            </ul>
          </li>
          <li  ><a href="/reiki">Reiki</a></li>
          <li  ><a href="/iridology">Iridology</a></li>
          <li  ><a href="/herbal-medicine">Herbal Medicine</a></li>
          <li  ><a href="/nutritional-medicine">Nutritional Medicine</a></li>
        </ul>
      </li>
      <li  ><a href="http://www.miessence.com/shop/en/">Buy Organic Goods</a></li>
      <li  ><a href="/contact">Contact</a>
        <ul>
          <li  ><a href="/booking-form">Make a booking</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>
</body>


</html>
3

So basically these were the changes needed
Your hover rule needs to be changed to this

nav ul li:hover > ul {
    left: auto;
}

Basically you need that > in there that way multiple levels of the background being affected. Next, you need a sub-sub menu rule to be added for the dropdown. Add this in

nav li#level2:hover ul
{
 top:0;
 left:100%;
}

Now you are absolutely positioning the sub menu so it needs a relative positioned parent to base the coordinates off of. So you need to add this in

nav ul li{position:relative;}

Also, remove the overflow:hidden; from “nav ul{}”. If you were using that as a clearing mechanism, there are better options when it comes to dropdowns. Google “clearfix” and you should be provided an easy method for clearing :).

Was in a rush out the door with my last post, this post explains my above one, but since I was in a rush I’m not 100% sure if I missed anything with my above code. You can ignore my above post :).

4

Thanks so much for that - it’s working really well now. Could I just ask one more question if that’s ok? The second level sub-menu that you just helped me with is also styled in a different way in a side column. The following is the section:


      <li  ><a href="#">Modalities</a>
        <ul>
          <li  ><a href="/naturopathy">Naturopathy</a></li>
          <li id="level2" ><a href="/massage">Massage</a>
            <ul>
              <li  ><a href="/massage/sports">Sports</a></li>
              <li  ><a href="/massage/aromatherapy">Aromatherapy</a></li>
            </ul>
          </li>

And the following is the css code that styles that section:



aside ul{
	padding: 0;
	margin-left: 0;
	
}
aside li{
	list-style: none;
	margin: 0;
	padding: 0;
}
	aside li a:link,
	aside li a:visited{
		border-top: 1px solid #eaeaea;
		color: #444;
		display: block;
		padding: 5px;
	}
	aside li a:active,
	aside li a:hover,
	aside li.selected a{
		background: rgb(210, 85, 66);
		color: #fff;
	}

	aside li:first-child a{
		border: none;
		font-size: 1.25em;
		font-weight: bold;
	}
	aside li#remedial-menu:first-child a{
    font-size: 1em;
    font-weight: normal;
	}
	aside li#remedial-menu:first-child a:active,
	aside li#remedial-menu:first-child a:hover,
	aside li.selected a{
		background: rgb(210, 85, 66);
		color: #fff;
	}


	aside li:first-child a:hover,
	aside li.selected:first-child a{
		background: none;
		color: #666;
	}

The problem is that the first child in the second level navigation was getting styled differently to the other nav elements so I had to target the first child by adding an id of “remedial-menu”. The following is the code that I had to more specifically style by targeting the id:


	aside li#remedial-menu:first-child a{
    font-size: 1em;
    font-weight: normal;
	}
	aside li#remedial-menu:first-child a:active,
	aside li#remedial-menu:first-child a:hover,
	aside li.selected a{
		background: rgb(210, 85, 66);
		color: #fff;
	}

I fixed the hover problem with the above code but I’m still having a problem getting that first child to be styled when you’re on that active page. It’s supposed to be red background with white text like the other links. I thought that was what my code did but it doesn’t seem work. Actually, it seems to kind of flicker on for a second and then off again. Do you know if this is a bug or whether I’m just targeting the wrong element?

Sorry, I hope I explained that well enough. I get quite confused.

Thanks so much for your help.

5

Instead of messing with :first-child, I would instead add a class or ID to the active page. You can avoid the :first-child pseudo altogether this way and more specifically target the element(s) :).

6

Ok thanks again

7