Проблема с вертикальным выпадающим меню.

Mark Ghaphes · January 3, 2012

Суть проблемы:

Действие :hover отменяется при наведении на доп.меню, хотя нужно что бы этот эффект сохранялся, и изначально этот эффект был.

Это произошло после того как я в CSS сделал какие-то (не масштабные ) изменения. Факт в том, что я не могу понять, какие именно изменения стали причиной проблемы.

Курсор над пунктом главного меню.

Курсор над пунктом дополнительного меню.

Не знаю поможет ли мой код...


body {
    margin:0; 
    padding:0; 
    background-color:#020202; 
}

#header {
    width:100%; 
    height:720px; 
    background-image:url('background images/bg_header - 1152.jpg');
}

#adverts {
    background-image:url('background images/bg_adverts_1152.png'); 
    background-repeat:no-repeat; 
    width:200px; 
    height:100%; 
    position:absolute; 
}

#nav {
    float:right; 
    width:230px;  
    height:410px; 
    display:block; 
    margin:50px 0 0 5px; 
}

#nav_list {
    list-style-type:none;  
    float:right; 
    width:230px;  
    height:410px; 
    margin:0; 
    padding:0;
    position:relative; 
}

#list_books, #list_lessons, #list_manuals, #list_articles {
    list-style-type:none; 

}

.nav_list_link, .nav_list_link:visited {
    width:230px; 
    height:64px; 
    display:block;
    color:#5b5b5b;
    text-align:right;
    font-family:"Courier new";
    padding-right:10px;
}

.hidden {
    visibility:hidden;
    position:absolute ;
    right:230px;

}

#list_books {
    top:-64px;
}

#list_manuals {
    top:-128px;
}

#list_articles {
    top:-128px;
}

#list_lessons {
    top:-128px;
}

#nav_list li:hover {
    position:relative;
}

#nav_list li:hover > ul {
    visibility:visible;

}

.nav_list_link:hover {
    background-position:0 64px;
}

#nav_list li ul li {
    position:relative;
    height:25px;
    background-image:url('background images/bg_secondary_nav.png');

}

.nav_list_link:hover {
    color:#790000;
}

#main_page {
    background-image:url('knobs/knob_main_page_1152.png');
}

#books {
    background-image:url('knobs/knob_books_1152.png');
}

#manuals {
    background-image:url('knobs/knob_manuals_1152.png');
} 

#articles {
    background-image:url('knobs/knob_articles_1152.png');
}

#lessons {
    background-image:url('knobs/knob_lessons_1152.png');
}

#about {
    background-image:url('knobs/knob_about_1152.png');
}

a {
    outline:none; 
    text-decoration:none;
}
#footer {
    position:fixed; 
    left:0; bottom:0; 
    background-image:url('background images/bg_footer.jpg'); 
    width:1920px;; 
    height:50px;
}
#button_top {
    background-image:url('knobs/button_top.png'); 
    height:25px; 
    width:100px; 
    position:fixed; 
    right:10px; 
    bottom:10px; 
    border-radius:5px;
}
#button_top:hover {
    display:block; 
    background-position:0 25px; 
}


#content {
    min-height:400px; 
    background-color:#6e6957; 
    margin-bottom:50px; 
    padding:10px;
}


