#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    2
    Rep Power
    0

    Help Required for my CSS Vertical Navigation Menu


    Hi, I am making a new site with CSS and want to add a vertical menu to my website. before working on the production site, I tried only this in a test page.

    in the menu I want to have a different color block when hoovering the navigation link in the defined <li> and text underlined.

    and the style sheet I created works perfectly fine with the test page and hoovering effect works perfectly. The problem I have is, when I inset the following code to the beginning of the style sheet, the hoovering effect does not work.

    *{ background-color: #000;
    color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    alignment-adjust: middle;
    }

    I need this part to my main style sheet in the production site because color theme of the site is "#000" and "#e9820c".

    Here is the working code of the style sheet;

    .sidenav {
    font-family:Arial, Helvetica, sans-serif;
    font-size:0.75em;
    width:150px;
    color:#807f7f;
    }
    .sidenav ul {
    margin:0;
    padding:0;
    }
    .sidenav li {
    list-style:none;
    }
    ul.top-level {
    background:#000;
    }
    ul.top-level li {
    border-bottom:#fff solid;
    border-top:#fff solid;
    border-width:0.5px;
    }
    .sidenav a {
    color: #000;
    cursor: pointer;
    display:block;
    height:25px;
    line-height:25px;
    text-indent:10px;
    text-decoration:none;
    color:#807f7f;
    width:100%;
    }
    .sidenav a:hover {
    text-decoration:underline;
    }
    .sidenav li:hover {
    background:#e9820c;
    position:relative;
    }


    So, when i put
    *{background-color: #000;
    color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    alignment-adjust: middle;
    }


    to the beginning of the style sheet, hoover effect goes. And if I dont put <a href:.....></a>, inside <li></li> this hoovering option works. But without defining a url, there is not point in having a navigation menu.

    This is my test html page;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="stylenav.css" />
    <title>Sidenav</title>
    </head>

    <body>
    <div class="sidenav">
    <ul class="top-level">
    <li>Home</li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">News</a></li>
    </ul>
    </div>
    </body>
    </html>

    for experts to have a look what I'm explaining, I've removed <a href= ></a> from the first <li>home</li> tag and it will show the hoover effect, but not the others.

    Please help me.
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    You are setting text-decoration: underline on the <a> anchor which is correct, then you set a hover effect on the <li> list item which changes the background color. So even when you take the <a href=""></a> out of the code, it will still be applying the color.

    Change this:
    Code:
    .sidenav a:hover {
    text-decoration:underline;
    }
    .sidenav li:hover {
    background:#e9820c;
    position:relative;
    }
    To this:
    Code:
    .sidenav li a:hover {
    background:#e9820c;
    text-decoration:underline;
    position: relative;
    }
    I'm not sure if you need to set a position on it but I left it in there anyway.

    Hope this helps,

    Regards,

    NM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    2
    Rep Power
    0

    Thank you so much


    Originally Posted by Nanomech
    You are setting text-decoration: underline on the <a> anchor which is correct, then you set a hover effect on the <li> list item which changes the background color. So even when you take the <a href=""></a> out of the code, it will still be applying the color.

    Change this:
    Code:
    .sidenav a:hover {
    text-decoration:underline;
    }
    .sidenav li:hover {
    background:#e9820c;
    position:relative;
    }
    To this:
    Code:
    .sidenav li a:hover {
    background:#e9820c;
    text-decoration:underline;
    position: relative;
    }
    I'm not sure if you need to set a position on it but I left it in there anyway.

    Hope this helps,

    Regards,

    NM.

    It works perfectly. simple adjustment. thank you again. cheers.

IMN logo majestic logo threadwatch logo seochat tools logo