CSS3 DROP DOWN MENU DISAPPERS

[imti321]

The below mentioned code uses css3 to develop drop down menu .I am unable to solove a problem which crops up while i click sub2 h4 menu it disappeare below body text can anybody help .Thanks in advance.

<style>
body,,container,h1,navmenu,ul,sub1,sub2,darrow,rarrow,header,leftnav,rightnav,footer {
    margin:0px;
    padding:0px;

}
#container {
    position:absolute;
    background-color:#FFF;
    left: 136px;
    top: 1px;
    width: 850px;
    margin-bottom:50px;
    background-image:url(/img/img_2.jpg);
    background-position:center;
    margin-top:10px;
    margin-left:125px;
    height: 150px;

}

#header {
    border:-3px solid;
    border-color:#000;
    border-radius:25px;
}

#body {
width:800px;
height:100px;
background:#0F0;
position:relative;

}

#div:hover
{
width:800px;
}
body {

    margin-left:100px;
    font-family:Verdana, Geneva, sans-serif;
    background-color:#FDFA6C;
    padding:10px;
    text-shadow:2px 2px 3px #bad3ed;
    margin-bottom:10px;
    width:800px;
    height:1200px;
    margin-top:300px;
    text-justify:auto;
    text-wrap:supress;
    .p {
        font-size:16px;
        text-align: justify;
        text-wrap:supress;


    }


}

h1 {
    text-align:center;
    border-bottom:6px solid #009;
    margin-bottom: 50px;

}

/*Rules for Navigation Menu*/
/*===========================*/

#navmenu {
    margin-top:30px;
    padding-right:20px;
    background-color: #036;
    color: #344251;
    text-shadow:200px 200px 200px #bad3ed;
    text-emphasis:disc;
    font-weight:100;
    font-family:Tahoma, Geneva, sans-serif;
    color: #344251;
    position:absolute;




}
ul#navmenu,ul.sub1,ul.sub2 {
    list-style-type:none;
    font-size:9pt;
    background-color:#036;
    padding-top:0px;
    padding-right:8px;
    margin-top:20px;
    border:2px solid;
    border-radius:12px;
    position:absolute;

}

ul#navmenu li {

    width: 90px;
    text-align:center;
    position: relative;
    float:left;
    padding-top:2px;
    padding-right:50px;
    padding-bottom:2px;
    }
ul#navmenu a {
    text-decoration:none;
    display:block;
    width:120px;
    height:15px;
    line-height:15px;
    background-color:#000;
    border:4px solid;
    border-radius:25px;
    border-color: #069;
    border-bottom-right-radius:10px;


}
ul#navmenu .sub1 li {
    border:#003366;
    padding-right:50px;

}

ul#navmenu .sub1 a {
    margin-top: 5px;
    border:2px solid;
    border-radius:15px;

    }
ul#navmenu .sub2 a {
    margin-left:0px;
    border:2px solid;
    border-radius:25px;
    padding-right:20px;
    transition:all;

}
ul#navmenu li:hover > a {
    background-color: #CFC;
}

ul#navmenu li:hover a:hover {
    background-color: #FF0;

    }
ul#navmenu ul.sub1 {
    display: none;
    position: absolute;
    top:16px;
    left:0px;
}
ul#navmenu ul.sub2 {
    display:none;
    position: absolute;
    top:0px;
    left:126px;
}
ul#navmenu li:hover .sub1 {
    display:block
}

ul#navmenu .sub1 li:hover .sub2 {
    display:block;
    position:absolute;
    overflow-style:marquee-block;
    transition-property:all;

}
.darrow {
    font-size:12pt;
    position:relative;
    top:-20px;
    right:0px;
    left:60px;
}
.rarrow {
    font-size: 12pt;
    position:relative;
    top:0px;
    right:0px;
    margin-left:30px;
    padding-left:30px;
}


