Tabs with submenus problem

**LORDGreg** · Oct 18, 2007 01:00

hi, recently i started doing updates to my page; the thing is, i have some difficulties creating a tabbed menu with sub-menus. check it here. try to mouse-over the tabs shown on the top right part of the page. "forum" and "o strani" tabs are the ones that will have the sub-menus.

problem #1:
now, the main problem i'm having is, whatever width i set for menus, if the width is too small it won't wrap the text, but if i set it to to much (~300px), two <li> tags will be shown in one line of submenu.

problem #2:

when mouse-over sub-menu items, you will notice approx 4px gap on the right side to the dotted border. i tried to padding, margin: 0, but that doesn't help, neither did helped anything i set.

please help me out with that. i checked a lot of tabs/submenus tutorials, but none showed the right result i wanted.

ps: by the way, setting "left: Xpx" option is the right way to go, when wanting to move sub-menus under appropriate tab, isn't it?

thank you for any help!

**Ruben K.** · Oct 18, 2007 03:15

How I would go about this is putting a wrapper layer around all navigation items

Code:

<div class="nav_item">
<a href="">Nav Link</a>
<div class="submenu">Submenu items here</div>
</div>

And have the .nav_item position:relative, so you can position the .submenu
directly below it's top-left position

Code:

.nav_item{
    position: relative;
}

.submenu{
    position: absolute;
    top: 25px;
}

**LORDGreg** · Oct 18, 2007 04:19

thank you for that info.

what about every <li> being in its own row? check/mouseover "O strani" tab. currently, submenu looks like:

subitem 1 subitem 2
subitem 2

it should be like:

subitem 1
subitem 2
subitem 3

any ideas?

**Paul O'B** · Oct 18, 2007 06:15

Hi,

Something like this should do what you want.

Code:


#Tabs {
    float: right; 
    line-height: normal; 
    margin: 50px 0 0 0; 
    width: 500px; 
    padding: 10px 10px 0 50px; 
    list-style: none;
    text-align:left;
}
#Tabs li { 
    float:left;
    position:relative;
}
#Tabs a { 
    display:block;
    background: url("http://beta.sloreactor.com/content/templates/reaktor/images/tableft.gif") no-repeat left top; 
    padding: 0 0 0 4px; 
    text-decoration: none;
    white-space:nowrap
}
#Tabs a span { 
    display:block; 
    background: url("http://beta.sloreactor.com/content/templates/reaktor/images/tabright.gif") no-repeat right top; 
    padding: 5px 15px 4px 6px; 
    color: #FFF;
}
#Tabs a:hover span { color: #000; }
#Tabs a:hover { background-position: 0&#37; -42px; }
#Tabs a:hover span { background-position: 100% -42px; }
#Tabs ul { 
    border: 1px dotted #30353b; 
    background: #FDD30B; 
    position: absolute; 
    left:-999em; 
    padding: 1px 1px 0 1px;
    min-height:0
}
#Tabs ul li { 
    display: block; 
    float: none; 
    font-size: 0.9em;
}
#Tabs ul li a {
    float:none; 
    background: transparent; 
    color: #000; 
    padding: 4px 8px 4px 8px; 
    border-bottom: 2px solid #FDD30B;
    display: block;
}

#Tabs ul li a:hover { 
    background: #fcde58; 
    color: #000; 
    border-bottom: 2px solid #30353b;
}
#Tabs li:hover ul,#Tabs li.over ul{left:0;top:27px; }

/* ie6 fixes */
* html #Tabs a,* html #Tabs a span {float:left} 
* html #Full #Header .Navigation{overflow:hidden}
/*  */

