在下面的代码中，我使用了来自http://www.weebly.com/的html和css代码，我实现了一小部分代码，菜单没有指向图像，并且它与其他menu.Pls重叠，帮助我解决问题。
<!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>
答案 0 :(得分：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。这是一个working jsFiddle。
答案 1 :(得分：0)
您需要在css中使用:hover和:before。
.pg-normal:hover:before {
content: '\203A\00a0'; /* &lsaquo + */
}
我还在您的 css / html 中进行了一些更正。
完整示例：jsFiddle