CSS Вертикальное меню с горизонтальным подменю - PullRequest
1 голос
/ 10 мая 2011

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

Меню, которое я хочу, состоит из точек. Эти точки вертикальные. Текст для этих точек будет добавлен позже, так что не против этого сейчас. Я хочу подменю для некоторых из этих точек. Это подменю должно быть горизонтальным. Лучше всего иллюстрируется ниже.

x
x x x 
x
x
x

Но пока это выглядит так:

x
x
xx
x
x

Таким образом, подменю находится на одну строку ниже того места, где оно должно располагаться поверх другого элемента. Надеюсь, это ясно

HTML-код, который у меня есть:

         <ul id="mainmenu">
         <li id="liHome" class="active">
             <a href="#item-x1y1" class="panel" rel="none" id="Home">Home</a>
         </li>
         <li id="liServices" class=" ">
             <a href="#item-x1y2" class="panel" rel="SubMenuY2" id="Services">Services</a>
             <ul style="" id="SubMenuY2" class="submenu">
                 <li><a href="#">Sub-item 1</a></li>
                 <li><a href="#">Sub-item 2</a></li>
             </ul>
         </li>
         <li id="liEnvironment">
             <a href="#item-x1y3" class="panel" rel="none" id="Environment">Environment</a>
         </li>
         <li id="liCareer">
             <a href="#item-x1y4" class="panel" rel="none" id="Career">Career</a>
         </li>
         <li id="liContact">
             <a href="#item-x1y5" class="panel" rel="none" id="Contact">Contact</a>
         </li>
     </ul

И CSS это:

#mainmenu {
  position: fixed;
  left: 20px;
  top: 50%;
  z-index: 999999;
  margin-top:-200px;
}

  #mainmenu li {
    height: 40px;
    position: relative;
  }

  #mainmenu a {
    display: block;
    width: 40px;
    height: 40px;
    background: url(Images/dotnav.png) 0 100% no-repeat;
 text-indent: -10000px;
    overflow: hidden;
  }


  #mainmenu a:hover,
  #mainmenu li.active a {
    background-position: 0 0;

  }
.submenu
{
    list-style-type: none; 
    position:relative;
    float:left;
}
.submenu li
{
    display: inline; 
    float:left; 
    position:relative
}

1 Ответ

1 голос
/ 10 мая 2011

Я убрал некоторые из ваших стайлингов и оставил позиционирование, чтобы было понятнее:

#mainmenu {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#mainmenu li {
  clear: left;
}

#mainmenu a {
  display: block;
  overflow: hidden;
  float: left;
}

#mainmenu a:hover,
#mainmenu li.active a {
  background-position: 0 0;
}

.submenu {
  list-style-type: none; 
  float: left;
  display: none;
}

#mainmenu li a:hover+.submenu, .submenu:hover {
  display: block;
} 



.submenu li {
  display: inline; 
  clear: none !important;
}

.submenu li a {
  float: left;
  margin-left: 10px;
}

Я также добавил немного кода для обработки наведения мыши.

...