tinfanide Posted October 12, 2011 Share Posted October 12, 2011 li { list-style: none; background: yellow; width: 100px; height: 30px; display: block; float: right; }ul li { position: relative;}ul li a { text-decoration: none; }ul li ul { display: none; }ul li ul li { background: #6F0; }ul li:hover ul { display: block; position: absolute; top: 32px; right: 0px; } How to make the submenu float right and keep the whole menu stay at the same position when the browser is resized?I feel very confused by the CSS float, relative position properties. First, I want the submenu to float right the same way as the menu. Second, I want to make the whole menu stay on the same position without being affected when the browser is resized. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 12, 2011 Share Posted October 12, 2011 Would help if we had the html code to go with it. As far as i can make out that's exactly what it does. also li { list-style: none; background: yellow; width: 100px; height: 30px; display: block; float: right; }ul li { position: relative;} are targeting the exact same elements The position absolute, right, left properties should be in the normal stale selector, only the styling that changes should be within the selector using hover pseudo ul li ul { display: none; position: absolute; top: 32px; right: 0px; }ul li:hover ul { display: block; } Link to comment Share on other sites More sharing options...
eTianbun Posted October 12, 2011 Share Posted October 12, 2011 addON+:To make the menu stay put even when you resize the window, make use of css: min-width NB: always try to make use of .class and #Id selectors instead of accessing the tag directly! Link to comment Share on other sites More sharing options...
thescientist Posted October 13, 2011 Share Posted October 13, 2011 addON+:To make the menu stay put even when you resize the window, make use of css:min-width NB: always try to make use of .class and #Id selectors instead of accessing the tag directly! why, what's wrong with using a tag as a selector? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 13, 2011 Share Posted October 13, 2011 why, what's wrong with using a tag as a selector? I think he is trying to point out in this case that if the poster was to use ul list within the page, he will end up with a menu at that location, unless a class or id is used to identify that this ul list only, was to be used as menu. Link to comment Share on other sites More sharing options...
eTianbun Posted October 13, 2011 Share Posted October 13, 2011 why, what's wrong with using a tag as a selector?Nothing is wrong with it, when you want all specific tag(s) to have some certain properties! in the case of Tin, accessing the tag directly, means: having all those properties assigned to all <ul> & <li> tags and not just for the menu. Link to comment Share on other sites More sharing options...
tinfanide Posted October 14, 2011 Author Share Posted October 14, 2011 <!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>#menu ul {position: absolute;top: 200px;right: 100px;width: 402px;height: 32px;}#menu li {list-style: none;background: yellow; float: right;position: relative;}#menu ul li a {text-decoration: none;width: 100px;height: 30px;display:block;}#menu ul ul {visibility:hidden;position: absolute; top: 32px; right: 0px;}#menu ul li:hover ul {visibility:visible;z-index:9999; }#menu ul li:hover ul li a:hover { color:#000; background:#CCC;}</style></head><body><div id="menu"><ul> <li><a href="#">Menu</a> <ul> <li><a href="#">Menu</a></li> <li><a href="#">Menu</a></li> <li><a href="#">Menu</a></li> <li><a href="#">Menu</a></li> </ul> </li> <li><a href="#">Menu</a> <ul> <li><a href="#">Menu</a></li> <li><a href="#">Menu</a></li> <li><a href="#">Menu</a></li> <li><a href="#">Menu</a></li> </ul></li> <li><a href="#">Menu</a></li> <li><a href="#">Menu</a></li></ul></div></body></html> I've just tried tweaking the codes a bit and it works as what I expected:1.menu & submenu float right2. window resize, fixed position of the menu But now I've come across another strange CSS problem... CSS is really a nuisance...I cannot figure out why the submenu immediately disappears once the mouse leaves the blocks of the menu. Link to comment Share on other sites More sharing options...
eTianbun Posted October 14, 2011 Share Posted October 14, 2011 The :hover pseudo class, is use to add hover effect to selector(s). For example, when you code: li:hover{display:block} you are saying: "display all <li> tag as block element, when it is hovered". When you place your mouse pointer on it, it shows, when you remove it, its disappears. What you are geting, is how its supposed to work. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.