Show a
  • line like is hovered

  • Tags: css,hover,html-lists,line

    Problem :

    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>
    <meta charset="utf-8">
    <title>A simple menu</title>
    <style type="text/css">
    #menu a:hover{
        background-color:   yellow;
      <div id="menu">
        <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>

    Solution :

    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">
        <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>

    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

      CSS Howto..

      How to fix the css padding

      How to load a dynamic view css file using requireJs & Backbone

      How to hide hr inside the last li using css

      How do I use the alignment of one class and the font of another?

      How to use Border Radius CSS on Internet Explorer

      How to program the navigation bar(image) web html

      How to check if a css/js resource is included in head

      CSS. Show TFOOT only when TBODY has no rows

      How to convert 2 css files into one swf file in flex 4.11 SDK

      CSS: How to make input fill rest of line, with a button on the right?

      How to achieve straight shadow with CSS?

      simplest slideshow using html, css toggling visibility of each div tag

      how to place css div container “text-align: center ;”

      How can I apply CSS to elements created with javascript in IE?

      How can I force each piece of a quadrant to inhabit only its fourth of the area (HTML/CSS)?

      How to declare CSS font-face with font-weight and font-style properly?

      how to remove a TR which have a TD that contain specific text

      How to create a label inside an element and style it?

      How to remove the effect of all the parent containers on any child control

      How can I get as much of the text into a DIV row as possible?

      How to create fixed to screen layout

      HTML5/CSS: how to implement a scroll bar

      Javascript/Jquery How to catch the use of a CSS class

      How to display shopping cart at the right of page

      How to reload a css background-image inside a directive

      How does one know exact pixel size / relationships between CSS elements?

      How do I modify IE Gradient CSS to use height and a third color?

      Problems with jQuery Image Slideshow / Rotating Banner using timeout / interval

      when we have a double border in a table , how do we fill in the gap beetween the two borders

      How well do you need to know HTML before delving into CSS?