Help Required for my CSS Vertical Navigation Menu

Dev Shed Forums Sponsor:

January 11th, 2013, 11:12 AM

wasanthawbw

Registered User

Join Date: Jan 2013

Posts: 2

Time spent in forums: 48 m 42 sec
Reputation 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.

January 11th, 2013, 06:02 PM

Nanomech

Contributing User

Join Date: Aug 2011

Location: The Pleiades

Posts: 196

Time spent in forums: 1 Day 23 h 53 m 4 sec
Reputation Power: 7

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.

__________________
"WERE NOT WORTHY!"

"WERE NOT WORTHY!"

January 12th, 2013, 04:47 AM

wasanthawbw

Registered User

Join Date: Jan 2013

Posts: 2

Time spent in forums: 48 m 42 sec
Reputation Power: 0

Thank you so much

Quote:

Originally Posted by Nanomech

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.

Help Required for my CSS Vertical Navigation Menu

Developer Shed Advertisers and Affiliates