Помогите отредактировать меню

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем shooter18, 6 окт 2015.

  1. shooter18

    shooter18

    Регистрация:
    6 окт 2015
    Сообщения:
    3
    Симпатии:
    0
    Помогите отредактировать горизонтальное выпадающее меню не как не получается сделать то что нужно ))
    вот html :
    HTML:
    <!DOCTYPE html>
    <html lang="ru">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Производство сендвич панелей пвх в СПБ </title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="page-align" class="b3radius">
       <div id="header">
          <div id="header_nav">
             <ul>
                 <li class="headerList"><a href="#">Главная   </a></li>
                 <li class="headerList"><a href="#">Новости   </a>
                 <ul>
                     <li><a href="#"> меню 1</a></li>
                     <li><a href="#">Новый пункт меню 2</a></li>
                     <li><a href="#">Новый пункт меню 3</a></li>
                 </ul>
                 </li>
                 <li class="headerList"><a href="#"> Статьи  </a></li>
                 <li class="headerList"><a href="#">Халява   </a></li>
                 <li class="headerList"><a href="#">Сообщество</a></li>
                 <li class="headerList"><a href="#"> Спорт   </a></li>
                 <li class="headerList"><a href="#"> Погода  </a></li>
                
                
             </ul>
          
          </div>
           <div id="header_spase"></div>
          <div id="header_cont">
              <div id="text_logo">
               <h1>Завод<span style="color: #98ca60">Окон</span></h1>
         <span class="h1description"></br>Производство окон ПВХ</span>
              
               </div> 
           </div>
       </div>
       <div id="sidebar" class="f_left">
      
       </div>
       <div id="content" class="f_right">
        
       </div>
        <div class="clr"></div>
    </div>
    </body>
    </html>
    вот CSS :
    * {
        margin: 0;
        padding: 0;
    }
    body {
        background: url(images/background.png);
        font: 16px Arial, Tahoma, sens-serif;
    }
    a {
        text-decoration: none;
    }
    h1 {
        font-size: 20px;
        color: #515151;
    }
    
    .f_left, #header_nav ul li, h1, #text_logo {
        float: left;
    }
    .f_right, {
        float: right;
    }
    .b3radius {
       border-radius: 3px;
       -webkit-border-radius: 3px;
       -o-border-radius: 3px;
       -moz-border-radius: 3px;
       -khtml-border-radius: 3px;
    }
    .h1description {
        color: #9d9d9d;
        font-size: 15px;
      
    }
    #page-align{
        width: 1000px;
        margin: 35px auto;
        box-shadow: 0px 1px 3px #dddddd;
        -webkit-box-shadow: 0px 1px 3px #dddddd;
        overflow: hidden;
    }
    #header {
        height: 280px;
        border-bottom: solid 3px #c7d4e1;
    }
    #header_spase{
        height: 20px;
        border-bottom: solid 3px #c7d4e1;
    }
    #header_nav {
        height: 70px;
        border-bottom: solid 3px #c7d4e1;
        background: #fff;
    }
    
    #header_nav ul {
         padding:0;
         margin:0;
         list-style:none;
         position:relative;
    }
    
    #header_nav ul li{
         display:block;
         line-height: 70px;
    }
    
    .headerList a{
         border-right:solid #505e58 thin;
    }
    #header_nav ul li a{
         display:block;
         padding-left:13px;
         padding-right:13px;
         color:#6f6f6f;
         text-decoration:none;
    }
    
    #header_nav ul li a:hover{
         background: #98ca60;
        height: 70px;
         color:#fff;
    }
    
    #header_nav ul ul{
         position:absolute;
         top:70px;
         background: rgba(152, 202, 96, 0.68);
         border:thin solid #849c92;
         display:none;
    }
    
    #header_nav ul li:hover ul{
         position:absolute;
         left:0;
         display:block;
    
    }
    
    #header_nav ul ul li a{
         border:none;
         color:#6f6f6f;
    }
    
    #text_logo {
        color: #515151;
        margin-left: 20px;
        margin-top: 40px;
    }
    .header_text {
        color: #515151;
      
    }
    .header_text span {
        font-size: 10px;
        color: #b6b6b6;
    }
    #header_cont {
        height: 60px;
    }
    
    #sidebar {
        width: 195px;
        height: 400px;
        border-right: solid 3px #98ca60;
        background: #e7e7e7;
    }
    #content {
        width: 800px;
        height: 400px;
    }
    .clr {
        clear: both;
    }
    ------------------------------------
    хочу что бы выпадающий список отображался не горизонтально а вертикально и при наведении на выпадающий список цвет активной родительской ссылки не менялся на белый...вообще в идеале нужно вот такое получить меню как на этом сайте http://veka-spb.ru/
    --- Добавлено, 6 окт 2015 ---
    А вот ссылка на менюшку которую пытаюсь отредактировать http://oknaspb.esy.es/
     
    Lasted edited by : 6 окт 2015
  2. Fantastic

    Fantastic

    Регистрация:
    18 сен 2015
    Сообщения:
    22
    Симпатии:
    6
    Здравствуйте, если хотите сами научиться, есть не большой (хоть он и старый, но хороший) курс по меню https://yadi.sk/d/zw6fANE-jZnbN Сам по нему быстро пробежался (не было время учить, сказали если выучить что там дается можно практически любые меню делать, почему практически, там css3 не рассматривается :Smile: ) но уже видно что хороший.
    --- Добавлено, 7 окт 2015 ---
    Могу вот еще пример с комментариями скинуть, может поможет.
     
    shooter18 нравится это.
  3. 0lexandra

    0lexandra

    Регистрация:
    5 окт 2015
    Сообщения:
    9
    Симпатии:
    3
    #header_nav ul ul{
    position:absolute;
    top:70px;
    background: rgba(152, 202, 96, 0.68);
    border:thin solid #849c92;
    display:none;
    }

    Вот для этого стиля пропишите ширину.
    Например, на указанном в качестве примера сайте стоит width: 250px;
    В таком случае ваша выпадающая менюшка выстраивается в столбик.
     
    shooter18 нравится это.
  4. shooter18

    shooter18

    Регистрация:
    6 окт 2015
    Сообщения:
    3
    Симпатии:
    0
    да становится в столбик! только оно теперь какое то странное...ссылка текста не занимает всю ширину...
     
  5. 0lexandra

    0lexandra

    Регистрация:
    5 окт 2015
    Сообщения:
    9
    Симпатии:
    3
    "Ну японский магнитофон", поставьте не 250 пикселов, а поменьше...

    #header_nav ul li{
    display:block;
    line-height: 70px;
    }
    и сюда тоже ширину допишите, чтобы заливка ссылки совпадала по ширине с выпадающей менюшкой.
     
  6. shooter18

    shooter18

    Регистрация:
    6 окт 2015
    Сообщения:
    3
    Симпатии:
    0
    получается вообще крокозябры! меню съехало в лево и постоянно меняет размер при наведении..кароче не в этом дело!