Navigation bar using html and css, a: hover question

Question

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            margin:0px;
            padding:0;

            overflow:hidden;
            list-style-type: none;
        }
        li a{
            display:inline;
            color:black;

            font-family:Georgia;
            text-align: center;
            font-size:200%;
            text-decoration:none;
            border-left:1px solid gray;

        }

        li a:hover{
            color:rgb(72, 145, 123);

            text-align:center;    
            font-family:Georgia;
            font-size:250%;   
            background:green;       
            text-decoration:none;
            display:inline;
            padding:0%;

        }
        li a:active{
            color:chartreuse;
        }
        body
        {
            width:100%;
            height:100%;
                margin:0
        }

        li{float:left; padding-left:3%; background:#c0c9d3;}
    </style>
</head>

<body>
    <nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
    </ul>

So yeah, it's a bit messy but basically I'm trying to learn some Html + CSS and I have an issue when creating a navigation bar. I want to make the text "pop" when you hover over it and so I increased the text-size to 250% on hover...however, I also want to make that "poped" change its background to green(just for the sake of this discussion), but I want that green background to extend so it reaches the previous <li> and the <li> after it. For instance, I hover over "News" and it pops and the background reaches "e" from Home and "C" from contacts. I hope any of this makes sense.

Also, this is not something for my university/company...etc...just for my personal gain as a noob who wants to learn to create websites from scratch. Also this is my first navigation bar I ever made so feel free to give me criticism:D

Answer 1

Funny request haha, but I think something like this might work. If you add an extra <div> inside your <li>s .

<li>
  <a href="#">Home</a>
  <div class="extend"></div>
</li>

Then, give your <li> position: relative;

And give the .extend the following CSS

.extend {
  position: absolute;
  background-color: rgba(50, 205, 50, 0.5); //change as you wish
  top: 0;
  bottom: 0;
  left: -100px; //change this to your preference
  right: -100px; //change this to your preference
  display: none;
  z-index: 2;
}

Then make it so when you hover over your <li> , your .extend change to display: block

li:hover > .extend {
  display: block;
}

Navigation bar using html and css, a: hover question

Question

1 answers

solution1
1 ACCPTED 2020-04-03 00:15:27

Navigation bar using html and css, a: hover question

Question

1 answers

solution1 1 ACCPTED 2020-04-03 00:15:27

solution1
1 ACCPTED 2020-04-03 00:15:27