Hi All,
- When the browser size is reduced the horizontal menu is looking not nice.
- When the menu item(characters) width is not equal, it displays not in perfect manner.
- Sub menu is comming under the submenu. But it should be above(i.e. sub sub menu item 1 should be above sub menu item 1).
<head id="Head1" runat="server">
<title>Untitled Page</title>
<style type="text/css">
a
{
color: #0288D8;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
}
a:hover
{
text-decoration: none;
}
:focus
{
moz-outline-style: none;
}
#navtabs
{
border-bottom: 4px solid #0288D8;
font-size: 11px;
font-weight: bold;
height: 30px;
list-style: none;
padding: 0;
text-transform: uppercase;
}
#navtabs ul
{
margin: 0px;
padding: 0px;
}
#navtabs ul li
{
/*background: #CCE7F7 url(http://learneveryday.net/demo/css/menu/tabmenu1/images/tableft.png) no-repeat left top;*/
background:url("http://exploding-boy.com/images/cssmenus/tableftB.gif") no-repeat left top;
display: inline;
float: left;
margin-right: 1px;
/*padding: 8px 0px 8px 14px;*/
padding: 8px 0px 8px 4px;
position: relative;
}
#navtabs ul li a
{
/*background: #CCE7F7 url(http://learneveryday.net/demo/css/menu/tabmenu1/images/tabright.png) no-repeat top right;*/
background: url("http://exploding-boy.com/images/cssmenus/tabrightB.gif") no-repeat right top;
/*padding: 8px 14px 8px 0;*/
padding: 8px 14px 8px 8px;
text-decoration: none;
}
#navtabs ul li:hover
{
background-position:0% -42px;
}
#navtabs ul li a:hover
{
text-decoration: none;
background-position:100% -42px;
}
#navtabs ul li.current-cat
{
/*background: #0288D8 url(http://learneveryday.net/demo/css/menu/tabmenu1/images/tableft_active.png) no-repeat left top;*/
background:url("http://exploding-boy.com/images/cssmenus/tableftC.gif") no-repeat left top;
}
#navtabs ul li.current-cat a
{
/*background: #0288D8 url(http://learneveryday.net/demo/css/menu/tabmenu1/images/tabright_active.png) no-repeat right top;*/
background: url("http://exploding-boy.com/images/cssmenus/tabrightC.gif") no-repeat right top;
color: #FFFFFF;
}
/*Ist level*/
#navtabs ul li ul
{
background-color: #EDF7E7;
display: none;
left: 0px;
margin: 0px;
/*To make all the menu items in a box starts*/
/*padding: 0px;*/
padding: 2px 1px 3px 2px;
/*To make all the menu items in a box ends*/
position: absolute;
top: 31px;
border: 1px solid #C3C6CD;
}
#navtabs li:hover ul
{
display: block;
}
#navtabs li li
{
display: list-item;
list-style: none;
/*Set the height of the menuitem*/
padding: 8px 0px 8px 0px;
/*background:url(http://m.bestofmedia.com/i/tomsguide/design/tab_off.png) repeat-x;*/
color: #1378E0;
border: 1px solid #C3C6CD;
/*To make all the menu items in a box starts*/
/*border-bottom: 0;*/
/*To make all the menu items in a box ends*/
background: transparent url(TabMenuImages/tab_off2.png) repeat-x;
}
#navtabs li li a
{
text-decoration: none;
white-space:nowrap;
background:none;
}
#navtabs li li a:hover
{
text-decoration: underline;
text-decoration: none;
color:green;
}
/*After 2nd level*/
/* To make the sub menu items to come next to the parent menu items*/
#navtabs ul ul ul
{
/*
left: 100%;
position: absolute;
top: 0;
*/
margin-top: -27px;
left: 95%;
position: realtive;
}
/*Don't display the menuItem if not needed*/
div#navtabs ul ul,
div#navtabs ul li:hover ul ul,
div#navtabs ul ul li:hover ul ul
/*,div#menu ul ul li img*/
{
/*display:none;*/
margin-left:-999em;
}
/*Display the menuItem(UL) if hover on the parent MenuItem*/
div#navtabs ul li:hover ul,
div#navtabs ul ul li:hover ul,
div#navtabs ul ul ul li:hover ul
{
/*display:block;*/
margin-left:0;
}
.HasSubMenu
{
padding-left: 10px;
background-image: url(MenuImages/rightArrow.gif);
background-repeat: no-repeat;
background-position: 0.5em;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="navtabs">
<ul id="1">
<li class="cat-item"><a href="#">Bloggingad</a>
<ul>
<li><a href="#"><span>sub menu item 1</span><span style="background-image: url('MenuImages/rightArrow.gif');
background-repeat: no-repeat; background-position: right;"> </span></a>
<ul>
<li><a href="#">sub sub menu item 1</a>
<ul>
<li><a href="#">sub sub sub menu item 1</a></li></ul>
</li>
</ul>
</li>
<li><a href="#">sub menu item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">Very biggest sub menu item 4</a>
<ul>
<li><a href="#">sub sub menu item 1</a>
<ul>
<li><a href="#">sub sub sub menu item 1</a></li></ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="cat-item current-cat"><a href="#">Branding</a></li>
<li class="cat-item"><a href="#">Freelancing</a></li>
<li class="cat-item"><a href="#">Marketing</a></li>
<li class="cat-item"><a href="#">Web Design</a></li>
</ul>
</div>
</form>
</body>
Help me to solve all the issues.