1

このメニューはチュートリアルから採用しました。うまくいかないことがあったので、変更する必要がありました。ただし、私は完全な 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>
4

1 に答える 1

0

を削除してみてください

<input

入力フィールドの前。それは役立つかもしれません。

于 2012-11-06T10:29:02.303 に答える