Here's the full page in case I missed anything (I added the js routine for ie6 also):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250" />
<title>slor- new tpl</title>
<!--[if lte IE 6 ]>
<script type="text/javascript">
sfHover = function() {
    var sfEls = document.getElementById("Tabs").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" over";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" over\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>
<![endif]-->
<style type="text/css" media="all">
* { margin: 0; padding: 0; }
html{ overflow-x: auto; }
body { background: #a0a0a0; color: #000; font-family: Trebuchet MS, Tahoma, Georgia, Verdana, Arial; font-size: 0.8em; line-height: 135%; text-align: center; }


#Full { background: #cdcdcd; width: 970px; margin: 0 auto; padding: 0 10px; }

#Full #Topbar { background: #30353b; height: 30px; color: #fff; text-align: left; }
#Full #Topbar #Member { float: left; width: 500px; padding: 5px 0 0 10px; }
#Full #Topbar #Search { float: right; width: 200px; padding-right: 5px; }
#Full #Topbar #MemberMore { float: right; width: 450px; text-align: right; padding: 5px 5px 0 0; }
#Full #Topbar #MemberMore input {  font-size: 1.0em; }
#Full #Topbar #MemberMore input[type="text"],
#Full #Topbar #MemberMore input[type="password"] { border: 0; width: 80px; }
#Full #Topbar img { border: 0; }
#Full #Topbar a { color: #fff; text-decoration: none; border-bottom: 1px dotted #fff; }
#Full #Topbar a:hover { border-bottom: 1px solid #fff; }


#Full #Topbar #Search #SearchBox { margin-top: 2px; width: 201px; height: 25px; background: url(http://beta.sloreactor.com/content/templates/reaktor/images/bg_search_box.gif); }
#Full #Topbar #Search #SearchBox .s { float: left; padding: 0; margin: 4px 0 0 6px; border: 0; width: 159px; background: none; font-size: 1.0em; }
#Full #Topbar #Search #SearchBox .go { float: right; margin: 3px 4px 0 0; }

#Full #Header { background: #ff9900; height: 80px; }
#Full #Header .Logo { float: left; width: 250px; }
#Full #Header .Logo img { border: 0; }
#Full #Header .Navigation { height: 80px; float: right; width: 710px; }

#Full #Banner { border: 1px solid #a0a0a0; width: 730px; height: 92px; padding: 3px; margin: 0 auto 10px; }



#Tabs {
    float: right; 
    line-height: normal; 
    margin: 50px 0 0 0; 
    width: 500px; 
    padding: 10px 10px 0 50px; 
    list-style: none;
    text-align:left;
}
#Tabs li { 
    float:left;
    position:relative;
}
#Tabs a { 
    display:block;
    background: url("http://beta.sloreactor.com/content/templates/reaktor/images/tableft.gif") no-repeat left top; 
    padding: 0 0 0 4px; 
    text-decoration: none;
    white-space:nowrap
}
#Tabs a span { 
    display:block; 
    background: url("http://beta.sloreactor.com/content/templates/reaktor/images/tabright.gif") no-repeat right top; 
    padding: 5px 15px 4px 6px; 
    color: #FFF;
}
#Tabs a:hover span { color: #000; }
#Tabs a:hover { background-position: 0% -42px; }
#Tabs a:hover span { background-position: 100% -42px; }
#Tabs ul { 
    border: 1px dotted #30353b; 
    background: #FDD30B; 
    position: absolute; 
    left:-999em; 
    padding: 1px 1px 0 1px;
    min-height:0
}
#Tabs ul li { 
    display: block; 
    float: none; 
    font-size: 0.9em;
}
#Tabs ul li a {
    float:none; 
    background: transparent; 
    color: #000; 
    padding: 4px 8px 4px 8px; 
    border-bottom: 2px solid #FDD30B;
    display: block;
}

#Tabs ul li a:hover { 
    background: #fcde58; 
    color: #000; 
    border-bottom: 2px solid #30353b;
}
#Tabs li:hover ul,#Tabs li.over ul{left:0;top:27px; }

/* ie6 fixes */
* html #Tabs a,* html #Tabs a span {float:left} 
* html #Full #Header .Navigation{overflow:hidden}
/*  */




