How to Fix The Hover Effect
Question
I'm building a navigation bar and the code if fine in the desktop mode. When I'm using media queries for mobile, the hover effects are the same in the media query as in the desktop version. I don't know what I'm doing wrong or how to fix it.
background: #232323;
height: 66px;
color: #ffff;
box-shadow: 2px 2px 5px green;
position: fixed;
width: 100%;
}
header .logo {
float: left;
height: inherit;
margin-left: 3em;
margin-bottom: 3em;
text-shadow: 2px 2px 2px black;
}
header .logo-text {
margin: 8px;
}
header .logo-text span {
color: #cfe333;
font-family: 'Abril Fatface', cursive;
}
header ul {
float: right;
margin: 0px;
padding: 0px;
list-style: none;
}
header ul li {
float: left;
position: relative
}
header ul li ul {
position: absolute;
top: 66px;
right: 0px;
width: 180px;
display: none;
}
header ul li ul li {
width: 100%;
background: #cfe333;
}
header ul li ul:hover {
background: #0000;
width: 180px;
height: 66px;
}
header ul li ul li a {
padding: 10px;
color: #fffff;
height: 66px;
}
header ul li {
display: block;
padding: 21px;
font-size: 1.1em;
}
header ul li:hover {
background: #010101;
color: #cfe333;
}
header ul li a:hover {
color: #cfe333;
transition: 0.5s;
}
header .menu-toggle {
display: none;
}
header ul li a {
text-decoration: none;
color: #fff;
font-size: 1.2em;
text-shadow: 2px 2px 2px black;
}
.fas fa-bars menu-toggle {
color: white;
}
/* Media Queries */
@media only screen and (max-width: 750px) {
header ul {
width: 100%;
background: #232323;
font-size: .8em;
margin-top: 0;
position: absolute;
top: 68px;
}
header ul li {
width: 100%;
}
header ul li ul {
position: static;
display: block;
width: 100%;
left: 0;
margin-top: 30px;
}
header ul li ul li a {
padding: 10px;
color: #fffff;
height: 66px;
width: 100%;
}
header ul li ul li a:hover {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<div class="logo">
<h1 class="logo-text"><span>IM</span> Learning Project</h1>
<link rel="stylysheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity=""
crossorigin="anonymous">
</div>
<i class="fas fa-bars menu-toggle"></i>
<ul class="nav">
<li><a href="#rewards"><i class="far fa-star"></i> Rewards</a></li>
<li><a href="#connect"><i class="fas fa-user-friends"></i> Connect</a></li>
<li><a href="#watch"><i class="fas fa-video"></i> Watch</a></li>
<li>
<a href="#"><i class="fas fa-user"></i> Sign Up <i class="fas fa-chevron-down" style="font-size: .8em;"></i></a>
<ul>
<li><a href="#">Dashboard</a></li>
<li><a href="#" class="logout">Logout</a></li>
</ul>
</li>
</ul>
</header>
What I'm trying to do with this code is have the list items stay the full width on hover also, for the media query.
Thanks in advance for your help!
1 answers
solution1
1 2020-05-08 22:58:49
I solved it by putting a media query on this:
header ul li ul:hover {
background: #0000;
width: 180px;
height: 66px;
}
}```
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to fix hover effect not happening
How to fix .hover effect sticking
How to fix transition on hover effect + add links on tumblr posts
How to fix my on hover effect to highlight selected item?
I don't know how to fix this hover effect
How to toggle :hover effect?
How to improve this hover effect?
How to fix hover not activating
How to fix hover
How to fix the precision on hover?
Related Tags