Проблемы с выравниванием выпадающего меню CSS

Я работаю над раскрывающимся меню чистого CSS, но столкнулся с некоторыми проблемами выравнивания.Проблемы с выравниванием выпадающего меню CSS

В частности: элементы подменю перемещаются вправо при наведении указателя на соответствующий пункт меню. Вот скрипку: https://jsfiddle.net/fhakjnhe/5/

HTML

<body> 

<header> 

<div id="menustrip"> 

       <div id="logo_container"> 
        <h1>LOGO</h1>     
       </div> 

       <div id="menu"> 
        <nav> 
         <ul> 
          <li><a id="active-page" href="#">AAA</a></li 
          ><li><a href="#">BBB</a> 
           <ul> 
            <li style="background-color:red;">A</li> 
            <li>B</li> 
           </ul> 
          </li 
          ><li><a href="#">CCC</a></li 
          ><li><a href="#">DDD</a></li 
          ><li><a href="#">EEE</a> 
           <ul> 
            <li style="background-color:blue;">A2</li> 
            <li>B2</li> 
           </ul> 
          </li 
          ><li><a href="#">FFF</a></li 
          ><li><a id="quote-page" href="#">GGG</a></li> 
         </ul> 


        </nav>    
       </div> 

      </div>

Связанные CSS

header #menustrip #menu nav ul 
     { 
      list-style: none;    
      position: relative;    
     } 

      header #menustrip #menu nav ul li 
      { 
       display: inline-block;     
      } 

       header #menustrip #menu nav a 
       { 
        display: block; 
        color: #1d120c; 
        font-weight: bold; 
        font-size: 18px; 
        padding: 0 /*15px*/10px; 
        margin: 0; 
        border: 2px solid transparent; 
       } 

       header #menustrip #menu nav a:hover 
       { 
        border-left: 2px solid #97bc14; 
        border-right: 2px solid #97bc14; 
        color: #97bc14 
       } 

       header #menustrip #menu nav a#active-page 
       { 
        color: #97bc14 
       } 

       header #menustrip #menu nav a#quote-page 
       { 
        margin-left: 15px; 
        border: 2px solid #97bc14; 
        color: #97bc14 
       } 

       header #menustrip #menu nav a#quote-page:hover 
       { 
        border: 2px solid #97bc14; 
        background-color: #97bc14; 
        color: #fcffff; 
       } 

       header #menustrip #menu nav ul li ul 
       { 
        /*display: none;*/ 
        position: absolute; 
        padding-left: 0; 
       } 

       header #menustrip #menu nav ul li:hover > ul 
       { 
        display: inherit; 
       } 

        header #menustrip #menu nav ul li ul li 
        { 
         /*left: -100%;*/ 
         min-width: 100px; 
         float: none; 
         display: list-item; 
         position: relative;       
        }

Я проверил подобный вопрос CSS Drop Down Menu : nav ul ul li Moved to Right и проверил, что margin и padding были установлены на 0. Также в моем случае подпункт перемещается вправо, когда он парит, кажется, что он остается в порядке, пока «скрыт».

источник

2016-04-28 EclipticalD

В строке 94 файла CSS, изменить display: inherit; для display: block;. Свойство inherit отображает выпадающее меню как встроенный блок.

источник

2016-04-28 03:38:46

Я предлагаю вам использовать программное обеспечение меню веб-меню & создатель кнопки это программное обеспечение позволяет создавать профессиональные и красивые меню и кнопки с java-скриптом или только css.

http://www.easymenumaker.com/

источник

2016-04-28 03:25:43 aghilpro

Проблемы с выравниванием выпадающего меню CSS

ответ

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