Home/ Questions/Q 9200883
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T22:52:11+00:00

I have a simple CSS list. I want the first <li> line to be

  • 0

I have a simple CSS list. I want the first <li> line to be shown like is hovered. How can I do this? I had tried something like this: <li class="#menu a:hover"><a href="#">Option 1</a></li> but unfortunately doesn’t work.

Thank you for your time!

The code is:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>A simple menu</title>
<style type="text/css">
#menu a:hover{
    background-color:   yellow;
}
</style>
</head>
 <body>
  <div id="menu">
   <ul>
    <li class="#menu a:hover"><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
    <li><a href="#">Option 4</a></li>
   <ul>
  </div>
 </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I guess you want the yellow background for first link so do it like this

    #menu ul li:nth-child(1) a {
    background-color:   yellow;
}

    Or simply give a class for example .current

    .current {
   background-color:   yellow;
}

<div id="menu">
  <ul>
    <li><a href="#" class="current">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
    <li><a href="#">Option 4</a></li>
  <ul>
</div>

    If you are having any intentions to highlight the current page than answer is NO, you cannot do it with CSS, you will need JavaScript/jQuery or server side programming like PHP

    • 0