Коробка растягивается до конца экрана

Это мой первый запрос на помощь, поэтому прошу прощения за отсутствие опыта. Проблема, с которой я сталкиваюсь, заключается в том, что ширина окна, когда я нависаю над выпадающим меню, кажется, растягивается до конца экрана.Коробка растягивается до конца экрана

Код: http://cssdeck.com/labs/oq0n4gk0

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

Редактировать: Изменено с добавлением уникальных идентификаторов, которые получили подменю с желаемым размером, но разрушили шрифты и макет подменю. Может ли кто-нибудь помочь с исправлением? Вам нужно спать сейчас и завтра работать, спасибо всем!

источник

2016-01-27 Burton Feng

Скопируйте соответствующий код непосредственно в свой вопрос. Если вы хотите, вы даже можете сделать исполняемый фрагмент стека. Благодаря! –

кажется, что ваш правило:

ul { 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 
     background-color: #333; 
     position: fixed; 
     top: 0%; 
     left: 0%; 
     width: 100%; 
     display: inline-block; 
    }

влияет на все ul элементы на странице, это включает в себя те, в подменю, когда я присвоить идентификатор как #menu1, а затем изменить правило:

#menu1 { 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 
     background-color: #333; 
     position: fixed; 
     top: 0%; 
     left: 0%; 
     width: 100%; 
     display: inline-block; 
    }

Проблема, похоже, исправлена, но цвета фона для меню становятся все беспорядочными.

Update: Этот код, как сделать работу меню для меня:

#mainMenu { 
    width:100%; 
} 

ul { 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 
     background-color: #333; 
     position: fixed; 
     top: 0%; 
     left: 0%; 
     display: inline-block; 
    } 
    ul li { 
     width:12%; 
    } 
    li ul { 
     display: none; 
     /*max-width:12%;*/ 
    } 
    li:hover ul { 
     display: block; 
     position: fixed; 
     top:46px; 
     left:24%; 
     /*background-color: white;*/ 
     /*width: 12%;*/ 
    } 
    #hsdown { 
     left:36%; 

    } 
    li { 
     float:left; 
     /*width:12%;*/ 
     margin: 0; 
     padding: 0; 

    } 
    li:hover li{ 
     float: none; 
    } 
    li a { 
     display: block; 
     color: white; 
     text-align: center; 
     padding: 14px 26px; 
     text-decoration: none; 
    } 
    li a:hover:not(.active){ 
     background-color: #311; 
    } 
    .active { 
     background-color: tan; 
    } 
    .myCircle { 
     border-radius: 50%; 
    } 
    .down { 
     /*width: 10%;*/ 
     background-color: #333; 
    } 

    li ul li { 
     width:100%; 
    }

Это HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <title> Home Page</title> 
     <link rel = "stylesheet" type = "text/css" href = "projectcss.css"> 
     <script> 
      iframe{ 
       position: inline; 
      } 
     </script> 
     <style> 
      body { 
       background-color:black; 
       color:white; 
      } 
     </style> 

    </head> 

    <body> 

     <ul id="mainMenu"> 
      <li><a class = "active" href = "#burton">Home</a></li> 
      <li><a href = "#about">About</a></li> 

      <li><a href = "#burton">Games</a> 
       <ul> 
        <li><a class = "down" href = "#burton">Game1</a></li> 
        <li><a class = "down" href = "#burton">Game2</a></li> 
       </ul> 
      </li> 
      <li><a href = "#burton">HighScores</a> 
       <ul id = "hsdown"> 
        <li><a id = "hsdown" class = "down" href = "#burton">Highscore 1</a></li> 
        <li><a id = "hsdown" class = "down" href = "#burton">Highscore 2</a><li> 
       </ul> 
      </li> 
     </ul> 

     <div style = "padding: 20px; margin-top: 30px;"> 
     <h1>Welcome</h1>  
    </body> 
</html>

источник

2016-01-27 05:14:57 angel9215

Пытался дать ul уникальный идентификатор, как вы сказали, и он решил растянуть до конца страницы, но все равно, чтобы зафиксировать отображение подменю? Извините, что неясен в описании! –

Кажется, это работает для меня, извините, я не мог добавить код здесь, пожалуйста, см. Мой ответ с обновленным css-файлом, я изменил идентификатор для ul в меню на «mainMenu» – angel9215

Возвращался к классу и тестировал это, спасибо огромное!Посмотрите, как вы его заработали! –

Этого времени вы используете общие тег в вашем CSS, как ul и li и т.д. Вы вложенная ul тегов, что означает текущую декларацию width: 100% применяет ко всем ul тегов. Добавьте уникальные классы и укажите их в своем CSS, а не в имени тега.

источник

2016-01-27 05:05:11 michael

Я вижу, поэтому лучший способ решить это - присвоить уникальные идентификаторы всем ul? Попробуй это завтра, когда я получу шанс! –

Уникальные clasnames или id будут работать, как и при использовании #menu> ul. Это предназначает только прямые дочерние элементы #menu, а не все ul (т.е.: вложенные ul). Что касается вашего последующего вопроса, определите, что выбрасывает размер и помещает его в #menu> ul и оставляют остальное как есть. Это должно приблизиться к тому, где вы хотите быть. – tayvano

Ответ @ angel9215 Написал помогли решить эту проблему! Из перебора кода было видно, что уникальный идентификатор был добавлен в начальную строку ul, и был разработан по-разному. Более подробные спецификации на ul/li были использованы для конкретного стиля определенной ul/li. Еще раз спасибо!

РЕДАКТИРОВАТЬ: После удаления тега комментария с шириной на li: hover ul, он попал в раскрывающийся размер! Еще раз спасибо всем! Все работает отлично!

источник

2016-01-27 19:18:35

Коробка растягивается до конца экрана

ответ

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