HTML меню с CSS

ser2live · 22.05.2012

Помогите, пожалуйста, подредактировать файл style.css...
Мне нужно в итоге получить меню:

На данный момент имею:

В файле style.css у меня прописано:

Код:

#menu,
#menu ul {
  list-style-type: none;
  border: 2px solid #817f80;
  background: #003a63;
  float: left;
  width: 769px;
}
#menu ul li a:hover{color:white;}
#menu li {
  border: 1px solid #817f80;
  float: left;
  position: relative;
  background: #bdcddc;
}
#menu a {
  color: #000000;
  text-decoration: none;
  display: block;
  width: 131px;
  padding: 3px 10px;
}
#menu a:hover {
  color: #000;
  background-color: #97b5d1;
}
#menu li:hover,
#menu li.jshover {
  background-color: #97b5d1;
}
#menu li ul {
  display: none;
  position: absolute;
  padding: 0px 0px;
  width: 152px;
}
#menu li li a {
  width: 130px;
}
#menu li:hover ul,
#menu li.jshover ul {
  background-color: #003a63;
  display: block;
}
#menu li:hover li ul,
#menu li.jshover li ul {
  display: none;
  width: 140px;
}
#menu li:hover li:hover ul,
#menu li.jshover li.jshover ul {
  display: block;
}

Хотелось бы убрать синие штуки, непонимаю какая строка за них отвечает. И еще хотелось бы что-б белым выделялся текст не только у подменю, но и у меню.
Заранее спасибо.

P.S. Код HTML:

Код:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<ul id="menu">
<b>
	<li><font face="Calibri" size="4"><a href="/">Меню 1</a></font></li>
	<li><font face="Calibri" size="4"><a href="/">Меню 2</a>
		</font>
		<ul>
			<li><font face="Calibri" size="4"><a href="1.htm">Подменю 1</a></font></li>
			<li><font face="Calibri" size="4"><a href="2.htm">Подменю 1</a></font></li>
			<li><font face="Calibri" size="4"><a href="3.htm">Подменю 1</a></font></li>
			<li><font face="Calibri" size="4"><a href="4.htm">Подменю 1</a></font></li>
		</ul>
	</li>
	<li><font face="Calibri" size="4"><a href="/">Меню 3</a>
	 </font>
	 <ul>
			<li><font face="Calibri" size="4"><a href="5.htm">Подменю 1</a></font></li>
			<li><font face="Calibri" size="4"><a href="6.htm">Подменю 2</a></font></li>
			</ul>
	</li>
	<li><font face="Calibri" size="4"><a href="7.htm">Меню 4</a></font></li>
	<li><font face="Calibri" size="4"><a href="8.htm">Меню 5</a></font></li>
	</b>
		  
</ul>
</body>

mrlasking · 23.05.2012

Вот вам направление для размышлизмов, исправляйте

P.S. выделение родительского элемента списка белым

Код:

#menu li:hover a {color:white;}

Забыл одну штуку, при указанной вами структуре надо указать еще вложенному списку параметры выделения, что бы не "светилось" все выпадающее меню.

Код:

#menu ul li a:hover, #menu li:hover a, #menu li:hover ul li a:hover{color:white;}
#menu li:hover ul li a {color: #000000;}

ser2live · 23.05.2012

mrlasking сказал(а):
Вот вам направление для размышлизмов, исправляйте

P.S. выделение родительского элемента списка белым

Код:

#menu li:hover a {color:white;}

Забыл одну штуку, при указанной вами структуре надо указать еще вложенному списку параметры выделения, что бы не "светилось" все выпадающее меню.

Код:

#menu ul li a:hover, #menu li:hover a, #menu li:hover ul li a:hover{color:white;} #menu li:hover ul li a {color: #000000;}

Спасибо, только непонятно куда вставлять
ul, menu, dir {
display: block;
-webkit-margin-start: 0px;
-webkit-pading-end: 0px;
}
И почему на картинке зачеркнуты некоторые строки?

Сделал всё как надо - но работает только в Google Chrome. В остальных браузерах остался на месте синий отступ слева

Сделал всё как надо - но работает только в Google Chrome. В остальных браузерах остался на месте синий отступ слева

mrlasking · 23.05.2012

Блин, извиняюсь за дезинформацию. Левый отступ в вас, это отступ первого <ul> который по дефолту 40px, правый отступ из-за ширины фиксированной.

Код:

#menu, #menu ul {
	background: none repeat scroll 0 0 #003A63;
	border: 2px solid #817F80;
	float: left;
	list-style-type: none;
	padding: 0; <----- Вот это добавить
	Width: 769px; <----- Вот это убрать
}

И будет вам счастье. Проверил в хроме, опере, фф. Удачи)

ser2live · 23.05.2012

mrlasking сказал(а):
Блин, извиняюсь за дезинформацию. Левый отступ в вас, это отступ первого <ul> который по дефолту 40px, правый отступ из-за ширины фиксированной.

Код:

#menu, #menu ul { background: none repeat scroll 0 0 #003A63; border: 2px solid #817F80; float: left; list-style-type: none; padding: 0; <----- Вот это добавить Width: 769px; <----- Вот это убрать }

И будет вам счастье. Проверил в хроме, опере, фф. Удачи)

Большое спасибо тебе) Хотелось бы еще узнать только как сделать это меню по центру? А то оно привязывается к левому краю. Можно конечно командой position: relative; left:8px; сделать его примерно по центру, но хотелось бы что б автоматом оно было в центре.

ser2live · 23.05.2012

И еще при position: relative; left:8px; двигается и верхнее меню относительно страницы и подменю относительно меню, а как можно сдвинуть только меню? Что бы вкладки подменю открывались непосредственно под меню

Всё полностью со всем разобрался, mrlasking, спасибо за помощь

mrlasking · 23.05.2012

[member=ser2live], сорри, но начинай юзать гугл )) тут все просто: правильный запрос = варианты решения

Volter9 · 03.06.2012

mrlasking сказал(а):
[member=ser2live], сорри, но начинай юзать гугл )) тут все просто: правильный запрос = варианты решения

Это ж поповский ресурс, а недавно тут были возмущение про попова говнокодера, вам бы другую ссылочку дать

А попов в основном переводит статьи

mrlasking · 03.06.2012

[member=Volter9], о боги... Я показал, что надо начинать юзать гугл. Перейдите по ссылке "правильный запрос" и посмотрите. Там что, одни уроки попова? А на сам его сайт - мне пофигу, и в куче говна, извиняюсь, можно найти чот полезное, редко правда. Я вот нашел подход, который помог автору темы. И пофиг что остальная лабуда на сайте не достойна уважения. Для меня это просто значит, что остальное я буду искать на других ресурсах. :laugh:

ser2live сказал(а):
Всё полностью со всем разобрался, mrlasking, спасибо за помощь

Лучший ответ на ваши придирки.

HTML меню с CSS

ser2live

Новичок

mrlasking

$_GET['rich'] or die('trying');

Вложения

ser2live

Новичок

mrlasking

$_GET['rich'] or die('trying');

Вложения

ser2live

Новичок

ser2live

Новичок

mrlasking

$_GET['rich'] or die('trying');

Volter9

defined('SURRENDER') or die(); // StarWars

mrlasking

$_GET['rich'] or die('trying');

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей