Home/ Questions/Q 6382611
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T02:32:42+00:00

I’m creating a horizontal menu with sub-menus under it (fig c) but all I

  • 0

I’m creating a horizontal menu with sub-menus under it (fig c) but all I could get was fig a but I want something like fig b or fig c:

enter image description here

HTML and CSS code for fig a:

<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>

The question is: how can I create an output like fig b or fig c? I want the submenus to appear right under their parent menu without the parent menu being extended so long.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    @Alex; check this link http://jsfiddle.net/sandeep/9SH4S/ may that’s help you.

    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;
}
    • 0