jQuery UI button Styling - Overflow?

Hi I have problem with Jquery Button UI “.navControl” it is overly on the nav drop menu “.menu”



	padding: 4px 0px 4px 8px;

div.menu ul
	list-style: none;
	margin: 0px;
	padding: 0px;
	width: auto;

div.menu ul li a, div.menu ul li a:visited
	background-color: #465c71;
	border: 1px #4e667d solid;
	color: #dde4ec;
	display: block;
	line-height: 1.35em;
	padding: 4px 20px;
	text-decoration: none;
	white-space: nowrap;

div.menu ul li a:hover
	background-color: #bfcbd6;
	color: #465c71;
	text-decoration: none;

div.menu ul li a:active
	background-color: #465c71;
	color: #cfdbe6;
	text-decoration: none;
/* #navControl

.navControl li
	padding: 5px 5px;

.navControl li a


Without html I can’t tell you which is the appropriate element to add the z-index but you should do this:

If the menu and the buttons are siblings then simply add position:relative to the menu container and then add a high z-index. Next add position:relative to the button container and set a lower z-index than the menu.

If the elements aren’t siblings then use the same approach on the parents of those elements that are siblings.

Note that only positioned elements can have z-index applied so if the element is static then you need to add position:relative as well.

this my html mark up

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title>Compudata Project Manager</title>
    <link href="/Styles/Site.css" rel="stylesheet" type="text/css" />
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="Scripts/fancybox/jquery.fancybox.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="Scripts/fancybox/helpers/jquery.fancybox-buttons.css" />
    <script type="text/javascript" src="Scripts/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.8.20.js"></script>
    <script type="text/javascript" src="Scripts/jquery.validate.js"></script>
    <script type="text/javascript" src="Scripts/fancybox/jquery.fancybox.js"></script>
    <script type="text/javascript" src="Scripts/fancybox/helpers/jquery.fancybox-buttons.js"></script>
    <script type="text/javascript" src="Scripts/script.js"></script>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    <form runat="server">
    <div class="page">
        <div class="header">
           &nbsp;<div class="loginDisplay">
                <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                        [ <a href="~/Account/Login.aspx" id="HeadLoginStatus" runat="server">Log In</a>
                        Welcome <span class="bold">
                            <asp:LoginName ID="HeadLoginName" runat="server" />
                        </span>! [
                        <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out"
                            LogoutPageUrl="~/" />
            <div class="clear hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
                    IncludeStyleBlock="false" Orientation="Horizontal">
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" />
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About" />
                        <asp:MenuItem NavigateUrl="~/SearchTasks.aspx" Text="Search Task"
                            Value="Search Task"></asp:MenuItem>
                        <asp:MenuItem Text="Administrator" Value="Administrator">
                            <asp:MenuItem NavigateUrl="~/Admin/ManageProjects.aspx" Text="Manage Projects"
                                Value="Manage Projects"></asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/Admin/TasksListAdmin.aspx" Text="Tasks List Admin"
                                Value="Tasks List Admin"></asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/Admin/PriorityAdmin.aspx" Text="Priority Admin"
                                Value="Priority Admin"></asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/Admin/StatusAdmin.aspx" Text="Status Admin"
                                Value="Status Admin"></asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/Admin/BillableTypeAdmin.aspx"
                                Text="BillableType Admin" Value="BillableType Admin"></asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/Admin/RolesAdmin/ManageRoles.aspx" Text="New Item"
                                Value="New Item"></asp:MenuItem>
        <div class="main">
                <ul class="navControl">
                    <li><a href="TasksForm.aspx">+ Create New Task</a></li>
                    <li><a href="ProjectForm.aspx">+ Create New Project</a></li>
                    <li><a href="TimeSheetForm.aspx">+ Enter Timesheet</a></li>
            <div id="sideNav">

         <uc1:uc_quickNav_Projects ID="uc_quickNav_Projects1" runat="server" />
            <br />

            <div id="mainContent">
                <asp:ContentPlaceHolder ID="MainContent" runat="server" />
            </div >
        <div class="clear">
    <div class="footer">

I’d need a link to the page to debug properly but if the menu is inside #header and the buttons inside #main then the following will work:


However if your buttons are placed by some other means using jquery then we’d need to see the generated view source of the document.