Tweet
Hi Guys,
I have an pretty intense expandable/collapsable nested list here (all expanded in the code I'll paste here without javascript), in each list item there will be some buttons that I don't want to display until the relevant list item is hovered over. As you can see in the example code I've pasted, the problem I'm having is because its a nested list, the father list item is always active as the one your hovering over is in it - so the buttons display on both or on any father elements too.
The nested list is dynamic via a cms so it could have a few levels links.
Does anyone have some clever ideas on how to fix this with CSS, or will it have to be a javascript solution?
Thanks in advance
Re. Ste
I have an pretty intense expandable/collapsable nested list here (all expanded in the code I'll paste here without javascript), in each list item there will be some buttons that I don't want to display until the relevant list item is hovered over. As you can see in the example code I've pasted, the problem I'm having is because its a nested list, the father list item is always active as the one your hovering over is in it - so the buttons display on both or on any father elements too.
The nested list is dynamic via a cms so it could have a few levels links.
Does anyone have some clever ideas on how to fix this with CSS, or will it have to be a javascript solution?
Thanks in advance
Re. Ste
Code:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
body {
background:#333;
font-size:12px;
margin:0;
padding:0;
}
section,
article,
header,
footer,
nav,
aside,
hgroup {
display: block;
}
aside {
background:#000;
float:left;
margin:0;
padding: 16px 0;
position:relative;
width:240px;
}
nav ul {
list-style:none;
margin:0 0 0 16px;
padding:0;
}
nav ul ul {
margin:16px 0 0 12px;
}
nav ul li {
margin-bottom:16px;
text-indent:8px;
position:relative;
}
nav .buttons {
display:none;
float:right;
height:16px;
margin-right:8px;
position:relative;
width:32px;
}
nav li a {
color:#f00;
text-decoration:none;
}
nav li a:hover {
color:#960000;
text-decoration:none;
}
nav li:hover > .actions {
display:block;
cursor:pointer;
}
.buttons button {
float:right;
}
</style>
</head>
<body>
<aside>
<nav>
<ul>
<li>
<a href="#" title="TITLE TEXT.">Part I</a>
<div class="buttons">
<button class="delete">Remove</button>
</div>
<ul>
<li>
<a href="#" title="TITLE TEXT.">About</a>
<div class="buttons">
<button class="delete">Remove</button>
</div>
<ul>
<li>
<a href="#" title="TITLE TEXT.">List item 1</a>
<div class="buttons">
<button class="delete">Remove</button>
</div>
</li>
<li>
<a href="#" title="TITLE TEXT.">List item 2</a>
<div class="buttons">
<button class="delete">Remove</button>
</div>
</li>
<li>
<a href="#" title="TITLE TEXT.">List item 3</a>
<div class="buttons">
<button class="delete">Remove</button>
</div>
</li>
</ul>
</li>
<li>
<a href="#" title="TITLE TEXT.">Portfolio</a>
<div class="buttons">
<button class="delete">Remove</button>
</div>
</li>
<li>
<a href="#" title="TITLE TEXT.">Solutions</a>
<div class="buttons">
<button class="delete">Remove</button>
</div>
</li>
<li>
<a href="#" title="TITLE TEXT.">Legal</a>
<div class="buttons">
<button class="delete">Remove</button>
</div>
<ul>
<li>
<span></span>
<a href="#" title="TITLE TEXT.">List item 4</a>
<div class="buttons">
<button class="delete">Remove</button>
</div>
</li>
<li>
<span></span>
<a href="#" title="TITLE TEXT.">List item 5</a>
<div class="buttons">
<button class="delete">Remove</button>
</div>
</li>
<li>
<span></span>
<a href="#" title="TITLE TEXT.">List item 6</a>
<div class="buttons">
<button class="delete">Remove</button>
</div>
<ul>
<li>
<span></span>
<a href="#" title="TITLE TEXT.">List item 7</a>
<div class="buttons">
<button class="delete">Remove</button>
</div>
</li>
<li>
<span></span>
<a href="#" title="TITLE TEXT.">List item 8</a>
<div class="buttons">
<button class="delete">Remove</button>
</div>
</li>
<li>
<span></span>
<a href="#" title="TITLE TEXT.">List item 9</a>
<div class="buttons">
<button class="delete">Remove</button>
</div>
<ul>
<li>
<span></span>
<a href="#" title="TITLE TEXT.">List item 10</a>
<div class="buttons">
<button class="delete">Remove</button>
</div>
</li>
<li>
<span></span>
<a href="#" title="TITLE TEXT.">List item 11</a>
<div class="buttons">
<button class="delete">Remove</button>
</div>
</li>
<li>
<span></span>
<a href="#" title="TITLE TEXT.">List item 12</a>
<div class="buttons">
<button class="delete">Remove</button>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</aside>
</body>
</html>
Comment