Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
Miliya
0 / 0 / 0
Регистрация: 14.07.2014
Сообщений: 7
#1

Не делает выплывающее меню в рамку - HTML, CSS

14.07.2014, 16:14. Просмотров 423. Ответов 9
Метки нет (Все метки)

Здравствуйте! Я в этом деле новичок, так что возможно некорректно выражаюсь. Прошу помочь!
Сделала на сайте выплывающее меню, не пойму куда в код засунуть рамку для него...
На рисунке я так понимаю полоса от рамки?) Спасибо заранее за помощь!

Код CSS к меню

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
ul.reset menulinks > li {
    position: relative;
}
ul.reset menulinks > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color:#b3d9f9;
    text-decoration: none;
}
ul.reset menulinks > li > a:hover {
    background-color: white;
}
ul.submenu {
    display: none;
    position: relative;   
    width: 130px;
    background-color: white;
    
}
ul.submenu > li {
    display: block;
   
}
ul.submenu > li > a {
    display: block;
    padding: 15px;
    color: #3b4b59;
    width: 100px;
   
    background-color: #b3d9f9;
    text-decoration: underline;
    line-height:10px;
}
 
ul.menulinks > li:hover > ul.submenu {
display: block; 
}
0
Миниатюры
Не делает выплывающее меню в рамку  
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
14.07.2014, 16:14
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Не делает выплывающее меню в рамку (HTML, CSS):

Как добавить выплывающее меню к уже готовому горизонтальному меню (не меняя дизайн горизонтального меню)? - HTML, CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html...

выплывающее меню - HTML, CSS
как зделать выплывающее меню (в HTML, CSS), которое будет появляться справа от пунктов меню.

Криво выплывающее меню - HTML, CSS
Добрый день 2ой день бьюсь над проблемой с выплывающим меню (фотография снизу) Делая выплывающее меню на отдельной странице все четко...

Выплывающее меню CSS - HTML, CSS
http://jsfiddle.net/9zJ9P/1/ вся проблема в выплывающем подменю, вроде бы с ним все верно (оформление еще не готово) , но если открыть...

Выплывающее меню - как реализовать плавность появления - HTML, CSS
Не могу сделать плавно вытекающее меню в стиле аккардеон. Свойство transition не работает если в родительском контейнере установлено...

Сделать рамку для вертикального меню - HTML, CSS
Есть вертикальное меню ,написанное на css ,нужно сделать рамку ,чтоб меню было посередине рамки ,что бы при добавлении новых пунктов в меню...

9
_Я_
16 / 16 / 11
Регистрация: 10.07.2014
Сообщений: 84
14.07.2014, 16:38 #2
напиши разметку html
0
Miliya
0 / 0 / 0
Регистрация: 14.07.2014
Сообщений: 7
14.07.2014, 16:47  [ТС] #3
Вот код к меню в HTML
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="topmenu">
  <ul class="reset menulinks">
    <li><a href="http://sckamaz.com/shkola/istoriya-shkoly/44-istoriya-shkoly.html" title="">История школы</a></li>
    <li><a href="http://sckamaz.com/gruppy/">Группы</a>
<ul class="submenu">
<li><a href="http://sckamaz.com/gruppy/molodezhnaya/">Молодежная</a></li>
<li><a href="http://sckamaz.com/gruppy/1997gr/">1997г.р.</a></li>
<li><a href="http://sckamaz.com/gruppy/1998gr/">1998г.р.</a></li>
<li><a href="http://sckamaz.com/gruppy/1999gr/">1999г.р.</a></li>
<li><a href="http://sckamaz.com/gruppy/2000gr/">2000г.р.</a></li>
<li><a href="http://sckamaz.com/gruppy/2001gr/">2001г.р.</a></li>
<li><a href="http://sckamaz.com/gruppy/2002gr/">2002г.р.</a></li>
<li><a href="http://sckamaz.com/gruppy/2003gr/">2003г.р.</a></li>
<li><a href="http://sckamaz.com/gruppy/2004gr/">2004г.р.</a></li>
<li><a href="http://sckamaz.com/gruppy/2005gr/">2005г.р.</a></li>
<li><a href="http://sckamaz.com/gruppy/2006gr/">2006г.р.</a></li>
<li><a href="http://sckamaz.com/gruppy/2007gr/">2007г.р.</a></li>
</ul>
</li>      
  <li><a href="http://sckamaz.com/shkola/roditelyam/96-pravila.html" title="">Родителям</a></li>               
              </ul>
          </div>
