Элементы меню css, накладывающиеся друг на друга

Я не могу правильно отобразить элементы меню. Каждый элемент в списке (4 из них) отображается друг на друге. Любая помощь приветствуется.Элементы меню css, накладывающиеся друг на друга

это мой HTML:

<nav> 

      <ul > 
       <li><a href='#'><span>SERVICES</span></a> 
        <ul> 
         <li><a href='../escuela_eng.html'><span>Equest Sch</span></a></li> 
         <li><a href='../hst_eng.html'><span>Horse Assist </span></a></li> 
         <li><a href='../car_eng.html'><span>Care and Recuperation</span></a></li> 
         <li><a href='../ht_eng.html'><span>Training</span></a></li> 
        </ul> 

      </ul> 
     </nav>

и CSS:

nav 
{ 
    position:absolute; 
    right:0px; 
    bottom:0; 
    left:-.7em; 
}  


nav ul 
{ 
     list-style:none; 
} 

nav ul li 
{ 
     display:relative; 
     float:left; 
     padding:0px 15px; 
} 

nav ul li ul { 
    display: none; 
    position:relative; 
    top:15px; 
    left:0; 
} 

ul li ul li { 
    display:block; 
    float:none; 
    position:absolute; 
    background: #F0EFE7; 
    padding:0px 10px; 
    } 

ul li:hover ul { 
    display:block; 
    position:relative; 
    margin-left:-17px; 
} 


nav ul li a 
{ 
    font-family: 'HelveticaNeue-UltraLight', cursive; 
    text-transform:uppercase; 
    transition: all .25s ease; 
    position:relative; 
    float:left; 
} 

nav ul li a:hover 
{ 
    color:#E56038; 
}

Заранее большое спасибо за вашу помощь

источник

2015-06-23 user3777073

Remove 'положение: абсолютный' и добавить «ясно: то и другое; переполнение: авто;» к ul li ul li

Fiddle: http://jsfiddle.net/kc79mwbr/

источник

2015-06-23 18:51:10 gopalraju

спасибо gopalarju и @Matt Shade за ваше время и внимание. Оба помогли мне понять мои (многие!) Ошибки. С наилучшими пожеланиями – user3777073

<style> 
 
    nav 
 
    { 
 
    position:absolute; 
 
    right:0px; 
 
    bottom:0; 
 
    left:-.7em; 
 
    } 
 
    
 
    
 
    
 
    nav ul 
 
    { 
 
    list-style:none; 
 
    } 
 
    
 
    nav ul li 
 
    { 
 
    /*  display:block; 
 
    */ 
 
    /*  float:left; 
 
    */ 
 
    padding:0px 15px; 
 
    } 
 
    
 
    nav ul li ul { 
 
    display: none; 
 
    
 
    /*  position:relative; 
 
    */ 
 
    top:15px; 
 
    left:0; 
 
    } 
 
    
 
    ul li ul li { 
 
\t 
 
    /*  display:block; 
 
    */ 
 
    /*  float:left; 
 
    */ 
 
    /*  position:relative; 
 
    */ 
 
    background: #F0EFE7; 
 
    padding:0px 10px; 
 
    } 
 
    
 
    ul li:hover ul { 
 
    display:block; 
 
    position:relative; 
 
    margin-left:-17px; 
 
    
 
    } 
 
    
 
    
 
    nav ul li a 
 
    { 
 
    font-family: 'HelveticaNeue-UltraLight', cursive; 
 
    text-transform:uppercase; 
 
    transition: all .25s ease; 
 
    /* position:relative; 
 
    */ 
 
    /* float:left; 
 
    */ 
 
    } 
 
    
 
    nav ul li a:hover 
 
    { 
 
    color:#E56038; 
 
    } 
 
    /*span,a,li{ 
 
    display:block; 
 
}*/ 
 
