Forum Moderators: not2easy
DOCTYPE: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Here is the html code:
<div align="right">
<ul class="nav">
<li><strong>Home</strong></li>
<li><strong>Portfolio</strong></li>
<li><strong>Services</strong></li>
<li><strong>Request a Quote</strong></li>
<li><strong>Contact Us</strong></li>
</ul>
</div>
Here is my css code:
ul.nav{
display: table;
}
ul.block{
width: 100%;
table-layout: fixed;
}
ul.nav>li{
display: table-cell;
position: relative;
padding: 2px 20px;
}
/*
ul.nav>li:hover{
padding-right: 1px;
}*/
ul.nav li>ul{
display: none;
position: absolute;
max-width: 40em;
margin-left: -20px;
margin-top: 2px;
padding: 2px 5px;
}
ul.nav li:hover>ul{
display : block;
}
.nav ul li a{
display: block;
padding: 2px 10px;
}
/*Menu styles*/
ul.nav, .nav ul, .nav ul li a{
background-color: #fff;
color: #3C1E00;
}
ul.nav li:hover, .nav ul li a:hover{
background-color: #fff;
color: #3C1E00;
text-decoration: underline;
}
ul.nav li:active,
.nav ul li a:active{
background-color: #A85400;
color: #fff;
}
ul.nav,
.nav ul{
border: none;
}
.nav a{
text-decoration: none;
}
.nav ul li a:hover
.nav is the url, and you're specifying a ul inside .nav.
Secondly you should be doing all your hover effects on the link, it is the natural link object.
I've looked at your code and reworked a simplified version, is this what you are looking for? Added a BG color to hover to make sure it's all working.
If you ever do an inline nav that requires the navs butt precisely against each other, you have to remove all white space in your UL.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- doctype all on one line please -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
#nav {
margin:0; padding:0;
white-space: nowrap;
text-align: right;
}
#nav li {
margin-left: 20px;
padding:0;
width: 10em;
list-style: none;
display: inline;
}
#nav li a {
margin:0;
padding:2px 12px 2px 12px;
max-width: 40em;
width: 10em;
background-color: #fff;
color: #3C1E00;
text-decoration: none;
font-weight: 700;
}
#nav li a:hover {
background-color: #f7f7f7;
color: #3C1E00;
text-decoration: underline;
}
#nav li a:active {
background-color: #A85400;
color: #fff;
}
</style>
</head>
<body>
<!-- don't need the div, if you do use one don't use deprecated align=right-->
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Services</a></li>
<li><a href="">Request a Quote</a></li>
<li><a href="">Contact Us</a></li>
</ul>
<p> content content content content content content
content content content content content content content
content content content content </p>
</body>
</html>
