CSS - hover ul элементы не в вертикальной линии

Я совершенно новый для HTML и CSS, и прямо сейчас я следую this учебник. Моя проблема see picture заключается в том, что элементы в моем раскрывающемся списке не находятся в вертикальной линии, но все загроможденное вместе.CSS - hover ul элементы не в вертикальной линии

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

Я был бы очень благодарен за некоторые предложения! :)

* { 
 
    margin: 0; 
 
} 
 

 
h1, h2, h3, h4, h5, h6, p { 
 
    margin-bottom: 10px; 
 
} 
 

 
/* ----- NAVIGATION BAR ----- */ 
 

 
#nav { 
 
    width:500px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
    text-align: center; 
 
    background-color: none; 
 
} 
 

 
#nav ul { 
 
    padding: 0; 
 
    list-style: none; 
 
    position: relative; 
 
    display: inline-table; 
 
} 
 

 
#nav ul:after{ 
 
    content: ""; 
 
    clear: both; 
 
    display: block; 
 
} 
 

 
#nav ul li { 
 
    float: left; 
 
} 
 

 
#nav ul li a { 
 
    display: block; 
 
    padding: 10px 20px; 
 
    color: black; 
 
    text-decoration: none; 
 
    font-family: "Trocchi", serif; 
 
} 
 

 
#nav ul li:hover { 
 
    background: #76C5CF; 
 
} 
 

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

 
#nav ul ul { 
 
    display: none; 
 
    background: none; 
 
    position: absolute; 
 
    top: 100%; 
 
} 
 

 
#nav ul li:hover > ul { 
 
    display: block; 
 
} 
 

 
/* ----- HEADER ----- */ 
 

 
#header { 
 
    width: 340px 
 
    margin: auto; 
 
    margin-top: 10px; 
 
    text-align: center; 
 
} 
 

 
#header h1 { 
 
    height: 50px; 
 
    font-family: "Trocchi", serif; 
 
    background-color: 
 
} 
 

 
#header h2 { 
 
    font-family: "Trocchi", serif; 
 
    position: relative; 
 
    display: inline; 
 
} 
 

 
/* ----- BACKGROUND ----- */ 
 
body { 
 
    background-color: #A6D7F3; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title> Harley's Haunts </title> 
 
    <link rel="stylesheet" type="text/css" href="harleysHaunts.css"> 
 
    <style> 
 
    @import url('https://fonts.googleapis.com/css?family=Trocchi'); 
 
    </style> 
 
</head> 
 

 
    <body> 
 

 
     <div id="header"> 
 

 
     <h1> HARLEY'S HAUNTS </h1> 
 
     <h2> It's a dog's world after all </h2> 
 

 
     </div> 
 

 
     <div id="nav"> 
 
     <ul> 
 
      <li><a href="#"> About </a></li> 
 
      <li><a href="#"> Pet-Friendly Venues </a> 
 
      <ul> 
 
       <li><a href="#"> Cafes </a> </li> 
 
       <li><a href="#"> Restaurants </a> </li> 
 
       <li><a href="#"> Pubs/Bars </a> </li> 
 
       <li><a href="#"> Shops </a> </li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="#"> Contact </a></li> 
 
     </ul> 
 

 

 
     </div> 
 

 
    </body> 
 

 
</html>

источник

2016-11-22 Bambi

Попробуйте использовать 'инлайн -block' вместо 'inline-table'. –

К сожалению, это не устраняет проблему. Но спасибо за предложение! Оказывается, мне нужно было добавить «position: relative» под мой «#nav ul li {» – Bambi

Все, что вам нужно сделать, это добавить position:relative в #nav уль ли:

#nav ul li { 
     float: left; 
     position: relative; 
    }

но вы должны использовать это только для Li родителя и вы не должны использовать float:left в li уль-ребенка.

Так что ваш CSS станет как этот

#nav > ul > li { 
    float: left; 
    position: relative; 
}

источник

2016-11-22 14:39:13 Chiller

Это сработало - hoorah! : D Большое вам спасибо за ответ на мой вопрос так быстро! – Bambi

добро пожаловать .. если это помогло! вы можете отметить это как ответ :). – Chiller

