CODEWITHSUNDEEP
htmlcss
Chaitanya
Chaitanya

Reputation: 71

Please help me with this navigation bar

this is my code for the vertical navigation bar that I have created, there is one more thing that I need to add here and that is flyout menu on mouse over. I have tried many things but it did not work. Here's my CSS CODE

.navbar{
list-style-type: none;
margin: 0;
padding: 10px;
width: 280px; /* width of menu */
}

.navbar li{
border-bottom: 1px solid white; /* white border beneath each menu item */
}

.navbar li a{
background: #333 url(media/sexypanelright.gif) no-repeat right top; /*color of menu by default*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0; /* Vertical (top/bottom) padding for each menu link */
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black; /*bottom border of menu link. Should be equal or darker to link's bgcolor*/
}

.navbar li a:visited, .navbar li a:active{
color: white;
}

.navbar li a:hover{
background-color: black; /*color of menu onMouseover*/
color: white;
border-bottom: 1px solid black; /*bottom border of menu link during hover. Should be            equal or darker to link's hover's bgcolor*/
}

and the html part is this

<ul class="navbar">
<li><a href="#">»  Computers</a>

</li>
<li><a href="#" >»  Networking Solutions</a></li>
<li><a href="#/">»  Security Solutions</a></li>
<li><a href="#">»  Office Automations</a></li>
<li><a href="#">»  Gadgets</a></li>
<li><a href="#">»  Projectors and Display     Screens</a></li>
<li><a href="#">»  Peripherals and Components</a></li>
<li><a href="#">»  Softwares</a></li> 
<li class="lastitem"><a href="#">»  Customized Solutions</a></li>       
</ul>

what I want is that when the user hovers his mouse on any of the item in this list then a flyout menu appears with a menu. Thank you in advance.

Upvotes: 2

Views: 175

Answers (2)

samrap
samrap

Reputation: 5673

The way to do this is actually very simple. Add an extra unordered list ul after the list li element that you want a submenu on. For example, say you wanted a submenu only on "Network Solutions" your html would look like this:

<ul class="navbar">
    <li><a href="#">»  Computers</a></li>
    <li><a href="#" >»  Networking Solutions</a>
        <ul>
          <li>This is a submenu item</li>
          <li>Another submenu item</li>
        </ul>
      </li>
    <li><a href="#/">»  Security Solutions</a></li>
    <li><a href="#">»  Office Automations</a></li>
    <li><a href="#">»  Gadgets</a></li>
    <li><a href="#">»  Projectors and Display     Screens</a></li>
    <li><a href="#">»  Peripherals and Components</a></li>
    <li><a href="#">»  Softwares</a></li> 
    <li class="lastitem"><a href="#">»  Customized Solutions</a></li>       
</ul>

Then in your css, you need to set the ul after the first ul and li item to display:none so that it doesnt show. Then set the hover psuedo to display:block or inline depending on your needs. Here's a simple fiddle of what it should look like. Obviously a simple example, but it makes the point.

Upvotes: 0

Jonas Grumann
Jonas Grumann

Reputation: 10786

Is this what you're looking for?

JSFiddle

This is the key, when you hover the li, the child with the class .flyout will be visible

.navbar li:hover .flyout {
    display: block;
}

PS: I only added a submenu for the first two voices in the main menu to keep the code short

Upvotes: 1

Related Questions