bhomatude
06-08-2010, 01:07 AM
I've been going around in circles trying to style this accordion menu css. Everything is working except for two things:
1. The parent menu headers titled "company" and "projects" I want a color:#ddd; font-weight:bold; on hover. With the current styling, I am not getting bold on either and the "company" is also defaulting to styling of the main stylesheet which is a color:#fff; on hover (this is being used inside a widget within a wordpress theme). The "projects" does not default to the main stylesheet on hover for some reason.
2. When clicking on sub sub menu items under "projects/completed/10 years later for example, I want the active state to be bold. Can't get it to work!
Newbie here... Any suggestions?
</script>
<style type="text/css">
.arrowlistmenu{
width: 180px; /*width of accordion menu*/
}
.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: 14px Helvetica;
color: ddd;
margin-bottom: 5px; /*bottom spacing between header and rest of content*/
padding: 4px 10px 4px 0px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}
.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
font-weight:bold;
}
.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
list-style-type: none;
}
.arrowlistmenu ul li .opensubheader{ /*Open state CSS for sub menu header*/
color: #ddd;
list-style-type: none;
}
.arrowlistmenu ul li .closedsubheader{ /*Closed state CSS for sub menu header*/
list-style-type: none;
font-weight:bold;
}
.arrowlistmenu ul li a{
font-size:80%;
color: #ddd;
display: block;
padding: 2px 10px;
text-decoration: none;
list-style-type: none;
}
.arrowlistmenu ul li a:visited{
}
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
font-weight:bold;
}
arrowlistmenu ul li li a:active{font-weight:bold;}
.arrowlistmenu ul li a.subexpandable:hover{ /*hover state CSS for sub menu header*/
color:#fff;
}
</style>
</head>
<body>
<div class="arrowlistmenu">
<h2 class="menuheader expandable">company</h2>
<ul class="categoryitems">
<li><a href="#/">press</a></li>
<li><a href="#/">blog</a></li>
<li><a href="#/">contact</a></li>
</ul>
<h2 class="menuheader expandable">projects</h2>
<ul class="categoryitems">
<li><a href="#" class="subexpandable">completed</a>
<ul class="subcategoryitems" style="margin-left: 15px">
<li><a href="#/">10 Years Later</a></li>
</ul>
</li>
<li><a href="#" class="subexpandable">pre-production</a>
<ul class="subcategoryitems" style="margin-left: 15px">
<li><a href="#/">Occam's Razor</a></li>
</ul>
</li>
<li><a href="#" class="subexpandable">development</a>
<ul class="subcategoryitems" style="margin-left: 15px">
<li><a href="#/">Peon</a></li>
</ul>
</li>
1. The parent menu headers titled "company" and "projects" I want a color:#ddd; font-weight:bold; on hover. With the current styling, I am not getting bold on either and the "company" is also defaulting to styling of the main stylesheet which is a color:#fff; on hover (this is being used inside a widget within a wordpress theme). The "projects" does not default to the main stylesheet on hover for some reason.
2. When clicking on sub sub menu items under "projects/completed/10 years later for example, I want the active state to be bold. Can't get it to work!
Newbie here... Any suggestions?
</script>
<style type="text/css">
.arrowlistmenu{
width: 180px; /*width of accordion menu*/
}
.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: 14px Helvetica;
color: ddd;
margin-bottom: 5px; /*bottom spacing between header and rest of content*/
padding: 4px 10px 4px 0px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}
.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
font-weight:bold;
}
.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
list-style-type: none;
}
.arrowlistmenu ul li .opensubheader{ /*Open state CSS for sub menu header*/
color: #ddd;
list-style-type: none;
}
.arrowlistmenu ul li .closedsubheader{ /*Closed state CSS for sub menu header*/
list-style-type: none;
font-weight:bold;
}
.arrowlistmenu ul li a{
font-size:80%;
color: #ddd;
display: block;
padding: 2px 10px;
text-decoration: none;
list-style-type: none;
}
.arrowlistmenu ul li a:visited{
}
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
font-weight:bold;
}
arrowlistmenu ul li li a:active{font-weight:bold;}
.arrowlistmenu ul li a.subexpandable:hover{ /*hover state CSS for sub menu header*/
color:#fff;
}
</style>
</head>
<body>
<div class="arrowlistmenu">
<h2 class="menuheader expandable">company</h2>
<ul class="categoryitems">
<li><a href="#/">press</a></li>
<li><a href="#/">blog</a></li>
<li><a href="#/">contact</a></li>
</ul>
<h2 class="menuheader expandable">projects</h2>
<ul class="categoryitems">
<li><a href="#" class="subexpandable">completed</a>
<ul class="subcategoryitems" style="margin-left: 15px">
<li><a href="#/">10 Years Later</a></li>
</ul>
</li>
<li><a href="#" class="subexpandable">pre-production</a>
<ul class="subcategoryitems" style="margin-left: 15px">
<li><a href="#/">Occam's Razor</a></li>
</ul>
</li>
<li><a href="#" class="subexpandable">development</a>
<ul class="subcategoryitems" style="margin-left: 15px">
<li><a href="#/">Peon</a></li>
</ul>
</li>