Zendex
-
Posts
1 -
Joined
-
Last visited
Zendex's Achievements
Starter (1/6)
0
Reputation
-
Hi, I am trying to make a site for a studio, and I wanted to set a specific hover effect for my text. I want the background of the text to be lit up in the full height of the nav bar but it doesn't do it. I showed the expected result in the png in the attached files. I will also set the code here below, the top part is a css reset. HTML: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Zendex</title> <link href="style.css" rel="stylesheet" type="text/css"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Offside&display=swap" rel="stylesheet"> </head> <body> <div id="nav_bar"> <div id="Zendex">ZENDEX</div> <ul> <a href="contact.html"><li>CONTACT</li></a> <a href="films.html"><li>FILMS</li></a> <a href="about.html"><li>ABOUT</li></a> <a href="home.html"><li>HOME</li></a> </ul> </div> <div class="main"></div> </body> </html> CSS: @charset "UTF-8"; /* CSS Document */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; background-color: #6A6969; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*-------------------------------------------------------------------------------------------------------------------------------------------------*/ #nav_bar{ overflow: hidden; position: fixed; top: 0; width: 100vw; height: 125px; background-color: #484848; border: solid 1px black; } li{ font-size: 24px; text-shadow: 1px 1px 100px white; font-family: 'Offside', cursive; float: right; margin: 45px 50px 0px 0px; height: 125px; } #Zendex{ font-size: 24px; text-shadow: 1px 1px 100px white; font-family: 'Offside', cursive; float: left; margin: 45px 0px 0px 100px; color: azure; } #home{ } #about{ } #films{ } #contact{ } ul{ margin: 0px 50px 0px 0px; color: azure; height: 125px; } a:link{ color: white; } li:hover{ height: 125px; background-color: #6A6969; color: white; }