#body {

    margin-left:10px;
    font-family:Verdana, Geneva, sans-serif;
    background-color:#FDFA6C;
    text-decoration:none;
    text-shadow:2px 2px 3px #bad3ed;
    margin-left:120px;
    width:900px;
    white-space-collapse:collapse;
    margin-top:0px;


    text-align: justify;


}
#leftnav {
    align:left;
    margin-left:10px;
    position:relative;
    left: 2px;
    top: 413px;
    height: 200px;
    width: 100px;
    background-color: #CCFF33;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: small-caps;
    text-transform: lowercase;
    color: #666;
    text-decoration: blink;
    background-image: url(/img/Logo.png);
    letter-spacing: normal;
    text-align: left;
    vertical-align: text-top;
    word-spacing: normal;
    float: left;
    padding-bottom: 30px;
    border-top-width: medium;
    border-right-width: medium;
    border-bottom-width: medium;
    border-left-width: medium;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #C3F;
    border-right-color: #C3F;
    border-bottom-color: #C3F;
    border-left-color: #C3F;
    cursor: text;
    filter: BlendTrans(Duration=2);
    page-break-before: right;
    page-break-after: always;
    overflow: scroll;
    visibility: visible;
    z-index: auto;
    }

#rightnav {
    align: left;
    margin-left:400px;
    margin-right:30px;
    margin-top:30px;
    background-size:30px;
    font-style:inherit;
    position:absolute;
    left: 760px;
    top: 379px;
    width: 189px;
    height: 92px;
}

#footer {
    position:absolute;
    margin-top:100px;
    margin-left: 450px;
    top: 3100px;
    height: 36px;
    left: 55px;
    width: 358px;
}


</style>
}

[JorgeM]

Do you have the HTML somewhere so we can see the behaviour you are referring to?

[AARTI SHRIVAS]

need html also so i test it on my local server

[imti321]

<!DOCTYPE html><!-- PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navigation Menu</title>
<link href="newcss.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container">

<div id= "header"><img src="img/img_1.jpg" align:"center"; width:"100px";>Welcome To Embdia</div>
<ul div id= "navmenu">
<li><a href="#">h1</a></li>
<li><a href="#">h2</a><span class="darrow">&#9660;</span>
<ul div class="sub1">
    <li><a href="#">h 2.1</a></li>
    <li><a href="#">h 2.2</a></li>
    <li><a href="#">h 2.3</a></li>
</ul>
</li>
<li><a href="#">h3</a></li>
<li><a href="#">h4</a><span class="darrow">&#9660;</span>
  <ul class="sub1">
   <li><a href="#">h 4.1</a></li>
    <li><a href="#">h 4.2</a></li>
    <li><a href="#">h 4.3</a><span class="rarrow">&#9654;</span>
<ul class="sub2">    
      <li><a href="#">h 4.3.1</a></li>
      <li><a href="#">h 4.3.2</a></li>
      <li><a href="#">h 4.3.3</a></li>
   </ul>
  </li>
  </ul>
</li> 


<li><a href="#">h5</a></li>
</ul>
</div>
<div id="leftnav"> Comming soonkjkjklj kjkjkkjkjdf</div>
<div id="rightnav">
  <p>THis is right navthis is right baddddddddddddddddd</p>
</div>


<div id="body"><p><b>New Arrivals:</b> Check soon on website new arrivals.Elements

Many applications have small blocks of presentation code that need to be repeated from page to page, sometimes in different places in the layout. CakePHP can help you repeat parts of your website that need to be reused. These reusable parts are called Elements. Ads, help boxes, navigational controls, extra menus, login forms, and callouts are often implemented in CakePHP as elements. An element is basically a mini-view that can be included in other views, in layouts, and even within other elements. Elements can be used to make a view more readable, placing the rendering of repeating elements in its own file. They can also help you re-use content fragments in your application.

Elements live in the /app/View/Elements/ folder, and have the .ctp filename extension. They are output using the element method of the view:

echo $this->element('helpbox');

Passing Variables into an Element

You can pass data to an element through the elementӳ second argument:

echo $this->element('helpbox', array(
    "helptext" => "Oh, this text is very helpful."
));

Inside the element file, all the passed variables are available as members of the parameter array (in the same way that Controller::set() in the controller works with view files). In the above example, the /app/View/Elements/helpbox.ctp file can use the $helptext variable:

// inside app/View/Elements/helpbox.ctp
echo $helptext; //outputs "Oh, this text is very helpful."

The View::element() method also supports options for the element. The options supported are ңacheҠand ңallbacksҮ An example:

