September 11th, 2012, 10:27 PM
|
|
Registered User
|
|
Join Date: Sep 2012
Posts: 1
Time spent in forums: 15 m 19 sec
Reputation Power: 0
|
|
|
Menu - Submenu alignment issues
Hi there,
Im having a problem with trying to get the submenu to align with the list item in the main menu. The funny thing is, it is working with the sub sub menu and sub sub sub menu but just not the sub menu. It looks as though when you hover over a list item on the main menu, the sub menu is aligning to the unordered list itself and not the list item. Its driving me nuts!
If you go Tutorials > Webdesign > CSS you'll see what I want except the first submenu is not working.
Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 0px;
font-family:"Verdana";
font-size:11px;
list-style: none;
position: relative;
width: 20em;
}
nav ul li {
border-top: 1px solid #ffffff;
border-bottom: 1px solid #575f6a;
}
nav ul li a {
display: block;
padding: 10px 25px;
color: #757575;
text-decoration: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
font-weight: bold;
}
nav ul li:hover a {
color: #ffffff;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul ul {
display: none;
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; left: 100%; top:0;
font-weight: normal;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
font-weight: normal;
}
nav ul ul li a {
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
font-weight: bold;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
-->
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a>
<ul>
<li><a href="#">Cool Effects</a></li>
<li><a href="#">Awesome Effects</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Articles</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">User Experience</a></li>
</ul>
</li>
<li><a href="#">Inspiration</a></li>
</ul>
</nav>
</body>
</html>
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
