need help with css menu

andrew55 · 01-07-2013, 05:45 AM

I am trying to get this menu to show a white tap all of the time, which would be a separate background color from all the the tabs. It seems that the following code should work, but it does not. As you can see, I created a class "custom_current" on the tab which I want to have a white background at all times. Any suggestions greatly appreciated:

HTML:

Code:

<div class="custom_nav">
<ul>
<li><a href="/link1/">Tab 1</a></li>
<li><a href="/link2/">Tab 1</a></li>
<li><a href="/link3/">Tab 1</a></li>
<li class="custom_current"><a href="/link4/">Tab 1</a></li>
<li><a href="/link5/">Tab 1</a></li>
<li><a href="/link6/">Tab 1</a></li>
<li><a href="/link7/">Tab 1</a></li>
<li><a href="/link8/">Tab 1</a></li>
</ul>
</div>

CSS:

Code:

.custom_nav{
	width: 100%;
	background-color: #333;
}
	
.custom_nav ul{
	padding: 0;
	float: right;
	margin-top: 12px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}
 
.custom_nav ul li{
    display: inline;
		}
	 
.custom_nav ul li a{
	float: left;
	text-decoration: none;
	background-color: #EFEFEF;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #999999;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #999999;
	color: #003399;
	-moz-border-radius: 10px 10px 0px 0px;
	-webkit-border-radius: 10px 10px 0px 0px;
	-khtml-border-radius: 10px 10px 0px 0px;
	border-radius: 10px 10px 0px 0px;
	padding-top: 4px;
	padding-right: 7px;
	padding-bottom: 4px;
	padding-left: 7px;
	margin-right: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	}
 
.custom_nav ul li a:visited{
	color: #003399;
}

.menu ul li a:hover{
    color: #fff;
    background-color:#555555;}
 
.custom_current {
    background-color:#fff;
	background:#fff;
}

Excavator · 01-07-2013, 08:06 AM

Hello andrew55,
Since the #efefef background and rounded corners are on the anchor, applying a #fff background on the li is not going to show up.

Even when you put your .custom_current on an anchor, it is still not specific enough to override your

Code:

lor: #fff;
	background: #555555;
}
#custom_current {background: #fff;}
</style>
</head>
<body>
    <div class="custom_nav">
        <ul>
            <li><a href="/link1/">Tab 1</a></li>
            <li><a href="/link2/">Tab 2</a></li>
            <li><a href="/link3/">Tab 3</a></li>
            <li><a href="/link4/">Tab 4</a></li>
            <li><a href="/link5/">Tab 5</a></li>
            <li><a href="/link6/">Tab 6</a></li>
            <li><a id="custom_current" href="/link7/">Tab 7</a></li>
            <li><a href="/link8/">Tab 8</a></li>
        </ul>
    <!--end .custom_nav--></div>
</body>
</html>

Have a quick look at an easy way to have your menu indicate what page your guest is on. It's done with the body id.

andrew55 · 01-07-2013, 06:22 PM

Excavator - thanks for the response. Although that is a great menu, I'm not sure if it would work for me for this purpose. I need the menu tab to stay white for multiple pages (all actually), not just one page.

Excavator · 01-07-2013, 06:46 PM

Quote:

Originally Posted by andrew55

Excavator - thanks for the response. Although that is a great menu, I'm not sure if it would work for me for this purpose. I need the menu tab to stay white for multiple pages (all actually), not just one page.

So, does switching to an id applied to the anchor work for you then?