Двухуровневое меню горизонтальное

ola · February 12, 2010

верстаю меню по готовому примеру: http://blog.sjinks.pro/css/53-cross-browse...out-javascript/

я - новичок и , пожалуй, упускаю многие вещи. Просьба проверить мой код:

1. активное (class="on") подменю видно под нужным подменю (при наедении на верхнее). z-index лишь отчасти помогает

2. не получается разделить стили для верхнего меню и ниж. подменю (нижнее нужно расположить каким-то образом, чтобы оно не переносилось на другую строку)

3. самое главное сомнение. будет ли это меню работать, поскольку пока, в тестовом режиме, мне не удается поймать мышкой подменю. Может еще что добавить?

<body>

<div id="frame">

  <div id="header">
      <div id="logo"></div>

        <div id="menu_info"></div>   
  </div>

  <ul id="menu">
    <li>
        <a href="#"><center class="orange">Паевые фонды</center><!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tbody><tr><td><![endif]-->
        <ul class="smenu">
            <li><a href="#">Информация</a></li>
            <li><a href="#">Статистика</a></li>
            <li><a href="#">Отчетность</a></li>
            <li><a href="#">Документы</a></li>
            <li><a href="#">Реквизиты</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></tbody></table></a><![endif]-->
    </li>

    <li>
        <a href="#"><center class="orange">Клиентам</center><!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tbody><tr><td><![endif]-->
        <ul id="submenu">
            <li><a href="#">Продать паи</a></li>
            <li><a href="#">Обменять паи</a></li>

        </ul>
        <!--[if lte IE 6]></td></tr></tbody></table></a><![endif]-->
    </li>

    <li>
        <a href="#"><center class="orange">О компании</center><!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tbody><tr><td><![endif]-->
        <ul>
            <li><a href="#">Официальная отчетность</a></li>
            <li><a href="#">Лицензии</a></li>
            <li><a href="#">Реквизиты</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></tbody></table></a><![endif]-->
    </li> <br>

        <li>
        <a href="#"><center>Статистика и анализ</center><!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tbody><tr><td><![endif]-->
        <ul>
            <li><a href="#">Отчетность</a></li>
            <li><a href="#">аналитика</a></li>
            <li><a href="#">прогнозы</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></tbody></table></a><![endif]-->
    </li>

    <li class="on">
        <a href="#"><center>Начинающим инвесторам</center><!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tbody><tr><td><![endif]-->
        <ul>
            <li><a href="#">Операции с паями</a></li>
            <li><a href="#">Налогообложение</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></tbody></table></a><![endif]-->
    </li>

    <li>
        <a href="#"><center>Официальная отчетность</center><!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tbody><tr><td><![endif]-->
        <ul class="smenu">
            <li><a href="#">О компании</a></li>
            <li><a href="#">Отчетность</a></li>
            <li><a href="#">Лицензии</a></li>
            <li><a href="#">Реквизиты</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></tbody></table></a><![endif]-->
    </li>
</ul> 

<div id="container"></div> 

</body>

* obshie stili */
* {
	margin: 0;
	padding: 0;
}

html {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

body {
	font: 16px/26px Book Antiqua, Arial, Tahoma, Verdana, sans-serif;
	width: 100%;
	height: 100%;/*for IE*/
	min-height: 100%;
	background-color:#fff;
	position: relative;
	overflow: auto;
}

#frame {
  width: 1000px;
  margin: 0 auto;
  height: auto !important;
  height: 100%; /* для IE6 */
  min-height: 100%;
}
* html #frame{
  height:100%;
}

#header {
  width: 1000px;
	height: 63px;
	margin-top: 15px;
}

/* stili menu */
#menu_info {
  margin-left: 207px;
  width: 793px;
  height: 62px;
  border-bottom: 1px rgb(241,174,47) solid;
}

#menu .smenu a {
    float: left;
    vertical-align: middle;
    padding: 0 .5em;
    width: 160px;
    color: #163e70;
}
#menu li.smenu ul {
    position: absolute;
    left: -100px;
}
#menu, #menu li, #menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu ul {
  text-align: center;
}

#menu {
      display: block;
      width: 100%;
      position: relative;
      left: 207px; /* убрать надо будет потом!!! */
      top:-62px;  /* убрать надо будет потом!!! */
}

#menu li {
    float: left;
    height: 2em;
    line-height: 2em;
}

/* verh */
#menu li a {
    float: left;

    vertical-align: middle;
    padding: 0 .5em;
    width: 250px;
    color: #163e70;
}

#menu li ul {
    display: none;
    position: absolute;
    top: 2em;
    left: 0;
    margin-top: 40px;
    width: 100%;
    background: #FFF;
    height: auto;
}

#menu li.on ul, #menu li:hover ul {
    display: block;
    z-index: 10;
}

#menu li:hover ul {
    z-index: 100;
}

#menu li li a {
    display: block;
    border: 1px solid #f1ae2f;     
    vertical-align: middle;
    padding: 0 .5em;
    margin-right: 10px;
    background-color: #f6f5f5; /* bez background menu nakladivaetsya  t.e. po suti - nakladivaetsya !!!!!!!!! */
} 



#menu > li + li {
    margin-left: -1px;
}

#menu li ul li + li {
    margin-left: -1px;
}

#menu li a {
    outline: 0;
    text-decoration: none;
}

#menu li.on {
  font-weight: bold;
}

/*#menu li:hover a  
#menu li a:hover a*/
#menu li a:hover
{
    color: #f1ae2f;
}

/*#menu li ul li:hover*/
#menu li ul li a:hover {
    background: #fff;
}

psywalker · February 12, 2010

У тебя очень много ненужного хлама, вот такое меню можно сделать на ЦСС http://blog.sjinks.pro/wp-content/uploads/...orizontal.html#

Для начала сделай вложенные списки и скрой их, открой только активный, а после уже сделай, чтобы другие открывались по наведению, а остальные закрывались.

Sign In

Двухуровневое меню горизонтальное

Question

ola

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information