</style> 
 

 
<nav> 
 
    
 
    <ul > 
 
    <li> 
 
     <a href='#'> 
 
     <span> 
 
      SERVICES 
 
     </span> 
 
     </a> 
 
     <ul> 
 
     <li> 
 
      <a href='../escuela_eng.html'> 
 
      <span> 
 
       Equest Sch 
 
      </span> 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a href='../hst_eng.html'> 
 
      <span> 
 
       Horse Assist 
 
      </span> 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a href='../car_eng.html'> 
 
      <span> 
 
       Care and Recuperation 
 
      </span> 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a href='../ht_eng.html'> 
 
      <span> 
 
       Training 
 
      </span> 
 
      </a> 
 
     </li> 
 
     </ul> 
 
     
 
    </ul> 
 
</nav>

Я закомментирована много позиционировании и плавающими. Я думаю, что они вызывают проблемы. Вы можете поместить максимальную ширину в меню, если хотите, чтобы она была определенной ширины.

источник

2015-06-23 19:00:02

Пожалуйста, попробуйте этот код

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<meta content="text/html; charset=UTF-8" http-equiv="content-type"> 
<style> 
nav { 
    position:absolute; 
    right:0px; 
    /*bottom:0;*/ 
    left:-.7em; 
}  


nav ul{ 
    list-style:none; 
} 

nav ul li{ 
    display:relative; 
    float:left; 
    padding:0px 15px; 
} 

nav ul li ul { 
    display: none; 
    position:relative; 
    /*you will need set top margine in such a way that there wont be any blank space between parent menu item and sub menu items*/ 
    top:15px; 
    left:0; 
    /*line below will prevent displacement of submenu towards right*/ 
    padding-left: 0; 
} 

ul li ul li { 
    display:block; 
    float:none; 
    /*position:absolute;*/ 
    background: #F0EFE7; 
    padding:0px 10px; 
    overflow: auto; 
    clear: both; 
} 

ul li:hover ul { 
    display:block; 
    position:relative; 
    /*margin-left:-17px; */ 
} 


nav ul li a{ 
    font-family: 'HelveticaNeue-UltraLight', cursive; 
    text-transform:uppercase; 
    transition: all .25s ease; 
    position:relative; 
    float:left; 
} 

nav ul li a:hover{ 
    color:#E56038; 
} 
</style> 
</head> 
<body> 
<nav> 

      <ul > 
       <li><a href='#'><span>SERVICES</span></a> 
        <ul> 
         <li><a href='../escuela_eng.html'><span>Equest Sch</span></a></li> 
         <li><a href='../hst_eng.html'><span>Horse Assist </span></a></li> 
         <li><a href='../car_eng.html'><span>Care and Recuperation</span></a></li> 
         <li><a href='../ht_eng.html'><span>Training</span></a></li> 
        </ul> 

      </ul> 
     </nav>         
</body> 
</html>

Вы увидите следующие изменения

ul li ul li не нужно иметь position:absolute - это было главной причиной пункты подменю были перекрывая друг Другие.
только для целей тестирования я заметил nav 's bottom:0;

Несколько из предложений

Пожалуйста применяются классы ul-х и li «s
Управление padding и magines более эффективно.

Пожалуйста, обратитесь по следующим ссылкам для получения дополнительной информации

Ваши проблемы

Я протестировал этот код в Firefox, и я могу выбрать пункты меню.
Смещение пунктов подменю, было принято заботиться в обновленном код, предоставленный в ответе
Чтобы предотвратить определенное выравнивание/всплывают вопросы (с ссылками на Latest Evetns and Contact) ссылки вам нужно будет проверить его FLOAT.

источник

2015-06-23 19:10:28

Огромное спасибо, что Сонар Пралхада Нарсин. Это способ как-то решить проблему. Выпадающее меню теперь перемещает меню вправо (действия и последние события перемещаются вправо, а контакт отображается на новой строке). Есть ли способ предотвратить это. Кроме того, выпадающие меню отображаются с помощью прокрутки? можно ли этого избежать? В-третьих, кажется, что выпадающие меню больше не могут быть выбраны. (Они исчезают, когда я прокручиваю вниз)) Большое спасибо за вас. – user3777073

Я обновил ответ, обратившись к вашим проблемам. Вы можете получить указания от предоставленного кода. –

Я вижу их сейчас! изменился ли код? Я попробую это. Спасибо! – user3777073

Элементы меню css, накладывающиеся друг на друга

ответ

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