-1

在下面的代码中,我使用了来自http://www.weebly.com/的 html 和 css 代码,并且我实现了一小部分代码,菜单没有指向图像并且它与其他菜单重叠。请帮助我解决问题。

<!DOCTYPE html>
<html>
<head>

    <script src="//cdn2.editmysite.com/js/vendor/modernizr.js"></script>




        <link rel="stylesheet" type="text/css" href="http://cdn2.editmysite.com/css/public.css?buildTime=1383786711" />

        <!--[if IE 8]><link rel="stylesheet" type="text/css" href="http://cdn2.editmysite.com/css/public-ie8.css?buildTime=1383786711" /><![endif]-->
        <!--[if IE 7]><link rel="stylesheet" type="text/css" href="http://cdn2.editmysite.com/css/public-ie7.css?buildTime=1383786711" /><![endif]-->


    <script> var loginData = {"use_ssl":true,"redirect":false}; var errorMsgs = {"wrongUserPass":"Wrong username or password","loginToAccess":"Please log-in to access that page","loginAgain":"Please log-in again to continue.","accountDeleted":"Your account was previously deleted","accountExists":"You already have an account. Please log-in.","loginInstead":"You already have an account. Please log-in."}; var DISABLE_SIGNUP_CAPTCHA = true; var facebook = {"app_id":"190291501407","domain":"www.weebly.com","user":false}; </script>


        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

        <script type="text/javascript" src="//cdn1.editmysite.com/libraries/prototype/1.7-custom/prototype.min.js?2"></script>

        <script type="text/javascript" src="http://cdn2.editmysite.com/js/public/main.js?buildTime=1383786711"></script>

</head>
<body class="w-ui homepage">


<form id="weebly-signup">
    <div class="caret"></div>

    <div id="signup-inputs">





        <div

            id="weebly-email"
            class="large block"

            placeholder="Email"
        />

        <div

            id="weebly-new-password"
            class="large block"

            placeholder="Password"
        />
    </div>


    <div class="submit-btns">


    </div>

    <input type="hidden" name="response" id="weebly-login-signup-response" />
    <input type="hidden" name="weebly-campaign" id="weebly-campaign" value="" />

</form>


    </div> <!-- #sidebar-inner -->
</div> <!-- #sidebar -->


<div id="login-box" class="form-popover-box titled-box">
    <form id="weebly-login" method="post" action="https://www.weebly.com/weebly/login.php">
        <div class="caret"></div>





        <input
            type="text"
            id="weebly-username"
            class="large block"
            name="user"
            placeholder="Email or Username"
            value=""
        /><br>

        <input
            type="password"
            id="weebly-password"
            class="large block"
            name="pass"
            placeholder="Password"
        /><br>

        <p class="remember-me">
            <label>
                <input
                    type="checkbox"
                    id="weebly-remember"
                    name="rememberme"
                    checked
                />

            </label>
        </p>





    </form>
</div>      






    <div id="how-it-works" class="section">
        <div class="hgroup">
            <h2>        Tips to work on Seating Application</h2>
            <h3>        Everything you need to start a high-quality site</h3>
        </div>



        <div class="article">
            <ol id="how-it-works-list">
                <li class="tips top">
                    <div class="content"><span class="icon"></span></div>
                </li>
                <li>
                    <h4>        Master</h4>
                    <div class="content">
                        <span class="circle"><span class="icon plan"></span></span>
                        <span class="circle mask"><span class="icon plan"></span></span>
                        <ul class="bubble">
                            <li>    Exam name,month and year is created in exam master  </li>
                            <li>        Course code and name is created in course master</li>
                            <li>        Subject code and name is created in subject master</li>
                            <li>        Room details  such room name,no of benches,maximum bench capacity,available status and invigilator is created in room master</li>
                        </ul>
                    </div>
                </li>
                <li>
                    <h4>        Details</h4>
                    <div class="content">
                        <span class="circle"><span class="icon create"></span></span>
                        <span class="circle mask"><span class="icon create"></span></span>
                        <ul class="bubble">
                            <li>        Course code and Subject code is created in course subject</li>
                            <li>        Exam name and course code is created in exam course</li>
                            <li>        Register no,name, course code and Subject code for a particular exam is created </li>
                            <li>         Update the course code ,subject code,date and session for particular exam </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <h4>        Seating Plan    </h4>
                    <div class="content">
                        <span class="circle"><span class="icon publish"></span></span>
                        <span class="circle mask"><span class="icon publish"></span></span>
                        <ul class="bubble">
                            <li>        Exam name is selected </li>
                            <li>        Date and session is selected </li>
                            <li>        Course code,Subject code and number of student id displayed </li>
                            <li>        Clicking on System generated it displays seat no ,register no and subject code</li> 
                        </ul>
                    </div>
                </li>
                <li>
                    <h4>        Seating Report</h4>
                    <div class="content">
                        <span class="circle"><span class="icon grow"></span></span>
                        <span class="circle mask"><span class="icon grow"></span></span>
                        <ul class="bubble">
                            <li>        Exam name is selected </li>
                            <li>        Date and session is selected </li>
                            <li>        Course code,Subject code and number of student id displayed </li>
                            <li>        Selecting on the Subject code it display Room no,seat no,register no and invigilator as report  </li>
                            <li>        Clicking on seating summary it displays exam name ,date,session,room no,subject code,register no ,no of students and invigilator</li>      
                        </ul>
                    </div>
                </li>
                <li>
                    <h4>        Upload</h4>
                    <div class="content">
                        <span class="circle"><span class="icon grow"></span></span>
                        <span class="circle mask"><span class="icon grow"></span></span>
                        <ul class="bubble">
                            <li>        Exam name is selected </li>
                            <li>        Course code for relevant exam is selected </li>
                            <li>        Subject code for corresponding course code is selected </li>
                            <li>        Choose the csv file which has register no and students name and upload it </li>     
                        </ul>
                    </div>
                </li>
                <li class="tips bottom">
                    <div class="content"><span class="icon"></span></div>
                </li>
            </ol>
        </div>
    </div>
4

2 回答 2

1

你还没有将你的类应用到你的li元素上。只需进行一些更改:

<ul class="Data">
    <li class="pg-normal">apple</li>
    <li class="pg-normal">mango</li>
    <li class="pg-normal">grape</li>
</ul>

然后重命名.pg-selected.pg-normal:hover. 这是一个有效的 jsFiddle

于 2013-11-07T17:07:45.280 回答
0

你需要在你的css中使用:hover和。:before

.pg-normal:hover:before {
    content: '\203A\00a0'; /* &lsaquo + &nbsp;*/
}

我还在您的css/html中进行了一些更正。

完整示例:jsFiddle

于 2013-11-07T17:24:06.053 回答