Almost all Yii applications use CMenu at the top of each page to show options available to the user, and many include drop-down components to allow more fine-grained selection.

But when the page's content uses CJuiTabs, many find that the drop-down CMenus are hidden behind the JuiTabs content. This is very annoying, and there don't appear to be any Yii or jQuery options directly on point to fixing this.

The solution involves insuring that CMenu has a higher z-index than the main content does, and this can be achieved by adding htmlOptions to the CMenu widget in the main layout file:

// in protected/views/layouts/main.php
...
<div id="mainmenu">
    <?php $this->widget('zii.widgets.CMenu', array(
           // z-index=1 means CMenu appears on top of everything in the content section
           'htmlOptions' => array( 'style' => 'position: relative; z-index: 1' ),

           'items'=>array(
                array('label' => 'Home',  'url' => array('/site/index')),
                array('label' => 'About', 'url' => array('/site/page', 'view' => 'about')),
                ...
           ),
           ...

Alternately (and perhaps better), this fix can be made in the site-wide CSS file by referencing the id of the div containing your CMenu: ~~~ [css] / in webroot/css/main.css /

mainmenu { ¶

position: relative;
z-index: 1

} ~~~ Both ought to achieve the same thing.

Note - changing the position to relative may have other unintended CSS/HTML effects; it's wise to test your whole site extensively after making this change.

Written for: Yii 1.1.6