0
_Я_
16 / 16 / 11
Регистрация: 10.07.2014
Сообщений: 84
14.07.2014, 16:55 #4
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
ul.menulinks {
  list-style: none;/*это добавил я*/
  padding: 0;/*это добавил я*/
  margin: 0;/*это добавил я*/
}
ul.reset.menulinks > li {
    position: relative;
    float: left;/*это добавил я*/
}
ul.reset.menulinks > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color:#b3d9f9;
    text-decoration: none;
}
ul.reset.menulinks > li > a:hover {
    background-color: white;
}
ul.submenu {
    display: none;
    position: absolute;   /*это добавил я*/
    width: 130px;
    background-color: white;
    margin: 0;/*это добавил я*/
    padding: 0;/*это добавил я*/
    border: 1px solid #f00;/*это добавил я, собственно рамка вокруг выпадающего меню*/
    
}
ul.submenu > li {
    display: block;
   
}
ul.submenu > li > a {
    display: block;
    padding: 15px;
    color: #3b4b59;
    width: 100px;
   
    background-color: #b3d9f9;
    text-decoration: underline;
    line-height:10px;
}
 
ul.menulinks > li:hover > ul.submenu {
display: block; 
}
0
Miliya
0 / 0 / 0
Регистрация: 14.07.2014
Сообщений: 7
14.07.2014, 17:10  [ТС] #5
Вставила в CSS, и вот что получилось)
Сама строка меню выходит за рамки, но это не проблема исправить, рамка опять же для одной строки и почему то красная) мне нужно для всего окна меню)
0
Миниатюры
Не делает выплывающее меню в рамку  
_Я_
16 / 16 / 11
Регистрация: 10.07.2014
Сообщений: 84
14.07.2014, 17:15 #6
сам сайт есть, скинь ссылку если да

Добавлено через 1 минуту
Цитата Сообщение от Miliya Посмотреть сообщение
очему то красная
потому что я цвет такой поставил
0
Miliya
0 / 0 / 0
Регистрация: 14.07.2014
Сообщений: 7
14.07.2014, 17:21  [ТС] #7
Простите за невнимательность)
Вот ссылка на сайт - http://sckamaz.com/
Там все меня устраивает, только вот нужна рамочка как эта полосочка сбоку)
И спасибо что откликнулись)
0
_Я_
16 / 16 / 11
Регистрация: 10.07.2014
Сообщений: 84
14.07.2014, 17:34 #8
Лучший ответ Сообщение было отмечено автором темы, экспертом или модератором как ответ
style.css (45 line) ul.submenu, замени на это
CSS
1
2
3
4
5
6
7
8
9
10
display: none;
width: 130px;
background-color: white;
border: 1px solid #227591;
background-image: none;
height: auto;
padding: 1px;
background-color: #abefff;
position: absolute;
margin-left: -2px;
1
Miliya
0 / 0 / 0
Регистрация: 14.07.2014
Сообщений: 7
14.07.2014, 17:43  [ТС] #9
Спасибо огромное!!!!! Вы мне очень помогли!))
Все работает как нужно!
0
_Я_
16 / 16 / 11
Регистрация: 10.07.2014
Сообщений: 84
14.07.2014, 17:55 #10
Miliya, пожалуйста
0
14.07.2014, 17:55
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
14.07.2014, 17:55
Привет! Вот еще темы с ответами:

выплывающее меню - JavaScript
&quot;По щелчку на ссылке сверху плавно &quot;выплывает&quot; меню. Повторный щелчок убирает меню обратно&quot; подскажите какие средства использовать и где...

Выплывающее меню - JavaScript
Добрый день. Текст расположен слева например &quot;Игры&quot;. При наведение на него справа должен выплывать столбик с названиями игр. Каждую игру из...

Как отключить выплывающее меню? - Web
Не подскажите, как отключить выплывающее меню при заполнении форм (т.е. например когда при вводе телефона выплывают введенные номера) и...

Многоуровневое выплывающее меню по hover - jQuery
Всем привет! В js и jquery новичок. Хотел бы услышать совет, можно ли как то усовершенствовать код. Также хотелось бы как то реализовать...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Рейтинг@Mail.ru