#Full #Content {}
#Full #Content #Breaking { background: #30353b; color: #fff; height: 20px; }
#Full #Content #Breaking p { padding-left: 10px; float: left; width: 572px; }
#Full #Content #Breaking p.Settings { padding: 3px 10px 0 0; float: right; width: 60px; text-align: right; }
#Full #Content #Breaking p.Settings img { border: 0; }
#Full #Content #BreakingMore { background: #30353b; color: #fff; padding: 0 10px 0 10px; width: 680px; }

#Full #Content #Main { text-align: left; float: left; overflow: hidden; width: 700px; }
#Full #Content #Main #General { padding: 5px 10px 5px 10px; background: #fff; }
#Full #Content #Sidebar { float: right; width: 250px; margin-left: -10px; /* Fixes IE6 bug. */ }


#Full #Footer { background: #fff; margin-top: 20px; color: #a0a0a0; }

#Full .Menu { text-align: left; padding: 5px 10px 5px 10px; background: #30353b; color: #fff; }

/***** round boxes (white) *****/
.rbroundbox { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/nt.gif) repeat; }
.rbtop div { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/tl.gif) no-repeat top left; }
.rbtop { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/tr.gif) no-repeat top right; }
.rbbot div { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/bl.gif) no-repeat bottom left; }
.rbbot { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/br.gif) no-repeat bottom right; }


/***** round boxes (dark) *****/
.rbroundbox_d { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/nt_d.gif) repeat; }
.rbtop_d div { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/tl_d.gif) no-repeat top left; }
.rbtop_d { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/tr_d.gif) no-repeat top right; }
.rbbot_d div { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/bl_d.gif) no-repeat bottom left; }
.rbbot_d { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/br_d.gif) no-repeat bottom right; margin-bottom: 10px; }

/***** round boxes (orange) *****/
.rbroundbox_h { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/nt_h.gif) repeat; }
.rbtop_h div { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/tl_h.gif) no-repeat top left; }
.rbtop_h { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/tr_h.gif) no-repeat top right; }
.rbbot_h div { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/bl_h.gif) no-repeat bottom left; }
.rbbot_h { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/br_h.gif) no-repeat bottom right; margin-bottom: 10px; }

.rbtop div, .rbtop, .rbbot div, .rbbot,
.rbtop_d div, .rbtop_d, .rbbot_d div, .rbbot_d,
.rbtop_h div, .rbtop_h, .rbbot_h div, .rbbot_h { height: 7px; font-size: 1px; }