Сделано! Мне пришлось ждать 7-минутного обратного отсчета: P – Bambi

Добавить определенную ширину #nav ul ul, дал ему 200px в качестве примера с учетом родителю ulwidth

* { 
 
    margin: 0; 
 
} 
 

 
h1, h2, h3, h4, h5, h6, p { 
 
    margin-bottom: 10px; 
 
} 
 

 
/* ----- NAVIGATION BAR ----- */ 
 

 
#nav { 
 
    width:500px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
    text-align: center; 
 
    background-color: none; 
 
} 
 

 
#nav ul { 
 
    padding: 0; 
 
    list-style: none; 
 
    position: relative; 
 
    display: inline-table; 
 
} 
 

 
#nav ul:after{ 
 
    content: ""; 
 
    clear: both; 
 
    display: block; 
 
} 
 

 
#nav ul li { 
 
    float: left; 
 
} 
 

 
#nav ul li a { 
 
    display: block; 
 
    padding: 10px 20px; 
 
    color: black; 
 
    text-decoration: none; 
 
    font-family: "Trocchi", serif; 
 
} 
 

 
#nav ul li:hover { 
 
    background: #76C5CF; 
 
} 
 

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

 
#nav ul ul { 
 
    display: none; 
 
    background: none; 
 
    position: absolute; 
 
    top: 100%; 
 
    width: 200px; 
 
} 
 

 
#nav ul li:hover > ul { 
 
    display: block; 
 
} 
 

 
/* ----- HEADER ----- */ 
 

 
#header { 
 
    width: 340px 
 
    margin: auto; 
 
    margin-top: 10px; 
 
    text-align: center; 
 
} 
 

 
#header h1 { 
 
    height: 50px; 
 
    font-family: "Trocchi", serif; 
 
    background-color: 
 
} 
 

 
#header h2 { 
 
    font-family: "Trocchi", serif; 
 
    position: relative; 
 
    display: inline; 
 
} 
 

 
/* ----- BACKGROUND ----- */ 
 
body { 
 
    background-color: #A6D7F3; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title> Harley's Haunts </title> 
 
    <link rel="stylesheet" type="text/css" href="harleysHaunts.css"> 
 
    <style> 
 
    @import url('https://fonts.googleapis.com/css?family=Trocchi'); 
 
    </style> 
 
</head> 
 

 
    <body> 
 

 
     <div id="header"> 
 

 
     <h1> HARLEY'S HAUNTS </h1> 
 
     <h2> It's a dog's world after all </h2> 
 

 
     </div> 
 

 
     <div id="nav"> 
 
     <ul> 
 
      <li><a href="#"> About </a></li> 
 
      <li><a href="#"> Pet-Friendly Venues </a> 
 
      <ul> 
 
       <li><a href="#"> Cafes </a> </li> 
 
       <li><a href="#"> Restaurants </a> </li> 
 
       <li><a href="#"> Pubs/Bars </a> </li> 
 
       <li><a href="#"> Shops </a> </li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="#"> Contact </a></li> 
 
     </ul> 
 

 

 
     </div> 
 

 
    </body> 
 

 
</html>

источник

2016-11-22 14:48:09 Syden

Спасибо! Это тоже сработало! У меня есть два рабочих предложения: 1. #nav> ul> li { float: слева; позиция: относительная; 2. Добавить определенную ширину в #nav ul ul Есть ли какое-либо конкретное преимущество для одного над другим? – Bambi

Чтобы быть откровенным, они являются как одной строкой модификации кода, так что это действительно зависит от вас :) – Syden

Gotcha;) Спасибо, Сиден! – Bambi

You применили r ules CSS для всех дочерних элементов родительского элемента ul, поэтому все дети ul ul они будут наследовать правило родительского CSS.

Попробуйте использовать ссылку селектор '>', когда вы хотите настроить таргетинг на родительский элемент

Для этого Exemple вы просто изменить

#nav ul li { 
    float: left; 
}

по

#nav > ul >li { 
float: left; 
}

источник

2016-11-22 15:14:05 Sourceforest

CSS - hover ul элементы не в вертикальной линии

ответ

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