- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Ok, so I created a table that has 6 buttons inside of it, each button displays additional options on mouseover (all done with css no js).
When I mouse over it pops out more buttons to either the left or right hand side but for some reason it keep displaying them vertically and I want them to be displayed horizontally.
Here is an example of what my current table is
<
table id=”buttons-table”>
This is my css for the table and mouseovers.
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: #354B5e;
z-index: 100;
padding: 0;
border-bottom: 5px solid hidden;
visibility: hidden;
display: inline;
}
.thumbnail:hover span{
visibility: visible;
top: -91px;
right: 325px;
}
.thumbnail span ul{
display: table-row;
}
.thumbnail span ul li{
display: inline;
padding: 5px;
}
Also, here is the css for the table if that helps
#buttons-table {
padding: 0;
width: 300px;
}
I want the buttons to be displayed in a horizontal list rather than a vertical one.
Perhaps a Codepen rather than a code dump?
I would say, because it’s not clear from your post, that using tables for layout is not a very modern approach and there are probably better options available.
Thanks.