</style>
<script src="http://beta.sloreactor.com/content/templates/reaktor/js/prototype.js" type="text/javascript"></script>
<script src="http://beta.sloreactor.com/content/templates/reaktor/js/scriptaculous.js" type="text/javascript"></script>
<script src="http://beta.sloreactor.com/content/templates/reaktor/js/@reaktor.js" type="text/javascript"></script>
</head>
<body>
<div id="Full">
    <div id="Topbar">
        <div id="Member"> Pozdravljeni <b>Gost</b>! <a href="" onclick="mbr_expand(); return false;" title="Prikaži več">Prijava</a> ali <a href="">Registracija</a>? </div>
        <div id="MemberMore" style="display: none;"> Up. ime:
            <input type="text" />
            Geslo:
            <input type="password" />
            <input type="checkbox" />
            Neviden
            <input type="submit" name="Submit" value="Prijava" />
        </div>
        <div id="Search">
            <div id="SearchBox">
                <form id="search_form" method="post" action="/">
                    <input type="text"  value="Iskanje" class="s swap_value" />
                    <input type="image" src="http://beta.sloreactor.com/content/templates/reaktor/images/search_icon.gif" class="go" alt="Search" title="Search" />
                </form>
            </div>
            <!--//SearchBox-->
        </div>
        <!--//Search-->
    </div>
    <div id="Header">
        <div class="Logo">
            <!--
      <a href=""><img src="http://beta.sloreactor.com/content/templates/reaktor/images/reaktor.gif" alt="SLO Reactor" /></a>
    -->
        </div>
        <div class="Navigation">
            <ul id="Tabs">
                <li> <a href=""><span>Home
                    <!--<em class="TabsMore" onclick="tab_expand('TabHome'); return false;"><img src="http://beta.sloreactor.com/content/templates/reaktor/images/icon_more.gif" /></em>
          -->
                    </span></a> </li>
                <li> <a href="#"><span>Forum</span></a>
                    <ul class="TabsForum">
                        <li><a href="#">Aktivne teme </a></li>
                        <li><a href="#">Današnji najaktivnejši </a></li>
                        <!-- must have gap between text and each closing anchor to Kill IE whitespace bug-->
                    </ul>
                </li>
                <li><a href=""><span>iNFO</span></a></li>
                <li><a href=""><span>Članki</span></a></li>
                <li><a href=""><span>Blog</span></a></li>
                <li><a href=""><span>O strani</span></a>
                    <ul class="TabsAbout">
                        <li><a href="#">Kontakt </a></li>
                        <li><a href="#">Pravila </a></li>
                        <li><a href="#">Izjava o zasebnosti </a></li>
                    </ul>
                </li>
            </ul>
            <!--//Tabs-->
            <!--
            <div id="TabNewsExtended" class="TabNewsExtended" style="display:none;width:210px;position: absolute;" onmouseout="hideLayer('TabNewsExtended');">
        asdfasdf      
      </div>-->
        </div>
        <!--//Navigation-->
    </div>
    <!--//Header-->
    <div class="rbroundbox_h">
        <div class="rbbot_h">
            <div></div>
        </div>
    </div>
    <!--//rbroundbox -->
    <div id="Banner"> This is going to be banner place </div>
    <div id="Content">
        <div id="Main">
            <div class="rbroundbox_d">
                <div class="rbtop_d">
                    <div></div>
                </div>
            </div>
            <!--//rbroundbox -->
            <div id="Breaking">
                <p id="BreakingText">One or more lines for latest discussions/nfos/blogs</p>
                <p class="Settings"> <a href="" onclick="brk_roll(0); return false;" title="Nazaj"><img src="http://beta.sloreactor.com/content/templates/reaktor/images/icon_prev.gif" alt="" /></a> <a href="" onclick="brk_roll(1); return false;" title="Naprej"><img alt="" src="http://beta.sloreactor.com/content/templates/reaktor/images/icon_next.gif" /></a> <a href="" onclick="brk_refresh(); return false;" title="Osveži"><img src="http://beta.sloreactor.com/content/templates/reaktor/images/icon_refresh.gif" alt="" /></a> <a href="" onclick="brk_expand(); return false" title="Prikaži več"><img alt="" src="http://beta.sloreactor.com/content/templates/reaktor/images/icon_more.gif" /></a> </p>
            </div>
            <!--//Breaking-->
            <div id="BreakingMore" style="display: none;"> type: 1 - bil malce<br />
                type: 1 - bil malce<br />
                type: 1 - stavek<br />
                type: 1 - stavek<br />
                type: 1 - bil malce<br />
            </div>
            <!--//BreakingMore-->
            <div class="rbroundbox_d">
                <div class="rbbot_d">
                    <div></div>
                </div>
            </div>
            <!--//rbroundbox -->
            <div class="rbroundbox">
                <div class="rbtop">
                    <div></div>
                </div>
            </div>
            <!--//rbroundbox -->
            <div id="General">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec et velit eget felis consectetuer lobortis. Suspendisse odio nisi, mollis eget, posuere vitae, tincidunt quis, eros. Vestibulum sollicitudin felis eget dolor. Donec dui enim, ullamcorper non, suscipit ac, fringilla a, elit. Quisque tincidunt lectus nec ligula. Maecenas mollis. Morbi condimentum urna non est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi neque. Donec sed augue. Nullam fringilla. Donec dui est, dignissim a, pharetra eget, fringilla vel, ligula. Sed felis nulla, tempus in, accumsan id, facilisis quis, urna. Sed sagittis rutrum diam. Curabitur adipiscing hendrerit ligula. Ut nisi sem, lobortis eget, dictum in, suscipit mollis, metus. Etiam non magna non quam sagittis vestibulum. In eu nunc. Nam venenatis.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec et velit eget felis consectetuer lobortis. Suspendisse odio nisi, mollis eget, posuere vitae, tincidunt quis, eros. Vestibulum sollicitudin felis eget dolor. Donec dui enim, ullamcorper non, suscipit ac, fringilla a, elit. Quisque tincidunt lectus nec ligula. Maecenas mollis. Morbi condimentum urna non est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi neque. Donec sed augue. Nullam fringilla. Donec dui est, dignissim a, pharetra eget, fringilla vel, ligula. Sed felis nulla, tempus in, accumsan id, facilisis quis, urna. Sed sagittis rutrum diam. Curabitur adipiscing hendrerit ligula. Ut nisi sem, lobortis eget, dictum in, suscipit mollis, metus. Etiam non magna non quam sagittis vestibulum. In eu nunc. Nam venenatis.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec et velit eget felis consectetuer lobortis. Suspendisse odio nisi, mollis eget, posuere vitae, tincidunt quis, eros. Vestibulum sollicitudin felis eget dolor. Donec dui enim, ullamcorper non, suscipit ac, fringilla a, elit. Quisque tincidunt lectus nec ligula. Maecenas mollis. Morbi condimentum urna non est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi neque. Donec sed augue. Nullam fringilla. Donec dui est, dignissim a, pharetra eget, fringilla vel, ligula. Sed felis nulla, tempus in, accumsan id, facilisis quis, urna. Sed sagittis rutrum diam. Curabitur adipiscing hendrerit ligula. Ut nisi sem, lobortis eget, dictum in, suscipit mollis, metus. Etiam non magna non quam sagittis vestibulum. In eu nunc. Nam venenatis.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec et velit eget felis consectetuer lobortis. Suspendisse odio nisi, mollis eget, posuere vitae, tincidunt quis, eros. Vestibulum sollicitudin felis eget dolor. Donec dui enim, ullamcorper non, suscipit ac, fringilla a, elit. Quisque tincidunt lectus nec ligula. Maecenas mollis. Morbi condimentum urna non est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi neque. Donec sed augue. Nullam fringilla. Donec dui est, dignissim a, pharetra eget, fringilla vel, ligula. Sed felis nulla, tempus in, accumsan id, facilisis quis, urna. Sed sagittis rutrum diam. Curabitur adipiscing hendrerit ligula. Ut nisi sem, lobortis eget, dictum in, suscipit mollis, metus. Etiam non magna non quam sagittis vestibulum. In eu nunc. Nam venenatis.</p>
            </div>
            <div class="rbroundbox">
                <div class="rbbot">
                    <div></div>
                </div>
            </div>
            <!--//rbroundbox -->
        </div>
        <!--//Main-->
        <div id="Sidebar">
            <div class="rbroundbox_d">
                <div class="rbtop_d">
                    <div></div>
                </div>
            </div>
            <!--//rbroundbox -->
            <div class="Menu">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec et velit eget felis consectetuer lobortis. Suspendisse odio nisi, mollis eget, posuere vitae, tincidunt quis, eros. Vestibulum sollicitudin felis eget dolor. Donec dui enim, ullamcorper non, suscipit ac, fringilla a, elit. Quisque tincidunt lectus nec ligula. Maecenas mollis. Morbi condimentum urna non est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi neque. Donec sed augue. Nullam fringilla. Donec dui est, dignissim a, pharetra eget, fringilla vel, ligula. Sed felis nulla, tempus in, accumsan id, facilisis quis, urna. Sed sagittis rutrum diam. Curabitur adipiscing hendrerit ligula. Ut nisi sem, lobortis eget, dictum in, suscipit mollis, metus. Etiam non magna non quam sagittis vestibulum. In eu nunc. Nam venenatis.</p>
            </div>
            <div class="rbroundbox_d">
                <div class="rbbot_d">
                    <div></div>
                </div>
            </div>
            <!--//rbroundbox -->
            <div class="rbroundbox_d">
                <div class="rbtop_d">
                    <div></div>
                </div>
            </div>
            <!--//rbroundbox -->
            <div class="Menu">menus menus, more menus!</div>
            <div class="rbroundbox_d">
                <div class="rbbot_d">
                    <div></div>
                </div>
            </div>
            <!--//rbroundbox -->
        </div>
    </div>
    <!--//Content-->
    <div style="clear: both;"></div>
    <div id="Footer">
        <div class="rbroundbox">
            <div class="rbtop">
                <div></div>
            </div>
        </div>
        <!--//rbroundbox -->
        <p> Vse pravice pridržane (c) Sloreactor 2002 - 2007<br />
            Powered By IP.Board  2.3.1 &#169; 2007  IPS, Inc.<br />
            Licensed to: SLO Reactor </p>
    </div>
