well im just making another template and well i have a little problem with a paragraph and a submenu
i dont want to use javascript, well just cause i know with css alone its possible. so the problem is when i hover a link with a submenu, it shows correctly, and to me it looks great but when it opens the paragraph goes to the right side of it.
i dont know what to do
html:
css:
thanks all
i dont want to use javascript, well just cause i know with css alone its possible. so the problem is when i hover a link with a submenu, it shows correctly, and to me it looks great but when it opens the paragraph goes to the right side of it.
i dont know what to do
html:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Layout 1</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<ul id="menu">
<li><a href="#">home</a></li>
<li class="hasSubMenu"><a href="#">account</a>
<ul>
<li><a href="#1">list item 1</a></li>
<li><a href="#2">list item 2</a></li>
<li><a href="#3">list item 3</a></li>
</ul>
</li>
<li class="hasSubMenu"><a href="#">products</a>
<ul>
<li><a href="#1">product 1</a></li>
<li><a href="#2">product 2</a></li>
<li><a href="#3">product 3</a></li>
</ul>
</li>
<li><a href="#">f.a.q</a></li>
<li><a href="#">contact us</a></li>
</ul>
<p>i can't make this paragraph stop moving together with the submenu?! :[</p>
</div>
</body>
</html>css:
Code:
html, body {
margin: 0;
height: 100%;
padding: 0;
width: 100%;
}
body {
color: #000;
background-color: #fff;
font-family: Verdana;
font-size: 11px;
}
#wrapper {
clear: both;
margin-right: auto;
margin-left: auto;
width: 800px;
}
#menu {
background-color: #fff;
background-image: url(../img/menu-background.gif);
background-position: 0px 35px;
background-repeat: repeat-x;
clear: both;
display: block;
height: 36px;
list-style-type: none;
margin-top: 25px;
overflow: visible;
padding-left: 0;
width: 800px;
}
#menu > li {
float: left;
overflow: visible;
}
#menu > li > a {
border-bottom: 1px #ccc solid;
color: #666;
display: block;
font-size: 12px;
height: 28px;
padding: 7px 30px 0px 30px;
text-decoration: none;
}
#menu > li > ul {
border: 1px #ccc solid;
border-top-width: 0px;
display: none;
list-style-type: none;
padding-left: 0;
}
#menu > li > ul > li {
display: block;
clear: both;
}
#menu > li > ul > li > a {
border: 0;
display: block;
font-size: 11px;
padding: 6px 0px;
text-align: center;
text-decoration: none;
color: #666;
}
#menu > li:hover > a {
color: #000;
}
#menu > li.hasSubMenu:hover > a {
border-bottom-color: #fff;
}
#menu > li.hasSubMenu:hover > ul {
display: block;
}
#menu > li:hover > ul > li:hover > a {
color: #000;
}thanks all
