使用悬停时的CSS菜单可防止输入获得焦点

时间：2012-11-06 07:50:55

标签： css

我从教程中调整了这个菜单。有些事情没有用，所以我不得不做出改变。我是一个完整的CSS PHP新手。 我遇到的问题是，悬停是这个菜单的关键，导致输入框被一个不可见的图层覆盖，这会阻止它们获得焦点。 如果你单击页面底部并向上移动它将工作，但如果你第一次浏览菜单它没有。我已经尝试了很多东西来解决这个问题，但由于我的CSS能力有限，我还没有 能解决这个问题。 所有帮助将不胜感激 感谢

它需要一个图像，但它似乎作为一个新成员我不能发布图像:( 这是我从哪里得到它的链接，图像就在那里 http://www.script-tutorials.com/demos/91/index.html

CSS 

body {
background-color:#f1f1f1;
font-family: georgia,sans-serif;
color:#333;
margin:0;
padding:0;
}


#wrapper {
width:70%;
background-color:#f8f8f8;
margin:0 auto;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
}

#wrapper1{
width:98%;
background-color:#f8f8f8;
margin:0 auto;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
}



#content {
width:76%;
float:left;
padding:10px;
}


#content input{

margin:5;

}





#content br{
clear: left;
}



.navbar {
    position:relative;

    width:90%;
    height:20px;
    margin:20px auto;
    padding:15px;
    border-radius:3px;
    /*-moz-border-radius:3px;*/
    -webkit-border-radius:3px;
}

/*------------------------------------------------------------------------------*/
/* main menu styles */
#nav,#nav ul {
    font-family:verdana;
    list-style:none;
    margin:0;
    padding:0;
    position:absolute;

}
#nav {
    height:50px;
    left:0%;
    overflow:hidden;
    top:0;

}
#nav li {
    float:left;
    position:relative;
    z-index:10;
}
#nav li a {
    background:url(bg-menu.png) no-repeat center top;
    color:#fff;/*text color on menu*/
    display:block;
    float:left;
    font-size:14px;
    height:51px;
    line-height:40px;
    padding:0 10px;
    position:relative;
    text-decoration:none;
    z-index:20;
}
#nav li:first-child a {
    background:url(bg-menu.png) no-repeat left top;
    padding-left:45px;
}
#nav li ul li:first-child a {
    background-image:none;
    padding-left:10px;
}
#nav li.pad {
    background:url(bg-menu.png) no-repeat right top;
    display:block;
    height:51px;
    width:45px;
}
#nav li.xpad {
    background:url(bg-menu.png) no-repeat center top;
    display:block;
    height:51px;
    width:165px;
}


#nav ul {

    background:#2A3241;
    height:auto;
    padding:10px 0;
    position:absolute;
    top:-115px;
    width:120px;
    z-index:10;

    border-radius:8px; /*some css3*/
    /*-moz-border-radius:8px;*/
    -webkit-border-radius:8px;
    transition:0.8s ease-in-out;
    box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
/*  -moz-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);*/
    -webkit-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
    -moz-transition:0.8s ease-in-out;
    -o-transition:0.8s ease-in-out;
    -webkit-transition:all 0.8s ease-in-out;
}
#nav ul li {
    width:280px;
}
#nav ul li a {
    background:transparent;
    height:20px;
    line-height:20px;
    width:160px;
}

 #nav:hover {
    height:200px;
}
#nav li:hover ul {
    -moz-transform:translate(0,161px); /*some css3 - moves entire sub menu box down*/
    -o-transform:translate(0,161px);
    -webkit-transform:translate(0,161px);
}
#nav a:hover,#nav li:hover > a {/*changes color of text when mouse over*/
    color:#d632f2;

}

菜单

<div class="navbar">

       <ul id="nav">
    <li><a ></a></li>   
            <li><a href="#">Home</a>

                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Login</a></li>
                        <li><a href="#">Page 1</a></li>
                        <li><a href="#">Page 2</a></li>                     
                    </ul>


            </li>
 <li class="xpad"></li> 
            <li><a href="#">Testing</a>

                    <ul>
                        <li><a href="#">Single Asset</a></li>
                        <li><a href="#">Asset Groups</a></li>
                    </ul>

            </li>
 <li class="xpad"></li>     
            <li><a href="#">Reports</a>

                    <ul>
                        <li><a href="#">Page 1</a></li>
                        <li><a href="#">Page 2</a></li>                 
                    </ul>

            </li>
 <li class="xpad"></li> 
            <li><a href="#">Administration</a>

                    <ul>
                        <li><a href="#">Page 4</a></li>
                        <li><a href="#">Page 5</a></li>
                    </ul>

            </li>
 <li><a ></a></li>          
            <li class="pad"></li>
        </ul>
</div> <!-- end #nav -->

测试页

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<meta name="author" content="" />

<link rel="stylesheet" href="style.css" type="text/css"  media="screen" />





<title>Menu Test</title>

</head>

    <body>

        <div id="wrapper">
<?php include('nav.php'); ?>


<div id="content">
<label for="name">Name</label>
<input <input name="name" type="text" id="name" value = "1"><br />
<label for="phone">Phone Number</label>';
<input <input name="phone" type="text" id="phone" value = "2"><br />
<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>



<h3>Paragraph Element</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<h3>Another Heading Starting Point</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

</div> <!-- end #content -->



        </div> <!-- End #wrapper -->

    </body>

</html>

1 个答案:

答案 0 :(得分：0)

尝试删除

<input

在输入字段之前。这可能有所帮助。

相关问题
最新问题