</div>
<!--//Full-->
</body>
</html>

These menus are difficult to get right cross browser and dimensions and methods are critical . Change one thing and you risk upsetting another browser so test with care.

You shouldn't add a border on hover as that makes the page reflow and jump and is a bad effect. If you want to add a border on hover then makes sure there is already a border on the element in the background colour and then just change the color on hover.

If you float an element and you want it on the next line then set it to clear:left and the next one will be underneath.

I removed the widths and let the longest text dictate the width of the dropdown (this is difficult to do so change things with care).

The above code is validated and working in IE6, IE7, Firefox2 and opera 9

Hope it helps

**Centauri** · Oct 18, 2007 06:24

First, to get the dropdowns to be positioned below the correct tab, the relative positioning should be applied to the tab <l1>s and not the <ul>. The dropdown <ul>s can then be positioned using left and top properties. The tab <li>s should also be floated left rather than displayed inline to assist with the dropdown positioning. The width of the dropdowns can also be applied genrally, rather than separately (I used ems to cater for text resize). To prevent multiple items on a line in the dropdowns, The <li> float is removed, and block dispay on the dropdown <a> links will make the links extend the full width of the dropdown.

Try these changes:

Code:

#Tabs { float: right; clear: right; line-height: normal; margin-top: 50px; width: 500px; padding: 10px 10px 0 50px; list-style: none; }
#Tabs li { position: relative; float: left; margin: 0; padding: 0; }

