2013-11-07 7 views
-1

В приведенном ниже коде я использовал код html и css от http://www.weebly.com/, и я реализую небольшую часть кода, что меню не указывает на изображение, и оно накладывается на другое меню. Pls помогает мне решить проблему.Меню, перекрывающее другое меню в html

<!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

Как вы относитесь? Можете ли вы привести нам пример? – Moob

+0

где именно вы хотели бы видеть стрелку стрелки? можете ли вы описать его более подробно или опубликовать фотографию? – KyleMit

+0

Эта скрипка связана с вопросом вообще? – KyleMit

ответ

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.

+0

@ john h меню перекрывает другое меню – user2935177

0

Вам необходимо использовать :hover и :before в вашем css.

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

Я также сделал некоторые корректировки в вашем CSS/HTML.

Полный текст: jsFiddle

+0

@ L105 меню перекрывает другое меню и не указывает на изображение – user2935177

Смежные вопросы