Deadweight
10-06-2013, 03: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.
#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
<!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?
#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
<!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?