Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 22.06.2013, 22:33   #1
Julila
Форумчанин
 
Регистрация: 04.01.2011
Сообщений: 125
По умолчанию выпадающее меню при нажатии

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


пс. очень благодарна за любую помощь

Код HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fortune</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">

 <link rel="stylesheet" type="text/css" href="style1.css">
 
</head>


<body>
  <header>

    <p class="title"> Fortune </p>
    <hr color= 'grey' ; ><div class="droplink">
      <a href="#">About</a>
<ul>
   <li class="facebook"><a href="#" target="_blank">Company</a></li>
   <li class="twitter"><a href="#" target="_blank">Team</a></li>
   <li class="gplus"><a href="#" target="_blank">News</a></li>
   <li class="vk"><a href="#" target="_blank">Solutions</a></li>
   <li class="rss"><a href="#" target="_blank">Events</a></li>   
   <li class="rss"><a href="#" target="_blank">Ewords</a></li>
</ul></div>
  	<a href=".html">Main</a>   


   <a href="rome.html">Services</a>
   <a href="rome.html">Projects</a>
   <a href="rome.html">Blog</a>
   <a href="rome.html">Contacts</a>
 

  </header>
  
<section>
fsdfsdfds  dsfs
</section>


</body>
</html>

сss

Код:
body {
	  background-color: black;	 
     margin-top: 25px;
     margin-left: 0;
     margin-right: 0;
    }
    
    header, section, footer, aside, nav, article {
 display: block; /* Блочный элемент */
}
   
   header {
   	margin-top: 0;
 	   margin-bottom: 0;
 	   padding-left: 5%;
 	   padding-right: 5%;
 	   padding-top: 0;
 	   padding-bottom: 50px;
 		background-color: white;
;
 		
   	font-size: 30pt;}
   	
  hr {
  	padding-top: 0;
  	padding-bottom: 0;
  	margin-top: 0;
 	   margin-bottom: 0;  	
  	} 	
  	
   section {
   		height: 20%;
 	   padding-left: 5%;
 	   padding-right: 5%;
 	   background-color: grey;
 	  
   	
   		}
   	
   	p.title {
   		
 	   margin-top: 0;
 	   margin-bottom: 0;
 	   padding-bottom: 5px;
 	   padding-top: 20px;
   	font-size: 40pt;
   	
   		}
   		
 
   	a {
   		font-size: 10pt;
   		padding-left: 10px;
   		 padding-right: 10 px;
   	text-decoration: none;
   		}
   	 
   	 
   	 a:hover{
   	 	
   	 	 color: white; /* Цвет текста */
    background-color: black; /* Цвет фона */
    padding-left: 10px;
    padding-right: 10 px;
     color: white; /* Цвет обычной ссылки */
   	 padding: 2px; /* Поля вокруг текста */
   	 text-decoration: none;
   	 background: black;
   	 font-size: 10pt;
   	 border: 5px black solid; /* стили рамки */
 border-radius: 20px;
    
    
}

















/
/*Базовая обертка*/
.droplink {
}
/*Стиль блока при наведении*/
.droplink:hover{
	position: fixed;
 z-index: 3;
 background-color:white;
}


   
   
/*Заголовок в обычном состоянии*/
.droplink  a{
	z-index: 2;

 padding:1px 0px;
 color:#999;
 text-decoration:none;
    
}
.droplink  a img{border:none}
/*Стиль для заголовка при наведении*/
.droplink:hover h3 a {
 color:#FFF;
 font-weight:bold;
 position:relative;
 height: 200px;
}

  
  
  
  /*Скрываем список без наведения*/
.droplink ul{
 list-style:none;
 display:none;
}
/*Отображаем список при наведении*/
.droplink:hover ul{
 display:table;
 margin-top:40px
}
.droplink li{display:block}



.droplink li a{
 padding:5px 5px 4px 34px;
 margin:1px;
 background-color:white;
 display:block;
 color:grey;
 text-decoration:none;
 font-size:12px;
 border-color: grey;
 border-left-width: 1px;
 
}
/*Стиль элемента при наведении*/
.droplink li a:hover{
 background-color:grey;
 border-color: grey;
 
 color: white;
}
Julila вне форума Ответить с цитированием
Старый 01.07.2013, 13:46   #2
yaskin
Форумчанин
 
Регистрация: 10.01.2011
Сообщений: 112
По умолчанию

Код:
a {
    float: left;
    font-size: 10pt;
    padding-left: 10px;
    text-decoration: none;
}
ключевое здесь float: left;
Для спасибо весы слева

Последний раз редактировалось yaskin; 01.07.2013 в 13:51.
yaskin вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При нажатии на ссылку появляеться меню Vitaliy> JavaScript, Ajax 2 01.07.2011 00:48
Css-меню вертикальное выпадающее и раскрывающееся при выборе Landysh86 HTML и CSS 3 04.05.2011 13:25
Выпадающее меню dvuwka HTML и CSS 1 23.04.2011 03:22
Выпадающее меню DICTATOR Помощь студентам 3 28.11.2009 15:18
Как(чем) удалить пункты из меню, которое появляется при нажатии правой кнопки мыши? TwiX Свободное общение 13 11.11.2009 13:53