Targeting nested list

Hi everyone,

I have the following code for a side menu:


        <ul class="side-nav">
<li  ><a href="/users/account"><em class="icon-reorder"></em>My Account</a></li>
<li  ><a href="/users/dashboard">Dashboard</a></li>
<li  ><a href="/users/update-contact-details">Update Contact Details</a></li>
<li  ><a href="/users/renew-membership">Renew Membership</a>
<ul class="side-nav">
<li  ><a href="#">Renew and update contact details</a></li>
<li  ><a href="">Renew only - no updates required</a></li>
</ul>
</li>
<li  ><a href="/users/upgrade-membership">Upgrade Membership</a></li>
<li  ><a href="/LogOutProcess.aspx">Log Out</a></li></ul>

The following css is what is stying it:


.side-nav em {
	background: #aba16f;
	color: #fff;
	display: inline-block !important;
	margin: 0 10px 0 0;
	padding: 10px;
}
.side-nav li:first-child {
	background: none;
	border-bottom: 1px solid #ddd;
	padding: 0;
}
.side-nav li:first-child a:link,
.side-nav li:first-child a:visited {
	color: #616262;
	font-family: 'titillium_bdbold';
	font-size: 1.4375em;
}


I’m trying to target the following nested list so that I can indent it so it’s seen as a sub menu:


<ul class="side-nav">
<li  ><a href="#">Renew and update contact details</a></li>
<li  ><a href="">Renew only - no updates required</a></li>
</ul>


I tried the following selector but with no luck:

ul.side-nav ul.side-nav a {
}

Just wondering if anyone can help me out?

Really appreciate any help.

This is already indented. What specifically do you mean so that it is seen as a sub menu?

imncidentally, I wouldn’t use the same class name recursively for this, it might get confusing when handling inheritance.

anyway maybe this was what you were looking for?

 <html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width">
		<style type="text/css">
.side-nav em {
	background: #aba16f;
	color: #fff;
	display: inline-block !important;
	margin: 0 10px 0 0;
	padding: 10px;
}
.side-nav>li:first-child {
	background: none;
	border-bottom: 1px solid #ddd;
	padding: 0;
}
.side-nav>li:first-child a:link,
.side-nav>li:first-child a:visited {
	color: #616262;
	font-family: 'titillium_bdbold';
	font-size: 1.4375em;
}

/* OPTIONAL: quick drop down effect*/
.side-nav li{ position:relative}
.side-nav li:hover ul{ position:static}
.side-nav ul{ position:absolute; left:-9999999em;}
 		</style>
	</head>
	<body>
       <ul class="side-nav">
<li  ><a href="/users/account"><em class="icon-reorder"></em>My Account</a></li>
<li  ><a href="/users/dashboard">Dashboard</a></li>
<li  ><a href="/users/update-contact-details">Update Contact Details</a></li>
<li  ><a href="/users/renew-membership">Renew Membership</a>
<ul>
<li  ><a href="#">Renew and update contact details</a></li>
<li  ><a href="">Renew only - no updates required</a></li>
</ul>
</li>
<li  ><a href="/users/upgrade-membership">Upgrade Membership</a></li>
<li  ><a href="/LogOutProcess.aspx">Log Out</a></li></ul>
	</body>
</html>

Thanks for the reply,

The drop down menu is a nice effect - thanks. I really just need to know how to target the text shown in the snippet below as I just want to style the text size and font differently. I just tried the following but still no go:


.side-nav ul li a:link { 
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
  border-bottom: none;
}

Are you able to let me know which selectors to use?


<ul>
<li  ><a href="#">Renew and update contact details</a></li>
<li  ><a href="">Renew only - no updates required</a></li>
</ul>




If the text you posted was part of the next level dropdown then do this

.side-nav ul li li a:link { 
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
  border-bottom: none;
}

That extra “li” on there will target the next level dropdown.

Thanks very much - that’s exactly what I need.

Appreciate it.

You’re very welcome :).