How can I select complete
  • element in navigation bar when hovered or selected?

  • Tags: html,css,uinavigationbar

    Problem :

    This is how I want the navigation bar, as in : http://themediaoctopus.com/social-media/nostalgic-approach-advertising

    How to change the complete color of <li> when hovered on or selected? Any idea on how to get those seperators between those buttons?

    Selection action doesn't work, why? I'm on a particular page and that button on navigation bar is not highlighted. Why and how can I do it?

    Here is my current navigation bar when hovered:

    enter image description here

    Here is my HTML :

    <body>
        <nav>
             <ul>
              <li><a href="index.html">HOME</a></li>
              <li><a href="how_it_works.html">HOW IT WORKS</a></li>
              <li><a href="get_it.html">GET IT</a></li>
              <li><a href="what_you_can_do.html">WHAT YOU CAN DO</a></li>
              <li><a href="about.html">ABOUT</a></li>     
             </ul>
          </nav>
    </body>
    

    Here is my CSS :

    body {
        color : #F9F9F9;
    }
    nav {
        background-color: #26AD60;
        margin: 10px 10px 0px 10px;
    }
    nav ul {
        margin: 0px;
        list-style-type: none;
        padding: 15px 0px 15px 0px;
    }
    nav ul li {
        display: inline;
        padding: 5px 10px 5px 10px;
    }
    nav ul li a:link, nav ul li a:visited {
        color: #F9F9F9;
        border-bottom: none;
        font-weight: bold;
        text-decoration: none;
    }
    nav ul li a:active {
        background-color: #1C8148;
        text-decoration: none;
    }
    nav ul li:hover {
        background-color: #1C8148;
        color: #F9F9F9;
    }
    


    Solution :

    Its good if you use a:hover and the properties given to it... which allow user to have clickable area been selected and highlighted.

        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">project</a></li>
            </ul>
        </nav>
    

    CSS:

        nav{
            display:block;
            background:#26AD60;
        }
        nav ul{
            list-style:none;
            margin:0px;
            padding:0px;
            overflow:hidden;
        }
        nav ul li{
            float:left;
            border-right: 1px dashed rgba(255, 255, 255, 0.25);    
        }
        nav ul li:last-child{
            border:none;
        }
        nav ul li a{
            transition: all 0.25s linear 0s;
           padding: 0px 20px;
           line-height: 50px;
           outline: medium none;
           font-family:arial;
           font-size:12px;
           color: rgb(255, 255, 255);
           text-shadow: none;
           text-transform: uppercase;
           text-decoration:none;
           display:block;
        }
        nav ul li a:hover{
           background: #229b56;
        }
    

    Please check this jsfiddle to see the same.


      CSS Howto..

      how to copy font-family from a webpage

      Css how to set 3 block block/div's in one line [closed]

      How to create a mobile navigation toggle using pure CSS?

      how to add background image to css3 arrow

      How to include css and jquery in joomla component

      Visual studio 2013 crash when editing a css file. How do I troubleshoot?

      How to apply css to div which has no class?

      How to darken a background using CSS?

      How to draw solid/dotted/dashed lines using most basic HTML/CSS possible (for tcpdf to render them correctly)

      How can i make this border to the end?CSS

      SMACSS and BEM: How to position Module inside of a Module?

      How to create a horse-shoe-like gauge using CSS

      How do I get nested divs to be same height and expand to the largest of the heights?

      How to get rid of the white vertical stroke after every repeating background image done with repeat-x value in CSS?

      How to apply css animation to angular view when the view is called

      How to resize trapezoid in CSS when browser window resize

      How do I get a CSS class to show up in my javascript with my previous method?

      How to make text on the same line different font without using extra divs?

      How to make jquery click() work with css button?

      How to insert variables in inline CSS rules with pure JavaScript?

      How to animate text with css font-weight property in jQuery ? normal to bold

      How to Find and replace class with javascript (No JQ)

      How to create an infinite Sign Trajectory using CSS animation?

      How to don't include the google font css in one specific button only?

      How to print data from left to right in html using css

      How to set icon of an page using CSS

      CSS, how to size an img back to its width attribute

      How can I “cloak” my Javascript and CSS files using PHP?

      how do you center and left align columns, at the same time, in bootstrap or regular html5?

      How to make rounded tabs with css? [closed]