echo $this->element('helpbox', array(
        "helptext" => "This is passed to the element as $helptext",
        "foobar" => "This is passed to the element as $foobar",
    ),
    array(
        "cache" => "long_view", // uses the "long_view" cache configuration
        "callbacks" => true // set to true to have before/afterRender called for the element
    )
);

Element caching is facilitated through the Cache class. You can configure elements to be stored in any Cache configuration youӶe setup. This gives you a great amount of flexibility to decide where and for how long elements are stored. To cache different versions of the same element in an application, provide a unique cache key value using the following format:

$this->element('helpbox', array(), array(
        "cache" => array('config' => 'short', 'key' => 'unique value')
    )
);

You can take full advantage of elements by using requestAction(). The requestAction() function fetches view variables from a controller action and returns them as an array. This enables your elements to perform in true MVC style. Create a controller action that prepares the view variables for your elements, then call requestAction() inside the second parameter of element() to feed the element the view variables from your controller.

To do this, in your controller add something like the following for the Post example:

class PostsController extends AppController {
    // ...
    public function index() {
        $posts = $this->paginate();
        if ($this->request->is('requested')) {
            return $posts;
        } else {
            $this->set('posts', $posts);
        }
    }
}

And then in the element we can access the paginated posts model. To get the latest five posts in an ordered list we would do something like the following:

<h2>Latest Posts</h2>

Caching Elements

You can take advantage of CakePHP view caching if you supply a cache parameter. If set to true, it will cache the element in the ҤefaultҠCache configuration. Otherwise, you can set which cache configuration should be used. See Caching for more information on configuring Cache. A simple example of caching an element would be:

echo $this->element('helpbox', array(), array('cache' => true));

If you render the same element more than once in a view and have caching enabled be sure to set the ҫeyҠparameter to a different name each time. This will prevent each successive call from overwriting the previous element() callӳ cached result. E.g.:

