- This topic is empty.
-
AuthorPosts
-
February 8, 2010 at 5:44 pm #27926tafkanatorParticipant
Hi everyone!
Im creating 2-level menu with unordered list. The problem is that the second menu has to start where the first one starts ( pic 1 ). And im trying to keep it semantic. Here is the code i came up with:
Code:and css:
Code:.menu{
position:relative;
background:#CCC;
width:305px
}
.menu ul{
margin:0;
padding:0;
list-style:none;
position:relative;
}
.menu ul li{
margin:0;
padding:0
}
.menu ul a{
color:#454444;
display:block;
width:114px;
text-align:right;
padding:2px 10px 2px 5px;
}
.menu ul a:hover,
.menu ul li.selected a{
text-decoration:none;
color:#00baf2;
background:url(images/menu_arrow.gif) no-repeat right 8px #ebf2f7;
}.menu ul ul{
position:absolute;
right:0;
margin:0;
top:0;
padding:0;
width:176px;
background:#ebf2f7
}The problem is in absolute positioning. <p> tag should below the menu, but it isnt. I tried giving a <div> tag position:relative. It didnt work. Is there a way to accomplish it not ruing html. Any ideas would be welcome.
PS! Im not trying to make a flyout menu. Second menu comes after page refresh not after hovering first class. And the weird words between <a> tags are estonian language :mrgreen:
February 9, 2010 at 4:27 am #70669tafkanatorParticipantsry but didnt work for me. <p> tag needs to be under the .menu div. Ill finish rest of the template and provide a link then. Maybe its easier to understand what i need then
February 9, 2010 at 8:43 pm #70708tafkanatorParticipantHere is the complete code
http://taavi.atv06.ee/egtt/Ill explain once more what i need:
*the menu on the left side has submenu. Submenu has to start at the same level where the first one did (and it does).
*Problem is that if i use position:absolute then everything that is under the menu doesent move down.
*menu is going to be dynamic so there can not be fixed heights.I provided an image of the way it should be.
Any ideas would be appreciated.
February 10, 2010 at 9:28 am #70717tafkanatorParticipantthis solution does not work. Its not dynamic. you are using margin-top:-63px. What if the first or fifth element was selected. The position of second level menu changes too. As i see at this point some things are just not possible. I guess ill just find a workaround in php code and make two seperate ul lists
February 10, 2010 at 10:32 am #70688tafkanatorParticipantwith this case there is no difference if i use height or min-height. And it is still static. Final product will have cms. User can add and delete menu items. I will never know how many menu items there will be. Fixed height is a stacic solution and sadly not working for me :(. It still can cause overflow or stupid whitespace
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.