1

我根据教程改编了这个菜单。有些东西不起作用，所以我不得不做出改变。然而，我是一个完整的 css php 新手。我遇到的问题是悬停是此菜单的关键，它会导致输入框被不可见的层覆盖，从而阻止它们获得焦点。如果您单击页面底部并向上移动，它将起作用，但如果您先浏览菜单，则不会。我已经尝试了很多方法来解决这个问题，但是由于我有限的 CSS 能力，我无法解决这个问题。所有帮助将不胜感激谢谢

它需要一张图片，但作为新成员，我似乎无法发布图片:(这是我从哪里获取图片的链接，图片在那里 http://www.script-tutorials.com/demos/91/索引.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>
4

1 回答 1

0

尝试删除

<input

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

于 2012-11-06T10:29:02.303 回答