Проблема выравнивания списка раскрывающегося списка (HTML/CSS)

-1

Я задал такой вопрос раньше, но я использую код differnt в последний раз.Проблема выравнивания списка раскрывающегося списка (HTML/CSS)

Я пытаюсь создать выпадающее меню. Ther - это определенные элементы в этом основном списке, у которых есть раскрывающийся список (News and Team). По какой-то причине они перемещаются вправо. Я бы хотел, чтобы элементы в выпадающем списке были выровнены с его родителем.

Любая помощь будет оценена по достоинству.

Благодаря

http://codepen.io/DocRow10/pen/hjIkq

<body> 
    <div id="container"> 
     <div id="banner" class="clearfix"> 

        <img id="crest" src="images/cecc-logo.png" /> 
        <h1>Test Website</h1> 
     </div> 
     <nav class="clearfix"> 
      <ul class="clearfix"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">News</a> 
        <ul> 
         <li><a href="#">Social Events</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Team</a> 
        <ul> 
         <li><a href="#">Players</a></li> 
         <li><a href="#">Fixtures/Results</a></li> 
         <li><a href="#">Statistics</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Gallery</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
      <a href="#" id="pull">Menu</a> 
     </nav> 
     <main> 

     </main> 
     <footer> 

     </footer> 
    </div> 

</body>

body { 
    background-color: rgb(200, 220, 255); 
/* #455868 */ 

} 

#container { 
    height: 1000px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#banner { 
    width: 100%; 
    text-align: center; 

} 

#crest { 
    height: 150px; 
    width: 180px; 
    display: inline-block; 
} 

#banner h1 { 

    display: inline-block; 
} 
/* Bat Colour rgb(38, 124, 196); */ 


@media only screen and (min-width : 480px) { 


    #banner h1 { 
     font-size: 30px; 
     display: inline-block; 
    } 
} 

@media only screen and (min-width : 768px) { 
    #banner h1 { 
     font-size: 36px; 
     display: inline-block; 
    } 
} 
@media only screen and (min-width : 980px) { 
    #banner h1 { 
     font-size: 47px; 
     display: inline-block; 
    } 
} 

nav { 
    height: 40px; 
    width: 90%; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: rgb(238, 0, 0); 
    font-size: 13pt; 
    font-family: neris; 
    border-bottom: 2px solid #283744; 
} 

nav > ul { 
    padding: 0; 
    margin: 0 auto; 
    width: 600px; 
    height: 40px; 
} 

nav > ul > li { 
    display: inline; 
    float: left; 
} 

nav ul a { 
    color: #fff; 
    display: inline-block; 
    width: 100px; 
    text-align: center; 
    text-decoration: none; 
    line-height: 40px; 
    text-shadow: 1px 1px 0px #283744; 
} 

nav li a { 
    border-right: 1px solid #576979; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
} 
nav li:last-child a { 
    border-right: 0; 
} 

nav a:hover, nav a:active { 
    background-color: #8c99a4; 
} 

nav a#pull { 
    display: none; 
} 

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

nav ul ul { 
    display: none; 
    position: absolute; 
} 

nav ul ul li { 
    display: block; 
} 

main { 
    width: 90%; 
    height: 200px; 
    margin-right: auto; 
    margin-left: auto; 
    background-color: rgb(38, 124, 196); 
} 

footer { 
    width: 90%; 
    height: 50px; 
    margin-right: auto; 
    margin-left: auto; 
    background-color: rgb(0, 0, 0); 
}

источник

2016-02-13 Chosen1

-1

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

В кодеде, который я отобразил, была одна важная вещь, которую я оставлял: Файл CSS для платформы Mobile-Responsive, известной как Фонд. Этот CSS-файл имел все теги ul, имеющие левый край 1.25em. Вот почему тэг ul был перемещен вправо.

Чтобы устранить эту проблему, я изменил следующее:

nav ul ul { 
    display: none; 
    position: absolute; 
    padding: 0; 
    margin: 0; 
}

я добавил свойство маржи и теперь все в порядке.

Еще раз спасибо всем, кто помог мне с этим ответом и жалел, что тратил ваше время.

Желаю вам всем хорошо.

источник

2016-02-20 14:36:19 Chosen1

Некоторые элемент на веб-странице, имеют стандартные padding значения. Например, во всех списках есть padding-left. Если вы хотите изменить это, попробуйте следующее:

Добавьте это в коде CSS:

ul { 
    padding: 0; 
}

Или вы можете добавить приходят конкретные id или class для этого меню и изменения отступов для них.

источник

2016-02-13 16:18:59 semanser

Не могли бы вы дать мне пример codepen/jsfiddle. Я не могу заставить его работать. – Chosen1

Если бы вы могли показать живой пример, это было бы очень оценено. – Chosen1

Вам просто нужно добавить padding: 0 к вашему nav ul ul правилу, так что выглядит как так:

nav ul ul { 
    display: none; 
    position: absolute; 
    padding: 0; 
}

По умолчанию ul элементы имеют левый отступ 40px, вам необходимо удалить эту прокладку, чтобы сделать второй уровень ul выровнять с первым.

источник

2016-02-19 22:53:37 jmoerdyk

Отмечен ваш ответ, потому что (косвенно) вы помогли мне, и пенни упала на вопрос, почему у меня такая проблема. Проверьте мой ответ, и вы поймете, что я имею в виду. Благодаря! – Chosen1

Проблема выравнивания списка раскрывающегося списка (HTML/CSS)

ответ

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