Использование вложенных списков для создания горизонтального меню с подменю под ним - PullRequest
Новая
       2

Использование вложенных списков для создания горизонтального меню с подменю под ним

2 голосов
/ 31 августа 2011

Я создаю горизонтальное меню с подменю под ним (рис. С), но все, что я мог получить, это рис. А, но я хочу что-то вроде рис. Б или рис. С:

enter image description here

HTML и CSS-код для рис. А: 

<html>
<head>
<style type="text/css">
ul li{
    display:inline;
    background-color:red;
}
ul li ul{
    display:inline;
}
ul li li{
    position:relative;
    top:20px;
    display:inline;
    background-color:green;
}
li{
    border:1px solid white;
}
li:hover{
    border:1px solid blue;
}
</style>
<title>Untitled Document</title>
</head>

<body>
<ul>
  <li>overview</li>
  <li>alarm
    <ul>
      <li>view</li>
      <li>config</li>
    </ul>
  </li>
  <li>log</li>
  <li>config
    <ul>
      <li>tag</li>
      <li>security</li>
    </ul>
  </li>
</ul>
</body>
</html>

Вопрос: как я могу создать вывод, подобный рис. B или рис. C?Я хочу, чтобы подменю появлялись прямо под их родительским меню, без расширения родительского меню.

1 Ответ

2 голосов
/ 31 августа 2011

@ Alex;проверьте эту ссылку http://jsfiddle.net/sandeep/9SH4S/ может это вам поможет.

css: 

ul li{
    display:inline;
    background-color:red;
    position:relative;
}
ul li ul{
    display:inline;
    position:absolute;
    top:20px;
    left:0;
    white-space:nowrap;
}
ul li li{
    display:inline;
    background-color:green;
}
li{
    border:1px solid white;
}
li:hover{
    border:1px solid blue;
}
...