<!DOCTYPE html>
<html>
  <head>
    <title>Bookman.com</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="javascript.js"></script>
  </head>
  <body>
    <div id="container">
      <div id="header">
        <a name="top"></a>
        <div id="adverts">
        </div>
        <div id="nav">
          <ul id="nav_list">

            <li><a id="main_page" class="nav_list_link" href="main page.html"></a></li>
            <li>
              <a id="books" class="nav_list_link" href="books.html"></a>
              <ul id="list_books" class="hidden">
                <li><a id="imaginative literature" class="nav_list_link" href="imaginative literature.html">Imaginative literature</a></li>
                <li><a id="poem" class="nav_list_link" href="poem.html">Poem</a></li>
                <li><a id="novel" class="nav_list_link" href="novel.html">Novel</a></li>
                <li><a id="documental" class="nav_list_link" href="documental.html">Documental</a></li>
                <li><a id="comedy" class="nav_list_link" href="comedy.html">Comedy</a></li>
                <li><a id="fantastic" class="nav_list_link" href="fantastic.html">Fantastic</a></li>
                <li><a id="tragedy" class="nav_list_link" href="tragedy.html">Tragedy</a></li>
                <li><a id="esse1" class="nav_list_link" href="esse1.html">Esse1</a></li>
                <li><a id="esse2" class="nav_list_link" href="esse2.html">Esse2</a></li>
                <li><a id="esse3" class="nav_list_link" href="esse3.html">Esse3</a></li>
                <li><a id="esse4" class="nav_list_link" href="esse4.html">Esse4</a></li>
                <li><a id="esse5" class="nav_list_link" href="esse5.html">Esse5</a></li>
                <li><a id="esse6" class="nav_list_link" href="esse6.html">Esse6</a></li>
                <li><a id="esse7" class="nav_list_link" href="esse7.html">Esse7</a></li>
                <li><a id="esse8" class="nav_list_link" href="esse8.html">Esse8</a></li>
                <li><a id="esse9" class="nav_list_link" href="esse9.html">Esse9</a></li>             
              </ul>
            </li>
            <li>
              <a id="manuals" class="nav_list_link" href="manuals.html"></a>
              <ul id="list_manuals" class="hidden">
                <li><a id="manual1" class="nav_list_link" href="manual1.html">Manual1</a></li>
                <li><a id="manual2" class="nav_list_link" href="manual2.html">Manual2</a></li>
                <li><a id="manual3" class="nav_list_link" href="manual3.html">Manual3</a></li>
                <li><a id="manual4" class="nav_list_link" href="manual4.html">Manual4</a></li>
                <li><a id="manual5" class="nav_list_link" href="manual5.html">Manual5</a></li>
                <li><a id="manual6" class="nav_list_link" href="manual6.html">Manual6</a></li>
                <li><a id="manual7" class="nav_list_link" href="manual7.html">Manual7</a></li>
                <li><a id="manual8" class="nav_list_link" href="manual8.html">Manual8</a></li>
                <li><a id="manual9" class="nav_list_link" href="manual9.html">Manual9</a></li>
                <li><a id="manual10" class="nav_list_link" href="manual10.html">Manual10</a></li>
                <li><a id="manual11" class="nav_list_link" href="manual11.html">Manual11</a></li>
                <li><a id="manual12" class="nav_list_link" href="manual12.html">Manual12</a></li>
                <li><a id="manual13" class="nav_list_link" href="manual13.html">Manual13</a></li>
                <li><a id="manual14" class="nav_list_link" href="manual14.html">Manual14</a></li>
                <li><a id="manual15" class="nav_list_link" href="manual15.html">Manual15</a></li>
                <li><a id="manual16" class="nav_list_link" href="manual16.html">Manual16</a></li>
                <li><a id="manual17" class="nav_list_link" href="manual17.html">Manual17</a></li>
                <li><a id="manual18" class="nav_list_link" href="manual18.html">Manual18</a></li>
                <li><a id="manual19" class="nav_list_link" href="manual19.html">Manual19</a></li>
                <li><a id="manual20" class="nav_list_link" href="manual20.html">Manual20</a></li>
              </ul>
            </li>
            <li>
              <a id="articles" class="nav_list_link" href="articles.html"></a>
              <ul id="list_articles" class="hidden">
                <li><a id="article1" class="nav_list_link" href="article1.html">Article1</a></li>
                <li><a id="article2" class="nav_list_link" href="article2.html">Article2</a></li>
                <li><a id="article3" class="nav_list_link" href="article3.html">Article3</a></li>
                <li><a id="article4" class="nav_list_link" href="article4.html">Article4</a></li>
                <li><a id="article5" class="nav_list_link" href="article5.html">Article5</a></li>
                <li><a id="article6" class="nav_list_link" href="article6.html">Article6</a></li>
                <li><a id="article7" class="nav_list_link" href="article7.html">Article7</a></li>
                <li><a id="article8" class="nav_list_link" href="article8.html">Article8</a></li>
                <li><a id="article9" class="nav_list_link" href="article9.html">Article9</a></li>
                <li><a id="article10" class="nav_list_link" href="article10.html">Article10</a></li>
                <li><a id="article11" class="nav_list_link" href="article11.html">Article11</a></li>
                <li><a id="article12" class="nav_list_link" href="article12.html">Article12</a></li>   
              </ul>
            </li>
            <li>
              <a id="lessons" class="nav_list_link" href="lessons.html"></a>
              <ul id="list_lessons" class="hidden">
                <li><a id="lessons1" class="nav_list_link" href="lessons1.html">Lessons1</a></li>
                <li><a id="lessons2" class="nav_list_link" href="lessons2.html">Lessons2</a></li>
                <li><a id="lessons3" class="nav_list_link" href="lessons3.html">Lessons3</a></li>
                <li><a id="lessons4" class="nav_list_link" href="lessons4.html">Lessons4</a></li>
                <li><a id="lessons5" class="nav_list_link" href="lessons5.html">Lessons5</a></li>
                <li><a id="lessons6" class="nav_list_link" href="lessons6.html">Lessons6</a></li>
                <li><a id="lessons7" class="nav_list_link" href="lessons7.html">Lessons7</a></li>
                <li><a id="lessons8" class="nav_list_link" href="lessons8.html">Lessons8</a></li>
                <li><a id="lessons8" class="nav_list_link" href="lessons9.html">Lessons9</a></li>
                <li><a id="lessons10" class="nav_list_link" href="lessons10.html">Lessons10</a></li>
              </ul>
            </li>
            <li><a id="about" class="nav_list_link" href="about.html"></a></li>

          </ul>
        </div>
      </div>
      <div id="content">

      </div>
      <div id="footer">
        <a id="button_top" href="#top"></a>
      </div>
    </div>  
  </body>
</html>

Edited January 4, 2012 by Mark Ghaphes

hedgehog · January 4, 2012

Насколько я понимаю, эффекты при ховере вы применяете к ссылке (.nav_list_link:hover), а когда курсор переходит на дочерние пункты - ссылка теряет ховер. Но при этом hover остается у элемента списка (li) так как курсор находится над его дочерним элементом (ul, ul li). Решением было бы применять нужный бекграунд и эффекты к родительскому пункту меню (li), а не к ссылке.

Не знаю поможет ли мой код...

Конечно поможет. Вот бы все так при описании проблемы: и скриншоты, и код, и подробное описание проблемы

Edited January 4, 2012 by hedgehog

Mark Ghaphes · January 4, 2012

Помогло. Спасибо большое.

Sign In

Проблема с вертикальным выпадающим меню.

Question

Mark Ghaphes

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

hedgehog

Link to comment

Share on other sites

Mark Ghaphes

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information