Hi everyone,
The following code shows a pop up menu.
<!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>to_sitepoint</title>
<style type="text/css">
html, body, div, ul {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
#main {
position:relative;
width:950px;
height:30px;
margin:75px auto 0;/*75px beneath top of page, auto distance from page's right/left side*/
border:2px solid #8c8b4b;
}
#main li {
width:92px;
height:30px;
float:left;
list-style-type:none;
border:2px solid red;
}
#main li a { text-decoration:none; }
#main li ul li {
width:400px;
border:2px solid #8c8b4b;
height:30px;
}
li.menu1 { background-image:url('images/men1.png'); }
li.menu2 { background-image:url('images/men1.png'); }
.menu2 li a {
color:white;
font-weight:bold;
}
li.menu2 div {
position:absolute;
margin-left:-999em;
padding-top:200px;
}
li.menu2 ul {
top:200px;
list-style:none;
margin:0;
font-size:110%;
}
li.menu2:hover div { margin:0; }
li.menu2:hover ul li { clear:left; }
ul li ul.rounded-corner {
border:2px solid red;
height: 200px;
width:776px;
background-image:url(../banner/bg_to_sitepoint.gif);
background-repeat:no-repeat;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
}
</style>
</head>
<body>
<ul id="main">
<li class="menu1"><a href="#">menu item1</a></li>
<li class="menu2">menu item2
<div>
<ul class="rounded-corner">
<li><a href="#">submenu2 item1</a></li>
<li><a href="#">submenu2 item2</a></li>
<li><a href="#">submenu2 item3</a></li>
</ul>
</div>
</li>
</ul>
</body>
</html>
The submenu is consisted of a ul entity reesides inside a div.
I would like to change that ul’s position within its’ ancestor: a div.
I add: “top:100px;” to “li.menu2 ul” selector and see no impact whatsoever. “left” value is no good as well.
Can anyone explain me please why i cannot make that ul repositioned inside its’ div?
How can i make it move to other place within the div?
Attached is a screen shot of the present page which i’d like to change.
Thanks a lot !
The DIV is what’s receiving positioning, NOT the UL… since no positioning is set on the UL (relative or absolute) left/right/top/bottom have no effect. You need to target the DIV.
THOUGH – that’s a BAD menu; since, well… there’s no reason for that DIV to even exist. Nothing being done to that div couldn’t be applied to the UL. Likewise since both those outer LI are getting the same style, I’d assume they don’t need classes.
When I’m back at my workstation I’ll take a stab at putting together a cleaner/easier to deal with version of this for you.
Thank you very much !
I need classes for both main menu items for reasons not displayed in the example. Both have different bachground which is meaningless in the example.
The div is there to allow the sub menu to be positioned far from its’ menu ancestor.
I try to position that ul through the selector: li.menu2 ul which is not the div, but i fail to get any impact ! Can you explain me please why: li.menu2 ul {top:200px;) doesn’t make the ul positioned 200px downwards?
Thanks again. I’ll be waiting for the rest of your reply.
Alright, let’s see… first step get it into a MODERN doctype so you are no longer in transition from 1997 to 1998… get the CSS into a separate file so we’re testing ‘real world’, can have proper media types, and of course can actually edit CSS alongside the HTML instead of not being able to see both at the same time… (I really think the STYLE tag should be made obsolete), cut out the excess markup that isn’t doing anything… drop the presentational ‘rounded’ class…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
to_sitepoint
</title>
</head><body>
<ul id="mainMenu">
<li><a href="#">menu item1</a></li>
<li>
<span>menu item2</span>
<ul>
<li><a href="#">submenu2 item1</a></li>
<li><a href="#">submenu2 item2</a></li>
<li><a href="#">submenu2 item3</a></li>
</ul>
</li>
</ul>
</body></html>
Ok, in the cSS, remove the ‘reset’ part that’s not resetting anything… remove the pointless height declarations (though with you setting the centering and width I would suspect the page this is going into has ‘issues’… like being a crappy fixed width and probably declaring width dozens of times for what could be done once), remove the fixed width on the li since that usually looks like rubbish once you have real data in there…
Here’s what I came up with:
http://www.cutcodedown.com/for_others/deotpit/template.html
As with all my examples the directory:
http://www.cutcodedown.com/for_others/deotpit
is open for easy access. I used the ‘overflow’ technique instead of sliding the APO around because it’s just far, far simpler to deal with. There’s a thread about it here:
http://www.sitepoint.com/forums/showthread.php?767633-cascading-menus-new-way-doing
I wasn’t entirely certain where you were trying to position the hovers so I took a wild guess…
In the CSS:
http://www.cutcodedown.com/for_others/deotpit/screen.css
I went a wee bit overboard on the commenting to make it clear the how/what/why of it. This approach should work well all the way back to IE 5.5 if you throw a behavior file in there for those browsers like peterned’s hover-anywhere… if you don’t care about IE6/earlier, it’s fine as is.
Hope this helps.
Thanks a lot,
I’ll work on your reply hoping not to be back with more questions.