MonoX support board

Start the conversation, ask questions and share tips and solutions with fellow developers.

Non-registered users can only browse through our support boards. Please register now if you want to post your questions. It takes a second and it is completely free. Alternatively, you can log in without registration using your credentials at major sites such as Google, Microsoft Live, OpenId, Facebook, LinkedIn or Yahoo.

Dropdown menu location  (Mono Support )

Viewed 14442 time(s), 6 post(s) 11/30/2012 11:38:25 AMby Zoomicon
Zoomicon

Zoomicon

11/30/2012 11:38:25 AM
when one uses nested pages it seems the drop-down menu shown uses a hardcoded vertical offset from the CSS. This doesn't take in mind the admin bar that is showing for admins/moderators so the dropdown menu shows higher, obscuring the menubar
</br>
</br>this isn't a problem if the parent item on the menubar is a dummy container (made at Pages tree in admin UI using Add container page), but if you've nested other pages under a page you want to be also able to click that parent page (but you can't since the popup menu shows above that toplevel menu item it when the admin bar is at the top)
</br>
</br>obviously the menu script should add some extra offset given to it via some global variable or something by the serverside to take in mind not only the admin bar but anyother content that may show at the top (like page L&F [look and feel] configuration / webparts selection-properties etc. UI)
This content has not been rated yet. 
2793 Reputation 345 Total posts
ivanb

ivanb

12/4/2012 1:56:41 PM
Zoomicon, can you please attach screenshot?
This content has not been rated yet. 
459 Reputation 55 Total posts
Zoomicon

Zoomicon

12/4/2012 3:38:48 PM
Our site's theme (see screenshot) currently uses the following CSS, was made based on the demo site
</br>
</br>
</br>
</br>(seems the issue is at "navigation" CSS class with the hardcoded "top" there)
</br>
</br>
</br> [btw a IE10RC/Win7 bug that made my CSS snippet below unreadable seems to be that when you upload attachments to a post it adds one blank row after every row in the post text]
</br>
</br>
</br>
</br>
</br> .navigation ul ul
</br>
</br>
</br>
</br> {
</br>
</br>
</br>
</br> position: absolute;
</br>
</br>
</br>
</br> z-index: 5000;
</br>
</br>
</br>
</br> top: 150px;
</br>
</br>
</br>
</br> float: left;
</br>
</br>
</br>
</br> clear: both;
</br>
</br>
</br>
</br> }
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br> and colors / paddings: .navigation .level0 li
</br>
</br>
</br>
</br> {
</br>
</br>
</br>
</br> display: block;
</br>
</br>
</br>
</br> float: left;
</br>
</br>
</br>
</br> clear:both;
</br>
</br>
</br>
</br> margin: 0px 0px 0px -10px !important;
</br>
</br>
</br>
</br> overflow: hidden;
</br>
</br>
</br>
</br> border-right: solid 1px Transparent;
</br>
</br>
</br>
</br> border-top: solid 1px Transparent;
</br>
</br>
</br>
</br> }
</br>
</br>
</br>
</br> .navigation .level0 li a
</br>
</br>
</br>
</br> {
</br>
</br>
</br>
</br> background: #27140e !important;
</br>
</br>
</br>
</br> text-decoration:none;
</br>
</br>
</br>
</br> color: #fff;
</br>
</br>
</br>
</br> display:block;
</br>
</br>
</br>
</br> padding: 0px !important;
</br>
</br>
</br>
</br> margin: 0px 6px 0px 0px !important;
</br>
</br>
</br>
</br> text-align: left;
</br>
</br>
</br>
</br> font-family: Verdana, Arial, Helvetica, sans-serif;
</br>
</br>
</br>
</br> font-size: 11px;
</br>
</br>
</br>
</br> height: auto !important;
</br>
</br>
</br>
</br> }
</br>
</br>
</br>
</br> .navigation .level0 li a.selected,
</br>
</br>
</br>
</br> .navigation .level0 li a:hover
</br>
</br>
</br>
</br> {
</br>
</br>
</br>
</br> background: #b0b535 !important;
</br>
</br>
</br>
</br> padding: 0px !important;
</br>
</br>
</br>
</br> margin: 0px 6px 0px 0px !important;
</br>
</br>
</br>
</br> } .navigation .level0 li a span
</br>
</br>
</br>
</br> {
</br>
</br>
</br>
</br> background: #27140e no-repeat top right !important;
</br>
</br>
</br>
</br> margin: 0 -10px 0 10px !important;
</br>
</br>
</br>
</br> padding: 4px 0px 0px 0px !important;
</br>
</br>
</br>
</br> height: 18px !important;
</br>
</br>
</br>
</br> width:140px;
</br>
</br>
</br>
</br> color: #fff;
</br>
</br>
</br>
</br> }
</br>
</br>
</br>
</br> .navigation .level0 li a.selected span,
</br>
</br>
</br>
</br> .navigation .level0 li a:hover span
</br>
</br>
</br>
</br> {
</br>
</br>
</br>
</br> background: #b0b535 no-repeat top right !important;
</br>
</br>
</br>
</br> margin: 0 -10px 0 10px !important;
</br>
</br>
</br>
</br> padding: 4px 0px 0px 0px !important;
</br>
</br>
</br>
</br> height: 18px !important;
</br>
</br>
</br>
</br> width:140px;
</br>
</br>
</br>
</br> }
This content has not been rated yet. 
2793 Reputation 345 Total posts
ivanb

ivanb

12/5/2012 3:33:53 PM
Zoomicon,
I think you have a CSS issue here. You should position your .navigation ul ul to some other then current parent element, perhaps .navigation. Try that by assigning position: relative; rule to .navigation or some other parent container.

I hope this will help,
regards.
Rated 5.00, 1 vote(s). 
459 Reputation 55 Total posts
Clipflair1

Clipflair1

12/19/2012 11:21:01 AM
FIXED! Thank you very much for your help.
+ MENU 2nd Level UI css configuration
  -     .navigation ul
    {
        padding: 4px 0 0 0;
        margin: 0;
        list-style: none;
        float: left;   
     
            /* added */
            position:relative;
    }
 
    .navigation ul ul
    {
    position: absolute;
    z-index: 5000;
        float: left;
    clear: both;
     
        /* changed */
        top:40px;
    }
This content has not been rated yet. 
159 Reputation 18 Total posts
ivanb

ivanb

12/19/2012 11:26:13 AM
You are welcome.
This content has not been rated yet. 
459 Reputation 55 Total posts