CSS Content Attribute

**Deadweight** · 10-06-2013, 04:14 AM

Im currently making a drop down menu which will have multiple levels to it. However, I'm running into a unique problem. Im using the content tag to make parent elements have a down arrow that contain child elements. Here is my css.

Code:

#link_wrapper {
	border:1px solid black;
	background-color: #FFC;
	width:60%;
	margin:auto;	
}

.expand {
	clear:both;	
}

/* Link Content */
#nav_wrapper{
	background-color: #666;
	border-top:1px solid white;
}

#menu, #menu ul { /* Effects everything inside the menu */
	color:#fff;
	font-weight:bold;
	letter-spacing:1px;
	padding:0;
	margin:0;
}

#menu li { /* Effects all LI's inside the menu */
	list-style: none;
}

#menu > li > a:after{
	content: "V";	
}

#menu li > a:only-child:after{
	content: '';
}

#menu > li { /* Effects every LI's in the menu UL */
	float:left;
	padding: 2px 5px;
	border-right:1px solid white;
	position:relative;
}

#menu li:hover {
	cursor:pointer;
	color:red;
	background-color:black;
}

#menu > li > ul.drop {
	position:absolute;
	display:none;	
	background-color: #666;
	width:170px;
}

and here is my html

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Awesome drop down</title>

<link rel="stylesheet" type="text/css" href="foch_new.css"/> 
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script>
$(document).ready(function() {
	$('ul#menu li').hover(function(){
		 $(this).children('ul').delay(20).slideDown(300);
	}, function(){
		 $(this).children('ul').delay(20).slideUp(200);
	});
});

</script>

</head>
<body>

<div id="link_wrapper">
<h2>Title</h2>
<div id="nav_wrapper">

<ul id="menu">
	<li><a herf="#">Link 1</a></li>
    <li><a herf="#">Link 2</a></li>
    <li><a herf="#">Link 3</a>
    	<ul class="drop">
        	<li><a herf="#">Sub link 3.1</a></li>
            <li><a herf="#">Sub link 3.2</a></li>
            <li><a herf="#">Sub link 3.3</a></li>
        </ul>
    </li>
    <li><a herf="#">Link 4</li>
    <li><a herf="#">Link 5</li>
</ul>

<div class="expand"></div>
</div>
</div>

</body>
</html>

The error is that the last link for some odd reason contains two 'V' arrows (one at the beginning and one at the end). It should contain none. Does anyone know why this is appearing?

**jscheuer1** · 10-06-2013, 07:06 AM

Two missing </a> in the last two links:

Code:

    <li><a herf="#">Link 4</a></li>
    <li><a herf="#">Link 5</a></li>

**Deadweight** · 10-06-2013, 07:23 PM

Wowowow i feel kinda stupid now. Thanks.
how do you set this as resolved?

**jscheuer1** · 10-06-2013, 07:28 PM

Go to your first post in the thread, hit:

Edit

Then in the lower right hit:

Go Advanced

Then in the top portion of the advanced editor "Your Message" section find the drop down for:

Prefix

Change it to Resolved.