Hey there,
I am currently on working on a content management system and am wanting to create a dropdown menu on click for the front end of the website however I can't appear to get it working I believe that the problem lies somewhere in the jQuery as I'm choosing the wrong CSS elements (don't have a great understanding as to how it works). Any help would be appreciated
The HTML/PHP
The jQuery:
The CSS:
I am currently on working on a content management system and am wanting to create a dropdown menu on click for the front end of the website however I can't appear to get it working I believe that the problem lies somewhere in the jQuery as I'm choosing the wrong CSS elements (don't have a great understanding as to how it works). Any help would be appreciated
The HTML/PHP
Code:
<nav>
<ul>
<li>Navigation
<ul>
<?php foreach ($navitems as $nav) { ?>
<li><a href="<?php echo $nav['navigation_link']; ?>"><?php echo $nav['navigation_title']; ?></a></li>
<?php } ?>
</ul>
</li>
</ul>
</nav>
Code:
$('nav ul > li').click(function() {
$('nav ul > ul').css('display','none');
$(this).find('ul').css('display','block');
return false;
});
Code:
nav ul ul {
display: none;
}
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
list-style: none;
position: absolute;
text-align: left;
right: 20px;
cursor: pointer;
width: 150px;
font-size: 20px;
line-height: 30px;
font-family: 'Keania One',cursive;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 5px;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 25px 40px;
color: #757575;
text-decoration: none;
}
nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}