echo $this->element(
    'helpbox',
    array('var' => $var),
    array('cache' => array('key' => 'first_use', 'config' => 'view_long')
);

echo $this->element(
    'helpbox',
    array('var' => $differenVar),
    array('cache' => array('key' => 'second_use', 'config' => 'view_long')
);

The above will ensure that both element results are cached separately. If you want all element caching to use the same cache configuration, you can save some repetition, by setting View::$elementCache to the cache configuration you want to use. CakePHP will use this configuration, when none is given.
Requesting Elements from a Plugin
2.0

To load an element from a plugin, use the plugin option (moved out of the data option in 1.x):

echo $this->element('helpbox', array(), array('plugin' => 'Contacts'));

2.1

If you are using a plugin and wish to use elements from within the plugin, just use the familiar plugin syntax. If the view is being rendered for a plugin controller/action, the plugin name will automatically be prefixed onto all elements used, unless another plugin name is present. If the element doesnӴ exist in the plugin, it will look in the main APP folder.:

echo $this->element('Contacts.helpbox');

If your view is a part of a plugin you can omit the plugin name. For example, if you are in the ContactsController of the Contacts plugin:

echo $this->element('helpbox');
// and
echo $this->element('Contacts.helpbox');

Are equivalent and will result in the same element being rendered.

Changed in version 2.1: The $options[plugin] option was deprecated and support for Plugin.element was added.
Creating your own view classes

You may need to create custom view classes to enable new types of data views, or add additional custom view rendering logic to your application. Like most components of CakePHP view classes have a few conventions:

    View class files should be put in App/View. For example App/View/PdfView.php
    View classes should be suffixed with View. For example PdfView.
    When referencing view class names you should omit the View suffix. For example $this->viewClass = 'Pdf';.

YouӬl also want to extend View to ensure things work correctly:

// in App/View/PdfView.php

App::uses('View', 'View');
class PdfView extends View {
    public function render($view = null, $layout = null) {
        // custom logic here.
    }
}

Replacing the render method lets you take full control over how your content is rendered.
View API

class View

View methods are accessible in all view, element and layout files. To call any view method use $this->method()

View::set(string $var, mixed $value)

    Views have a set() method that is analogous to the set() found in Controller objects. Using set() from your view file will add the variables to the layout and elements that will be rendered later. See Controller Methods for more information on using set().

    In your view file you can do:

    $this->set('activeMenuButton', 'posts');

    Then in your layout the $activeMenuButton variable will be available and contain the value ҰostsҮ

View::getVar(string $var)

    Gets the value of the viewVar with the name $var

View::getVars()

    Gets a list of all the available view variables in the current rendering scope. Returns an array of variable names.

View::element(string $elementPath, array $data, array $options = array())

    Renders an element or view partial. See the section on Elements for more information and examples.

View::uuid(string $object, mixed $url)

    Generates a unique non-random DOM ID for an object, based on the object type and url. This method is often used by helpers that need to generate unique DOM IDӳ for elements such as the JsHelper:

    $uuid = $this->uuid('form', array('controller' => 'posts', 'action' => 'index'));
    //$uuid contains 'form0425fe3bad'

View::addScript(string $name, string $content)

    Adds content to the internal scripts buffer. This buffer is made available in the layout as $scripts_for_layout. This method is helpful when creating helpers that need to add javascript or css directly to the layout. Keep in mind that scripts added from the layout, or elements in the layout will not be added to $scripts_for_layout. This method is most often used from inside helpers, like the JsHelper and HtmlHelper Helpers.

    Deprecated since version 2.1: Use the Using view blocks features instead.

View::blocks()

    Get the names of all defined blocks as an array.

View::start($name)

    Start a capturing block for a view block. See the section on Using view blocks for examples.

    New in version 2.1.

View::end()

    End the top most open capturing block. See the section on Using view blocks for examples.

    New in version 2.1.

View::append($name, $content)

    Append into the block with $name. See the section on Using view blocks for examples.

    New in version 2.1.

View::prepend($name, $content)

    Prepend into the block with $name. See the section on Using view blocks for examples.

    New in version 2.3.

View::startIfEmpty($name)

    Conditionally start a block, only if its empty. All content in the block will be captured and discarded if the block is already defined.

    New in version 2.3.

View::assign($name, $content)

    Assign the value of a block. This will overwrite any existing content. See the section on Using view blocks for examples.

    New in version 2.1.

View::fetch($name, $default = '')

    Fetch the value of a block. If a block is empty or undefined ђ will be returned. See the section on Using view blocks for examples.

    New in version 2.1.

View::extend($name)

    Extend the current view/element/layout with the named one. See the section on Extending Views for examples.

    New in version 2.1.

property View::$layout

    Set the layout the current view will be wrapped in.

property View::$elementCache

    The cache configuration used to cache elements. Setting this property will change the default configuration used to cache elements. This default can be overridden using the ңacheҠoption in the element method.

property View::$request

    An instance of CakeRequest. Use this instance to access information about the current request.

property View::$output

    Contains the last rendered content from a view, either the view file, or the layout content.

    Deprecated since version 2.1: Use $view->Blocks->get('content'); instead.

property View::$Blocks

    An instance of ViewBlock. Used to provide view block functionality in view rendering.

    New in version 2.1.

More about Views

    Themes
        Theme assets
        Increasing performance of plugin and theme assets
    Media Views
        Settable Parameters
    JSON and XML views
        Enabling data views in your application
        Using data views with the serialize key
        Using a data view with view files
        JSONP response
    Helpers
        Using and Configuring Helpers
        Using Helpers
        Callback methods
        Creating Helpers
            Including other Helpers
            Using your Helper
        Creating Functionality for All Helpers
        Helper API
            Callbacks
        Core Helpers

    Welcome
    Installation
    Getting Started
    CakePHP Overview
    Controllers
    Views
        Themes
        Media Views
        JSON and XML views
        Helpers
    Models
    Core Libraries
    Plugins
    Console and Shells
    Development
    Deployment
    Tutorials & Examples
    Contributing
    Appendices

Page contents

    Views
        View Templates
            Extending Views
        Using view blocks
            Displaying blocks
            Using blocks for script and CSS files
        Layouts
            Using layouts from plugins
        Elements
            Passing Variables into an Element
            Caching Elements
            Requesting Elements from a Plugin
            2.0
            2.1
        Creating your own view classes
        View API
        More about Views

Be in touch visit website on wedenesday onwards to check our new collections.<p>Hellow</p></div>

<div id="footer"><a href="/index.html"> HOME</a> |  CONTACT US | ABOUT US  </div>

</div>

</div>


</body>
</html>

now it is showing me the menu but when i try to click it it does not allow

[imti321]

Is anybody listening I need it badly.