SurgicalSteel Posted June 14, 2006 Share Posted June 14, 2006 hey,ok, what i have is a main menu horizontally along the top of the page and a submenu that drops down when you mouse over certain items. I have a div for content beneath the main menu and I would like to have it move down to make room for the submenu when the submenu is opened.here's my style sheet: body {background-color: #DDDDFF}div#menu{background-color: #888888; position:relative; top:10px; left:15%; width:70%; text-align:center; }div#content {background-color:#DDDDDD; position:relative; top:15px; left:15%; width:70%; height:300px}a.menu {cursor:pointer}a:hover > div#submenu {display:block}a:link {color:#000000; text-decoration:none}div#submenu{background-color: #AAAAAA; display:none; position:absolute; left:0%; width:100%; text-align:center; z-index:1} and here's the markup: <html><head><link rel="stylesheet" type="text/css" href="styles.css" /></head><body><div id="menu"><a href="games.html">GAMES</a> | <a href="dc.html">DIGITAL COLLAGE</a> | <a class="menu">PHOTOGRAPHY <div id="submenu"> <a href="portraits.html">PORTRAITS</a> | LANDSCAPES </div></a> | <a href="film.html">FILM/VIDEO</a> | <a href="print.html">PRINT DESIGN</a></div><div id="content">dfjgdnfgdfngdfgdklgndng</div></body> thanks all. Link to comment Share on other sites More sharing options...
scott100 Posted June 14, 2006 Share Posted June 14, 2006 I tried the code but it didn't work If you want the submenu to push the div down then you are going to have to remove the parts in red, try position:relative;div#submenu{background-color: #AAAAAA; display:none; position:absolute; left:0%; width:100%; text-align:center; z-index:1} Link to comment Share on other sites More sharing options...
SurgicalSteel Posted June 14, 2006 Author Share Posted June 14, 2006 Hm, yea it seems that code doesn't work in IE. Microsoft is awesome. Anyhoo, that kind of fixed it, but now when I mouse over the photo menu item it drops down a line and splits the menu into two lines. like first it looks like this: +---------------------------------------------------------------------------------+ | MENU ITEM | MENU ITEM | PHOTOGRAPHY | MENU ITEM | MENU ITEM |+---------------------------------------------------------------------------------++---------------------------------------------------------------------------------+| content |+-------------------------------------------------------------------------------- + Then when i mouse over it looks like this: +-------------------------------------------------+ | MENU ITEM | MENU ITEM | PHOTOGRAPHY |+-------------------------------------------------++-------------------------------------------------+ | SUBMENU | SUBMENU | SUBMENU |+-------------------------------------------------++------------------------------+ | MENU ITEM | MENU ITEM |+------------------------------++---------------------------------------------------------------------------------+| content |+-------------------------------------------------------------------------------- + when i want it to look like this: +---------------------------------------------------------------------------------+ | MENU ITEM | MENU ITEM | PHOTOGRAPHY | MENU ITEM | MENU ITEM |+---------------------------------------------------------------------------------++---------------------------------------------------------------------------------+ | SUBMENU | SUBMENU | SUBMENU+---------------------------------------------------------------------------------++---------------------------------------------------------------------------------+| content |+-------------------------------------------------------------------------------- + Link to comment Share on other sites More sharing options...
scott100 Posted June 14, 2006 Share Posted June 14, 2006 Hm, yea it seems that code doesn't work in IE. Microsoft is awesome. Anyhoo, that kind of fixed it, but now when I mouse over the photo menu item it drops down a line and splits the menu into two lines. like first it looks like this:Probably has something to do with your submenu being located in the code before the rest of the main menu items.Do you have fully working code pasted anywhere on the net to look at? that might make it easier to figure this out. Link to comment Share on other sites More sharing options...
SurgicalSteel Posted June 14, 2006 Author Share Posted June 14, 2006 Probably has something to do with your submenu being located in the code before the rest of the main menu items.Do you have fully working code pasted anywhere on the net to look at? that might make it easier to figure this out.<{POST_SNAPBACK}> i figure that's what the problem is, but i don't know how else to nest one element inside of another. the code i posted works in fire fox, i don't know how to make it work in IE, sorry. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now