#Tabs ul { border: 1px dotted #30353b; background: #FDD30B; position: absolute; display: none; top: 27px; left: 0; width: 10em; padding: 1px 1px 0 1px; }

#Tabs ul li { float: none; font-size: 0.9em; list-style: none}
#Tabs ul li a { background: none; color: #000; padding: 4px 8px 4px 8px; display: block; float: none}

#Tabs li:hover ul { display: block; }

the original styles

Code:

#Tabs ul.TabsForum { left: 108px; width: 200px; }
#Tabs ul.TabsAbout { left: 120px; width: 200px; }
#Tabs li:hover ul li { display: inline; }

can then be removed.

Edit : Damn, Paul posted similar while I was typing ......

**Paul O'B** · Oct 18, 2007 06:29

Originally Posted by centauri

Edit : Damn, Paul posted similar while I was tying ....

Never mind - yours may be better

**LORDGreg** · Oct 18, 2007 11:37

Thank you! Thank you, both of you. I really appreciate your help! Finally, i can continue working on design. These tabs just went on my nerves...

thank you again!

**LORDGreg** · Mar 11, 2008 11:51

hi,

i really hope someone will check this bump-up message. everything looks fine in IE, Firefox, but, take a look what happens in Opera browser when you mouseover those tabs, that have submenus.

can anyone offer a help here please?

many thanks!

**Paul O'B** · Mar 11, 2008 17:11

Hi,

Opera will probably prefer the anchor not to be floated but IE6 will.

e.g.

Code:

#Tabs a { display:block;}
* html #Tabs a{float:left;}

**LORDGreg** · Mar 12, 2008 00:12

works as charm!

thank you Paul, i appreciate your help.

User Tag List

Thread: Tabs with submenus problem

Thread Tools

Display

Tabs with submenus problem

Bookmarks

Bookmarks

Posting Permissions