#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2010
    Posts
    28
    Rep Power
    0

    Unhappy CSS menu problems


    I want to make it so that when you go to type something into the textbox(lastname or firstname) the menu stays open. right now if you try and type something into the textbox the menu closes but you still keep right on writing and then go back into the menu and click the submit button. I also want it so that you can press the <enter> key on your keyboard and it will submit the search query that you are working on.
    if there is a better way of doing this all please let me know

    this is menu.php
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>BHI and Roth's Website menu</title>
    <?php
    <link rel="stylesheet" type="text/css" href="menu_css.css" />
    </
    head>
    <
    BODY STYLE="background-color:transparent">

    <
    ul class="pureCssMenu pureCssMenum">
        <
    li class="pureCssMenui"><class="pureCssMenui" href="home.php" target="showframe">Home</a></li>
        <
    li class="pureCssMenui"><class="pureCssMenui" href="#"><span>Fill-in a form</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
        <
    ul class="pureCssMenum">
            <
    li class="pureCssMenui"><class="pureCssMenui" href="form_bhi_hoac.php" target="showframe">102HOAC</a></li>
            <
    li class="pureCssMenui"><class="pureCssMenui" href="form_for_adding_email_addresses.php" target="showframe">Email database</a></li>
            <
    li class="pureCssMenui"><class="pureCssMenui" href="form_support_application.php" target="showframe">Support Application</a></li>
        </
    ul>
        <!--[if 
    lte IE 6]></td></tr></table></a><![endif]--></li>
        <
    li class="pureCssMenui"><class="pureCssMenui" href="#"><span>View the form data</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
        <
    ul class="pureCssMenum">
            <
    li class="pureCssMenui"><class="pureCssMenui" href="view_102hoac.php" target="showframe">102HOAC</a></li>
            <
    li class="pureCssMenui"><class="pureCssMenui" href="#"><span>Search Addressbook by:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
            <
    ul class="pureCssMenum">
                
                    
                    <
    li class="pureCssMenui"><class="pureCssMenui" href="#"><span>Last Name:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
                    <
    ul class="pureCssMenum">
                        <
    li class="pureCssMenui"><form class="pureCssMenui" action="lastname_search.php" method="post" target="showframe"><input type="text" name="lastname" size="30" /><input type="submit" align="right" value="Search" /></form></li>
                    </
    ul>
                    <!--[if 
    lte IE 6]></td></tr></table></a><![endif]--></li>
                

                
                    <
    li class="pureCssMenui"><class="pureCssMenui" href="#"><span>First Name:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
                    <
    ul class="pureCssMenum">
                        <
    li class="pureCssMenui"><form class="pureCssMenui" action="firstname_search.php" method="post" target="showframe"><input type="text" name="firstname" size="30" /><input type="submit" align="right" value="Search" /></form></li>
                    </
    ul>
                    <!--[if 
    lte IE 6]></td></tr></table></a><![endif]--></li>
                
            </
    ul>
            

            <
    li class="pureCssMenui"><class="pureCssMenui" href="sa.php" target="showframe">Support Application</a></li>
        </
    ul>
        <!--[if 
    lte IE 6]></td></tr></table></a><![endif]--></li>
        <
    li class="pureCssMenui"><class="pureCssMenui" href="#"><span>Resources</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
        <
    ul class="pureCssMenui">
            <
    li class="pureCssMenui"><class="pureCssMenui" href="#"><span>View BHI Brochure -></span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
            <
    ul class="pureCssMenum">
                <
    li class="pureCssMenui"><class="pureCssMenui" href="bhi_brochure_feb_08.pdf" target="_blank">in .pdf format</a></li>
                <
    li class="pureCssMenui"><class="pureCssMenui" href="bhi_brochure_feb_08.swf" target="_blank">in .swf format</a></li>
            </
    ul>
        </
    ul>
        <!--[if 
    lte IE 6]></td></tr></table></a><![endif]--></li>
    <
    li class="pureCssMenui"><class="pureCssMenui" href="gallery.html" target="showframe">Photo Gallery</a></li>
        <
    li class="pureCssMenui"><class="pureCssMenui" href="edit.php" target="showframe">Edit account information</a></li>
        <
    li class="pureCssMenui"><class="pureCssMenui" href="logout.php" target="_top">Logout</a></li>
    </
    ul>

    </
    body>
    </
    html


    <?
    php
    }
              }
              }
    else
    //if the cookie does not exist, they are taken to the login screen
    {
    header("Location: login.php");
    }
    ?> 
    </html>
    And this is menu_css.css
    Code:
    #pcm{display:none;}
    ul.pureCssMenu ul{display:none}
    ul.pureCssMenu li:hover>ul{display:block}
    ul.pureCssMenu ul{position: absolute;left:0px;top:100%;}
    ul.pureCssMenu ul ul{position: absolute;left:100%;top:0px;}
    ul.pureCssMenu,ul.pureCssMenu ul {
    	margin:0px;
    	list-style:none;
    	padding:0px 2px 2px 0px;
    	background-color:#990033;
    	background-repeat:repeat;
    	border-color:#FFEE00;
    	border-width:1px;
    	border-style:solid;
    }
    ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
    	display:block;
    	zoom:1;
    	float: left;
    }
    ul.pureCssMenu ul{
    	width:210px;/*width:138.6px;*/
    }
    ul.pureCssMenu li{
    	display:block;
    	margin:2px 0px 0px 2px;
    	font-size:0px;
    }
    ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
    outline-style:none;
    }
    ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
    	display:block;
    	vertical-align:middle;
    	background-color:#990033;
    	border-width:0px;
    	border-color:#990033;
    	border-style:solid;
    	text-align:center;
    	text-decoration:none;
    	padding:4px;
    	_padding-left:4;
    	font:normal 11.5px Verdana;
    	color: #FFEE00;
    	text-decoration:none;
    	cursor:default;
    }
    ul.pureCssMenu span{
    	overflow:hidden;
    }
    ul.pureCssMenu li {
    	float:left;
    }
    ul.pureCssMenu ul li {
    	float:none;
    }
    ul.pureCssMenu ul a {
    	text-align:left;
    	white-space:nowrap;
    }
    ul.pureCssMenu li.sep{
    	text-align:center;
    	padding:0px;
    	line-height:0;
    	height:100%;
    }
    ul.pureCssMenu li.sep span{
    	float:none;
    	padding-right:0;
    	width:5;
    	height:16;
    	display:inline-block;
    	background-color:#BB99BB;
    	background-image:none;
    }
    ul.pureCssMenu ul li.sep span{
    	width:80%;
    	height:3;
    }
    ul.pureCssMenu li:hover{
    	position:relative;
    }
    ul.pureCssMenu li:hover>a{
    	background-color:#FFEE00;
    	border-color:#0099cc;
    	border-style:solid;
    	font:normal 11.5px Verdana;
    	color: #990033;
    	text-decoration:none;
    }
    ul.pureCssMenu li a:hover{
    	position:relative;
    	background-color:#FFEE00;
    	border-color:#990033;
    	border-style:solid;
    	font:normal 11.5px Verdana;
    	color: #990033;
    	text-decoration:none;
    }
    ul.pureCssMenu li.dis a {
    	color: #AAAAAA !important;
    }
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, the mysox1.

    This can't be done with CSS alone. You need JavaScript to keep the menu from closing.

    I'll move this to the JavaScript forum for you.

    *** Thread Moved ***

    P.S. We don't need to see your PHP code.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2010
    Posts
    28
    Rep Power
    0

    Thumbs up


    I ended up finding a site that gave me a menu that i downloaded and then i changed it to how i liked. Here Is the link. yes it does use js so thanks for telling me

IMN logo majestic logo threadwatch logo seochat tools logo