I want the whole of the background to change on hover. At the moment the width of change in color hugs the width of the original text and not the whole width of the table.
I tried the following.
HTML CODE
`
- <a href=index.html
- link1
- link link2
CSS CODE
<code>.dropdown {
height: 50px;
width: auto;
padding: 10px 20px;
color: white;
background: grey;
}
.submenu {
display: none;
}
.submemu:hover,
.submemu:focus{
background: blue;
color: white;
position: absolute;
width : 100%;
padding : 10px 20px;
white-space : nowrap;
}`
</code>
<code>.dropdown {
height: 50px;
width: auto;
padding: 10px 20px;
color: white;
background: grey;
}
.submenu {
display: none;
}
.submemu:hover,
.submemu:focus{
background: blue;
color: white;
position: absolute;
width : 100%;
padding : 10px 20px;
white-space : nowrap;
}`
</code>
.dropdown {
height: 50px;
width: auto;
padding: 10px 20px;
color: white;
background: grey;
}
.submenu {
display: none;
}
.submemu:hover,
.submemu:focus{
background: blue;
color: white;
position: absolute;
width : 100%;
padding : 10px 20px;
white-space : nowrap;
}`
The results of the above code only changed the background of the dropdown-content around the text with the padding but not the whole width of the container submemu.