20 comments found.
Is there any vertical version for this menu? I can see it is only horizontal menu
No, sorry, it is only horizontal.
Tell me whether you can hover on these items to appear new menus and sub-menus? http://clip2net.com/s/3EmWb2i as in our example, http://clip2net.com/s/3EmWsrO
Yes, you can put whatever you want in the div. For example 4 columns with ul->li items is good way to achieve what you want.
Pre Sales question, will this work in iPad and Android OS. I know as issues with hover.
Thanks
Probably it won’t work, just because of the hover – it is required prerequisite for this menu.
Hello,
I’m novice, could you tell me which scipt I have to replace with the script code cause it doesnt work ?
Thank you so much !!
body.PB { text-align:center; font-family: Arial, Helvetica, sans-serif, “century Gothic”; background-color: #FFF; margin: 0px; background-image: url(/Files/25841/images-gsk/bg.gif); background-repeat: repeat-x; }
/Liens basiques/ a:link { color: #cc80b0; text-decoration: underline; } a:visited { color: #936; } a:hover { color: #933; text-decoration: underline; }
maincontainer {
text-align:left; margin:0 auto; width:1110px; height: auto; }
topbanner {
display:block; width:100%; text-align:center; }
topbanner img{
}
/* HEADER STYLES >> General layout configuration – Configuration de la mise en page des elements/ #headercontainer { margin: 0px; height: 240px; position: relative; background-color: none; z-index:100; / Necessary for correct display of dropdown menus / padding: 0px; background-repeat: no-repeat; /background-image: url (http://www.votre-url-image); / background-image: url(/Files/25841/images-gsk/header.jpg); background-position: left top; } #headerarea { position:relative; margin:0; padding:0; width:990px; } #headerlogo { text-align: center; margin-top: 10px; } #headercolumn1 { height: 110px; width: 220px; position: absolute; top: 0px; text-align: center; }
headerlogo a {
vertical-align: middle; margin-left: 13px; } #headerlogo img { border: 0; } #headerbanner { display:block; width:100%; text-align:center; } #headerbanner img{
}
headerdata {
width:570px; position: absolute; padding: 0px; margin-top: 10px; text-align: right; right: 30px; top:0px; } #headerdata img { margin: 0px; top: 0px; right: 0px; border: none; } #headertext { font-weight: bold; color: #CC80B0; font-size: 24px; font-family:”century gothic”; display: block; text-decoration: underline; } #headerbanner { } / HORIZONTAL MENU >> menu block – Boîte menu/ #headermenu { position: absolute; top: 196px; width: 990px; height: 25px; padding: 0px; overflow: visible; left:0;
} / HORIZONTAL MENU >> menu items layout configuration – Configuration de la mise en page des elements/ ul#hmenu { float: right; margin: 0px; list-style-position: outside; list-style-type: none; padding: 0px; } #hmenu li.menusep { height : auto; width: auto; } #hmenu li { position:relative; / Necessary for submenu positioning / float: left;/ only use left to keep menu items in the correct order/ height: 25px; line-height: 20px; } / HORIZONTAL MENU >> Link styles – Mise en forme des liens/ #hmenu a.menu, #hmenu span { _width: 1px; white-space: nowrap; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; display: block; color: #fff; text-decoration: none; height: 100% !important; height: 24px; }
/ HORIZONTAL MENU >> mouseover links styles – Element survole/ #hmenu li a:hover {
} #hmenu a.menu:hover, #hmenu a.subactive { background-image:url(/Files/25841/images-gsk/bg-title.gif); background-position:left top; background-repeat:repeat-x; color:#FFFFFF; text-decoration:none; background-color: #cc80b0; } / HORIZONTAL MENU >> – text styles – Mise en form des Textes/ #hmenu span { }
/ HORIZONTAL MENU >> First element (border before first menu item) – Premier element (bordure)/ #hmenu li.begin { display: none; float: left; width: 0px; margin: 0px; padding: 0px; border-right-width: 0px; border-right-style: solid; border-right-color: #000; height: 30px; }
/ HORIZONTAL MENU >> Last element (border after last menu item) – Dernier element (bordure)/ #hmenu li.end { border-left-width: 0px; border-left-style: solid; border-left-color: #999; width: 0px;/necessary when floating the ul to the right/ height: 25px; display: none; float: left; margin: 0px; padding: 0px; } / HORIZONTAL MENU >> Menu items – Elements/ #hmenu li.mitext { text-align:center; font-size: 12px; font-weight: normal; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; /white-space: nowrap;/ letter-spacing: 0.1em; text-decoration: none; } #hmenu li.mititle { text-align:center; font-size: 12px; font-weight: bold; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; /white-space: nowrap;/ letter-spacing: 0.1em; text-decoration: none; } #hmenu li.miimg img { border:none;
} }
hmenu li.miimg img a{
border:none;
}
hmenu li.miimg a.menu img {
margin-top:-7px; }
/ HORIZONTAL SUBMENU >> / / Class used to specify the rightmost item on the horizontal menu and correctly position it’s submenu / ul#hmenu li.menuright ul.submenu{ left:auto; right:0px; *right:-5px; / for IE only / } ul#hmenu li div { margin:0; border:none; padding-top:2px!important; padding-top:0px;; letter-spacing: normal; } ul#hmenu li ul.submenu{ list-style-position: outside; list-style-type: none; padding: 0; margin:0; border: 1px solid #cc80b0; background-color: #cc80b0; position:absolute; visibility: hidden; width: 180px; top: 24px; _left:0px; } #hmenu li.misep { background: #fff; width : 1px; } #hmenu li.mispacer { width:20px; } ul#hmenu li ul.submenu li { float:none;/ cancels inherited float properties / clear:right; background-image: url(none); height: auto; text-align:left; line-height: 100%; } ul#hmenu li ul.submenu a, ul#hmenu li ul.submenu span,ul#hmenu li ul.submenu li.mispacer, ul#hmenu li ul.submenu li.misep { border:none;/ cancels inhertited left and right borders / padding-left:10px; / set lateral padding here/ padding-right:10px;/ set submenu width here / background-color: #cc80b0; }
ul#hmenu li ul.submenu li.begin{ display:none; } ul#hmenu li ul.submenu li.mispacer{ height:10px; } ul#hmenu li ul.submenu li.misep{ height:10px; border-bottom: 4px solid #fff; _width: 180px; width: auto; background-color:#cc80b0; } ul#hmenu li ul.submenu li.end{ display:none; } #hmenu li ul.submenu li.miimg {
} #hmenu li ul.submenu li.miimg img{ border:none; } / Submenu section titles / #hmenu li ul.submenu li.mititle span, #hmenu li ul.submenu li.mititle a { margin: 0px; color:#FFF; font-size: 12px; font-weight: bold; text-align: left; }
ul#hmenu li.mitext ul.submenu li.mitext{ text-align: left; } ul#hmenu li ul.submenu li.menusep {
} ul#hmenu li ul.submenu li a, ul#hmenu li ul.submenu li span{ display:block; font-size: 11px; font-weight: normal; white-space:normal; background-image:none; margin: 0px; padding-top: 4px; / set vertical padding here/ padding-bottom:4px; color: #FFF; height: auto; _width: 180px; } ul#hmenu li ul.submenu li a:hover { background-color: #FFF; background-image: url(none); color: #cc80b0; } ul#hmenu li ul.submenu li.mititle a:hover { color:#cc80b0 } / HORIZONTAL SUBMENU END /
/ END HEADER STYLES /
/ CONTENT STYLES / #bodycontainer { margin: 0; position:relative; z-index:50;/ necessary for submenus / background-image: url(/Files/25841/images-gsk/bg-main.jpg); background-repeat: no-repeat; background-position: right bottom; padding: 0 0 120 0; background-color: #FFF;
} #bodyarea { position:relative; min-height:550px; } #bodycolumn1 { float:left; position:relative;/necessary for IE when body area is positioned relative/ width:180px; margin-top: 0px; margin-left:0px; }
bodycolumn2 {
margin:0 0 0 200px !important; margin:0px 0px 0px 220px; } #bodycolumn3 { position:absolute; top:0px; right:-20px; background-color:silver; margin:0; padding:0; } #verticalbanner { position:absolute; left:0!important; left:10px; top:0;
}
bodytopbanner {
display:block; width:100%; text-align:center; line-height: 0px; }
bodydata {
margin: 0 0 0 10px !important; margin: 0 0 0 5px; }
html #bodyarea { height:580px; }
bodydata form {
text-align: left; }
/* clear floating in bodycolumns 1 and 3 and lengthen the page if a floating column is longer than main content in #bodycolumn2 / .clearbodycontainer { clear:both; font-size:1px; line-height:0px; }
/ END CONTENT STYLES /
/ VERTICAL MENU >> General layout configuration – Configuration de la mise en page generale/ #verticalmenu { display:block; margin:0; overflow:visible; padding:0; text-align: left; background-color: #FFF; border: 1px solid #666; } / VERTICAL MENU >> Menu items layout styles – Configuration de la mise en page des elements/ ul#vmenu { margin:0; list-style-position: outside; list-style-type: none; padding-top: 0; padding-right: 0; padding-bottom: 10px; padding-left: 0; } #vmenu li { margin:0; position:relative; zoom:1; } #vmenu li a, #vmenu li span, #vmenu li.misep {
} / VERTICAL MENU >> First element (border before first menu item) – Premier element (bordure)/ #vmenu li.begin { display:none; } / VERTICAL MENU >> Separator between menu items – Separateur entre les elements/ #vmenu li.sep { background-color:#FFF; height:1; } / VERTICAL MENU >> Last element (border after last menu item) – Dernier element (bordure)/ #vmenu li.end { display:none; }
/ VERTICAL MENU >> Menu items – Elements/ / VERTICAL MENU >> Titles for sub sections / #vmenu li.mititle span, #vmenu li.mititle a.menu { font-size: 14px; font-weight: normal; display:block; color: #FFF; line-height: 25px; text-indent: 0px; text-decoration:none; text-align: center; text-transform: uppercase; _height: 25px; background-image: url(/Files/25841/images-gsk/bg-title.gif); } #vmenu li.mititle a.menu:hover, #vmenu li.mititle a.subactive { background-image:none; text-decoration: none; background-color: #936; } / End Section Titles / #vmenu li.mitext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:normal; line-height: 25px; color:#999; background-repeat: no-repeat; padding-left: 5px; background-image: url(/Files/25841/images-gsk/puce-vmenu.gif); background-position: left 7 !important; background-position: 0px 7px; } #vmenu li.menusep { border-top-width: auto; border-top-style: solid; border-top-color: #FFF; width: auto; } / VERTICAL MENU >> Spacers – Elements de type espace/ #vmenu li.mispacer { height:20px; } / VERTICAL MENU >> Separators – Elements de type separateur/ #vmenu li.misep { height:1px; background: #999; padding:0; margin:0; _font-size:0px; _line-height:0px; }
/ VERTICAL MENU >> Link styles – Mise en forme des liens/ #vmenu li.mitext a.menu, #vmenu li.mitext span { text-decoration:none; display:block; color:#999; line-height: 25px; text-indent: 10px; _text-indent: 0px; _padding-left: 10px; _width:168px; } #vmenu li.miimg { border:none; text-align:center;
} #vmenu li.miimg img { text-align: center; border:none; } #vmenu li.miimg a.menu { display:block; text-indent:0; } / VERTICAL MENU >> mouseover links styles – Element survole/
vmenu li.mitext a.menu:hover, #vmenu li.mitext a.subactive {
background-color:#cc80b0; background-repeat: no-repeat; background-position: left 7 !important; background-position: 5px 7px; background-image: url(/Files/25841/images-gsk/puce-vmenu-hover.gif); color: #FFF; padding-left: 5px; margin-left: -5px; _margin-left: -10px; _padding-left: 20px; _width:183px; } #vmenu a.menu, #vmenu span { display:block; } #vmenu li.miimg a.menu:hover, #vmenu li.miimg a.subactive { background-image: none; } #vmenu li.miimg a.menu img { border: none; } #vmenu li.miimg a.menu:hover img { border:none; } / VERTICAL MENU SUBMENUS >> BEGIN / ul#vmenu li div{ padding:0px; margin:0; border: none; } ul#vmenu li ul.submenu{ list-style-position: outside; list-style-type: none; padding: 0; margin:0; background-color:#cc80b0; position:absolute; top:0px!important; _top:0px; visibility:hidden; left:178px; _left: 178px; border: 1px solid #cc80b0; width: 180px; text-align: left; background-image: url(none); _margin-left:0px; _text-align: left; } / Class used to specify the Bottommost item on the Vertical menu and correctly position it’s submenu / ul#vmenu li.menuup ul.submenu{ bottom:-1px; top:auto; } ul#vmenu li ul.submenu li { margin:0; background: none; }
vmenu li ul.submenu li.miimg {
text-align: center; border:none; }
ul#vmenu li ul.submenu li a.menu, ul#vmenu li ul.submenu li span, ul#vmenu li ul.submenu li.misep { width:auto; padding-left:10px; padding-right:10px; text-indent:0; background: none; }
ul#vmenu li ul.submenu li a.menu:hover { background-color: #FFF; background-image: url(none); color: #cc80b0; width: auto; padding-left:10px; padding-right:10px; } ul#vmenu li ul.submenu li.misep { border-bottom-color:#cc80b0; width: auto; margin-bottom: 5px; } #vmenu li ul.submenu li.mititle span, #vmenu li ul.submenu li.mititle a.menu { margin: 0px; padding-top: 4px; padding-bottom:4px; font-size: 12px; color:#FFF; line-height: 15px; font-weight: bold; text-decoration:none; text-align: left; background: none; _text-align: left;
} #vmenu li ul.submenu li.mititle a.menu:hover { background-color: #FFF; background-image: none; color: #cc80b0; _padding-left:20px;
} ul#vmenu li ul.submenu li.mitext a.menu, ul#vmenu li ul.submenu li.mitext span { color:#FFF; font-size: 11px; font-weight: normal; text-decoration: none; line-height:14px; padding-top:4px; padding-bottom:4px; text-align: left; width: auto; padding-left:5px;
} ul#vmenu li ul.submenu li.mitext a.menu:hover { background-color: #FFF; background-image: none; color: #cc80b0; padding-left:10px; _padding-left:15px;
} ul#vmenu li ul.submenu li.miimg a.menu:hover { background-color: #FFF; background-image: none; width: 180px;
} ul#vmenu li ul.submenu li.menusep { border:none; }
/ FOOTER STYLE en ligne/ #footercontainer { clear:both; border:0 none; margin:0; padding:0; width:100%; height: auto; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; text-align: center; background-color: #000; } #footerarea { width:980px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 20px; padding-left: 0px;} #footermenu { margin:0; padding:10px 0 10 0; overflow:visible; border-bottom: 1px solid #cc80b0; } ul#fmenu { width:980px; list-style-type:none; padding:0; white-space:normal; text-align:center; margin-top: 0px; margin-right: 10px; margin-bottom: 0px; margin-left: 10px; }
fmenu li {
line-height: 20px; margin-top: 0px; margin-right: 0px; margin-bottom: 0; margin-left: 0px; border-left:1px solid #cc80b0; display:inline-block; _display:inline; padding:0 5px; text-align:left; width:200px; color: #fff; }
fmenu li.mititle {
font-weight: bold; color: #cc80b0; } #fmenu li.text { font-weight: normal; color: #FFF; } #fmenu a.menu { text-decoration:none; font-size: 10px; color: #FFF; margin: 0px; padding: 0px; } #fmenu a.menu img { } #fmenu li a:hover {} #fmenu a.menu:hover { text-decoration:none; color: #cc80b0; } #fmenu li.begin { display: none;} #fmenu li.sep { background-color:silver;} #fmenu li.end { display: none;} #fmenu li.misep { display:block; height:0px; width:0px; margin:0; font-size:0px; line-height:0px;} #copyright { padding: 5px; margin-top: 5px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;} #copyright span { color: #fff; padding-top: 5px; padding-right: 50px; padding-left: 50px;} #poweredby {} #poweredby a, #poweredby a:link, #poweredby a:visited, .blockshortcut a { color: #fff; text-decoration:none;} #poweredby a:hover { text-decoration:underline; border:none;} #poweredby span {}
/Fin du footer style ligne/
/ END FOOTER /
/LANGUAGE ICONS / #langflags { text-align:center; background-image: url(none); margin-top: 10px; height: 30px; background-position: left top; background-repeat: repeat-x; } #langflags ul, #langflags li, #langflags a, #langflags span { margin: 0; padding: 0; } #langflags ul { list-style-type:none; list-style-position:outside; text-align:center; padding-top: 5px; }
langflags ul li {
display: inline; text-align: center;
} #langflags ul li a span { background-repeat:no-repeat; display: inline; white-space: nowrap; text-align: center; cursor:pointer; margin-top: 0px; margin-right: 3px; margin-bottom: 0px; margin-left: 3px; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; font-size: 12px; background-position: center center; height: 15px; width: 22px; line-height: 1.2em; } #langflags a span { border:1px solid #999; } #langflags a:hover span { border:1px solid #75A7C8; } #flag0 { background: #FFF url(/DesignCss/SharedImages/FlagL0.gif) no-repeat; } #flag1 { background: #FFF url(/DesignCss/SharedImages/FlagL1.gif) no-repeat; } #flag2 { background:#FFF url(/DesignCss/SharedImages/FlagL2.gif) no-repeat; } #flag3 { background:#FFF url(/DesignCss/SharedImages/FlagL3.gif) no-repeat; } #flag4 { background:#FFF url(/DesignCss/SharedImages/FlagL4.gif) no-repeat; } #flag5 { background:#FFF url(/DesignCss/SharedImages/FlagL5.gif) no-repeat; } / END LANGUAGE ICONS /
bannervertical {
position:absolute; left:0; top:0; width:0px; margin-left:20px; }
.navbar { margin-top:10px; } .navbar span, .navbar select { font-family:arial; font-size:12px; font-style:normal; font-weight: bold; padding: 0px; } .navbar ul { list-style-position: outside; list-style-type: none; margin: 0px; padding: 0px; } .navbar li { padding:0; margin: 0; border:0; display: inline; line-height: normal; } .navbar a, .navbar a:visited, .navbar .off { color:#cc80b0; text-decoration: none; } .navbar a:hover { color:#936; font-weight: bolder; text-decoration: underline; }
.navbar span { white-space:nowrap; margin-top: 0px; margin-right: 1px; margin-bottom: 0px; margin-left: 1px; } .navbar select { background-color:#FFFFFF; color:#cc80b0; } a span.navfirst, a span.navprev, a span.navnext, a span.navlast { margin: 0 5; }
.view { width:100%; margin: 0px; padding: 0px; } .viewtbl { padding:0; margin:0; width:100%; border-collapse: separate; border-spacing: 10px; } .sectiontb { padding:0; }
.sectiontbarea { margin: 0px; padding: 0px; _width: 100%; / Fixes a bug in IE (related to the site’s structure) / }
.sectiondata { height : 100%; margin:0px; } .sectiondataarea { _width: 100%; / Fixes a bug in IE (related to the site’s structure) / height : 100%; padding: 0 10; border:1px solid #CCC; }
.imgbordernone, .imgthumbnail, .imgmain, .imgcat { border:none; } / BUTTONS & ICONS / / Main buttons / a.btnmain { line-height: 30px; white-space:nowrap; margin: 2px 0 2 5; color:#fff; font-family:Verdana; font-size:11px; font-weight:bold; text-decoration:none; padding: 2px 5px 2px 5px; background-color: #cc80b0; }
a.btnmain:hover{ text-decoration:none; background-color:#936; color:#FFFFFF; } a#btnsearch, a#btnviewcart { padding-left : 20px; background: #cc80b0 no-repeat 4px center; } a#btnsearch:hover, a#btnviewcart:hover { background-color: #936; } a#btnsearch { background-image: url(/DesignCss/SharedImages/white/Search.gif); } a#btnviewcart { background-image: url(/DesignCss/SharedImages/white/ShopBag.gif); } / Secondary buttons / a.btnsub { font-size:9pt; font-weight:bold; color:#cc80b0; text-decoration:none; padding:4px 0px 4px 23px; margin: 10px 0px; background-image: url(/DesignCss/27000/779/Puce.gif); background-repeat: no-repeat; background-position: left center; line-height:2.2em; } a.btnsub:hover { text-decoration:underline; } a#btnemailfriend { background: url(/DesignCss/SharedImages/EMail-w.gif) no-repeat 0px 2px; } a#btnaddtofav { background: url(/DesignCss/SharedImages/Favorite-w.gif) no-repeat 0px 2px; } a#btnattachment { background: url(/DesignCss/SharedImages/Attachment-w.gif) no-repeat 0px 3px; }
/ icons / #icontrash, #iconerror, #iconwarning, #iconsalespolicy, #iconattachment, #iconemail, #iconweb, #iconmap { width:19px; height:19px; border:0px; vertical-align: text-bottom; margin:1px; } #icontrash { background: url(/DesignCss/SharedImages/TrashCan-w.gif) no-repeat; } #iconerror { background: url(/DesignCss/SharedImages/Error-w.gif) no-repeat; } #iconwarning { background: url(/DesignCss/SharedImages/Warning-w.gif) no-repeat; } #iconsalespolicy { background: url(/DesignCss/SharedImages/SalesPolicy-w.gif) no-repeat; } #iconattachment { / Mail / background: url(/DesignCss/SharedImages/Attachment-w.gif) no-repeat; } #iconemail { background: url(/DesignCss/SharedImages/EMail-w.gif) no-repeat; } #iconweb { background: url(/DesignCss/SharedImages/Web-w.gif) no-repeat; } #iconmap { background: url(/DesignCss/SharedImages/Map-w.gif) no-repeat; } / END BUTTONS & ICONS /
.blockshortcut { display:block; width:180px; margin: 0 0 10px 0px; color: #936; border-width: 1px; border-style: solid; border-color: #936; font-size: 8pt; width:175px; } .blockcontainer { margin: 0 -10 0 5 !important; margin: 0px 0 0 5px; padding: 0px; } .blockarea { margin:5px;}
.blockshortcut, .blockshortcut input { font-family:Arial, Helvetica, sans-serif, “century Gothic”; font-size:8pt; text-align: left; } .blockshortcut form, .blockshortcut p, .blockshortcut span, .blockshortcut input, .blockshortcut select, .blockshortcut textarea, .blockshortcut a { margin:0; padding:0; } .blockshortcut a, .blockshortcut a:link, .blockshortcut a:visited { color: #cc80b0; text-decoration:none; } .blockshortcut a:hover { text-decoration:underline; border:none; } .blockshortcut input {
} #blockuserlogin .LoginTagLine {
} #blockuserlogin .email, #blockuserlogin input.password, #blocksearch .searchtext, #blocknewsletter .email, #blockcoupon input.coupon { margin: 2 5 2 0;
} #blockuserlogin .email, #blockuserlogin input.password { width: 125px; margin-right: 5px; } .blockshortcut input.blockbtn { margin-top: 5; margin-right: 5; margin-bottom: 2px; margin-left: 0; } .blockshortcut input.blockbtn:hover {
} #blockuserlogin .blockbtn { margin-right:5px; }
blockuserlogin .firstvisit, #blockuserlogin .firstvisit a {
display:block; } #blockuserlogout .hellouser { display:block; } #blockuserlogout .viewaccountinfo { display:block; } #blocksearch .searchtext { display:block; float:left; width: 140px; margin-right: 5px; } #blocksearch .searchimg { display:block; float:left; background-image:url(/DesignCss/SharedImages/Search.gif); background-repeat:no-repeat; background-position:left; margin-top:2px; width:20px; height:19px; } #blocksearch .blockbtn { display:block; clear:both; }
blocknewsletter .newstagline {
} #blocknewsletter label { } #newsok { margin-right: 5px;
} #newsko { margin-right: 5px;
} #blocknewsletter .email { width: 125px; } #blocknewsletter .blockbtn { margin-top: 5px; } #blockrssfeeds a.rss { background-image:url(/DesignCss/SharedImages/RSSFeeds.gif); background-repeat:no-repeat; background-position:center center; padding-left:174px !important; padding-left: 160px; font-size: 20px; line-height: 25px; } #blockrssfeeds a.rss:hover { text-decoration:none; } #blockrssfeeds span.rss { display:inline; } #blockcoupon span.coupon { display:block; } #blockcoupon input.coupon { width: 125px; margin-right: 5px; } #blockcoupon .blockbtn { }
/ ORIGINAL CSS / BODY.PBPW { background-color:#FFFFFF; color:#000000; font-family:Verdana; margin: 20px; height: 100%; } / ###OBSOLETE### * A.PBHMItem { color:#000000; font-family:Verdana; font-weight:bold; font-size:8pt; font-style:italic; text-decoration:none; } A.PBHMItem:hover { color:#000000; font-family:Verdana; font-weight:bold; font-size:8pt; font-style:italic; text-decoration:underline; } TABLE.PBHMItmFrm { border-style:solid; border-width:0; } A.PBVMItem { color:#000000; font-family:Verdana; font-size:8pt; text-decoration:none; } A.PBVMItem:hover { color:#000000; font-family:Verdana; font-size:8pt; text-decoration:underline; } /* ###OBSOLETE### TABLE.PBVMItmFrm { border-style:solid; border-width:0; } A.PBFMItem { color:#000066; font-family:Verdana; font-weight:bold; font-size:8pt; text-decoration:none; } A.PBFMItem:hover { color:#000000; font-family:Verdana; font-weight:bold; font-size:8pt; text-decoration:underline; } .PBFMITemSep { color:#000000; font-family:Verdana; font-size:8pt; } /.PBCopyright { color:#878787; font-family:Arial; font-weight:bold; font-size:8pt; } .PBPowerBy { color:#999999; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:8pt; } .PBHD { color:#FFFFFF; font-family:”Times New Roman”, Times, serif; font-weight:normal; font-size:24pt; font-style:normal; } .PBLogo { color:#FFFF47; font-family:Verdana; font-weight:bold; font-size:10pt; }/ .PBPTitle { color:#936; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size:16pt; font-style:normal; margin: 0px; padding: 0 0 0 0; text-transform: uppercase; text-decoration: none; } .PBSTitle { color:#cc80b0; font-family:Arial, Helvetica, sans-serif, “century Gothic”; font-weight:bold; font-size:12pt; } .PBColHead { color:#000000; font-family:Arial, Helvetica, sans-serif, “century Gothic”; font-size:10pt; } .PBStatic { color:#000; font-family:Arial, Helvetica, sans-serif, “century Gothic”; font-weight:bold; font-size:8pt; } .PBMsg { color:#000015; font-family:Arial, Helvetica, sans-serif, “century Gothic”; font-size:9pt; } .PBErrMsg { color:#FF0000; font-family:Verdana; font-weight:bold; font-size:10pt; } .PBMainTxt { color:#000; font-family:Arial, Helvetica, sans-serif, “century Gothic”; font-weight:bold; font-size:9pt; font-style:normal; } .PBShortTxt { color:#333; font-family:Arial, Helvetica, sans-serif, “century Gothic”; font-size:9pt; } .PBLongTxt { color:#000; font-family:Arial, Helvetica, sans-serif, “century Gothic”; font-size:8pt; text-align: justify; } .PBCurrency { color:#936; font-family:Arial, Helvetica, sans-serif, “century Gothic”; font-weight:bold; font-size:10pt; } .PBDate { color:#000000; font-family:Arial, Helvetica, sans-serif, “century Gothic”; font-size:10pt; font-style:italic; } .PBNumber { color:#cc80b0; font-family:Arial, Helvetica, sans-serif, “century Gothic”; font-weight:bold; font-size:10pt; font-style:italic; } A.PBLink { color:#cc80b0; font-size:12pt; text-decoration:none; } A.PBLink:hover { color:#936; text-decoration:underline; } / ###OBSOLETE### ** SELECT.PBNav { color:#000000; font-family:Verdana; font-size:8pt; font-style:normal; } A.PBNav { color:#000066; font-family:Verdana; font-size:8pt; text-decoration:none; } A.PBNav:hover { color:#000000; font-family:Verdana; font-size:8pt; text-decoration:underline; } .PBNav { color:#000000; font-family:Verdana; font-size:8pt; }/ HR.PBMain { color:#000000; height:2; } HR.PBSub { color:#000000; height:1; } TEXTAREA.PB { color:#000000; font-family:Arial, Helvetica, sans-serif, “century Gothic”; font-size:8pt; font-style:normal; } SELECT.PB { color:#000000; font-family:Arial, Helvetica, sans-serif, “century Gothic”; font-size:8pt; font-style:normal; background-color: #fff; margin: 0 0 0 0px; padding: 0px; } INPUT.PB { color:#000000; font-family:Arial, Helvetica, sans-serif, “century Gothic”; font-size:8pt; font-style:normal; } INPUT.PBBtnStd { color:#000000; font-family:Arial, Helvetica, sans-serif, “century Gothic”; font-weight:bold; font-size:8pt; } A.PBBtnStd { color:#cc80b0; font-family:Arial, Helvetica, sans-serif, “century Gothic”; font-weight:bold; font-size:8pt; text-decoration:none; } A.PBBtnStd:hover { color:#936; font-family:Arial, Helvetica, sans-serif, “century Gothic”; font-weight:bold; font-size:8pt; text-decoration:underline; } .PBReqNote { color:#000000; font-family:Arial, Helvetica, sans-serif, “century Gothic”; font-size:9pt; font-style:italic; }
/Specifications/
maincontainer.itemdetail .PBMainTxt{
font-size: 14pt; text-transform: normal; font-weight: normal; }
btnsearchnow {
line-height:0; position:relative; top:10px; }
.itemlist .sectiondataarea tbody td { width : 70%; }
.itemlist .sectiondataarea tbody td table td { _width : auto; }
/* Redimension des images menu*/
hmenu li.auto img {
height:30px; }
vmenu li.auto img {
width: 176px; }
.sectiondata .sectioncatheader { border:none; }
.sectionsubcatlist {
}
ul.subcatlist li { border-left:1px solid #666666; display:inline-block; _display:inline; line-height:100%; padding:0 5px; text-align:left; width:165px; }
ul.subcatlist li .PBMainTxt { color:#666666; font-size:8pt; font-weight:normal; }
ul.subcatlist { padding:5px; }
.subcatlisttitle{ border-bottom: 1px solid #333; }
Hello,
I am not quite sure what you want to achieve from the code pasted above. Maybe it would be easier to give advice if you send me the HTML page where you want to integrate the menu with the accompanying CSS files.
hi there, can i add this menu to wrdpress? if yes, is it to difficult to add it to wordpress?
I have no experience with Wordpress, so I cannot say. It is semantic HTML/CSS so it should be possible I guess.
hello! this is almost exactly what Im after … my only other need is to use images, rather than text in the dropdown (similair to http://www.weylandts.co.za) but, with small images (products etc…)
Do you think this would be possible with your system?
sorry – link went funny . www.weylandts.co.za
Well, each submenu is a standard DIV, so you can place whatever you want inside. You just have to align it properly so it won’t break the layout.
Nice Menu but Documentation still not updated!!
Any suggestions on how to make this menu go full screen width as far as the background and drop down background but still keep the actual menu centered and enclosed in 960px container.
I have it setup the way I like with the top menu, but I can’t figure out a way to get the drop down to go full width.
Well, I think you can create outer div with 100% width and 0px padding/margin and put the menu inside it – it will still be in aligned in the center. You have to move the background to the outer div – this way the menu will look full-width.
Quick question before purchase please! Just wanting to know if the columns are “forced”. Basically I’d like to put whatever HTML code I want in each dropdown menu. I’m not worried about the columns. 
Thanks a bunch!
Columns can be ul-li elements, table or even custom DIVs. The only thing you have to do is set its width = column width to maintain the layout.
Do you know what element or ID i should be delaying?
Thanks for the help on this.
.megamenu ul li:hover .submenu This is the selector you have to delay. Please mind that there is :hover in it.
I tried to follow this but couldn’t get it to work.
http://stackoverflow.com/questions/8566090/delay-hover-in-css3Is this a mod that I can purchase from you. I do not know much about jQuery, or enough to accomplish this at the moment.
Thanks in advance for your help.
I don’t have such mod. I am not good at jQuery either.
Maybe you can try this approach as well: http://stackoverflow.com/questions/435732/delay-jquery-hover-eventI am using this for a top category menu. Is there a way to set a delay so that the menus do not open/pull down until they have been hovered over for half a second? This will keep it from pulling down when the mouse is being routed over the menu from top to bottom.
I have tried using the transition-delay and transition function in CSS but no luck.
Thanks in advance for your help.
I don’t think it is possible to achieve this behavior without JavaScript. The menu is in pure CSS , but if you want this feature, you have to rename all :hover styles to something else and set them appropriately using jQuery for example.
Hy Can I use it on opencart?
I have no experience with OpenCart, however it is just HTML + CSS . You shouldn’t have problems integrating it in OpenCart theme.
Hello
thank you for this lightweight menu
i am trying to display the first submenu (twocols) on default, is this possible?
Thanks cvl. Unfortunately you can on set the first submenu active by default. The reason is that the menu use :hover css selector. However you can use the following “patch” to do what you want using jQuery.
<style type="text/css">
.activemenuitem {
background: #FFFFFF;
color: #C72032 !important;
-moz-border-radius-topleft: 2px;
-webkit-border-top-left-radius: 2px;
border-top-left-radius: 2px;
-moz-border-radius-topright: 2px;
-webkit-border-top-right-radius: 2px;
border-top-right-radius: 2px;
}
.activesubmenu {
display: block !important;
border: 1px solid #CDCDCD !important;
border-top: none !important;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// mark first submenu active
$("#megamenu ul li:first a").addClass('activemenuitem');
$("#megamenu ul li:first div:first").addClass('activesubmenu');
// set event to unmark first submenu active
$("#megamenu ul li").bind("mouseover", function() {
var firstlink = $("#megamenu ul li:first a");
if (firstlink.hasClass('activemenuitem'))
firstlink.removeClass('activemenuitem');
var firstlinksubmenu = $("#megamenu ul li:first div:first");
if (firstlinksubmenu.hasClass('activesubmenu'))
firstlinksubmenu.removeClass("activesubmenu");
});
});
</script>
Thank you for this very simple and very powerful Mega Menu!
In fact, I bought an “Advanced Top Menu” for a PrestaShop project @ 40USD.
However, it is a very heavy in server resources, and very very complicated to implement.
Yours is very simple, very light, and perfectly compatible with the theme that I use.
And 10x times cheaper 
Thank you!
Thank you for the feedback. I am glad you liked it. Some rating will be highly appreciated
I guess the menu you purchased is “heavy”, because of the way it is populated with results from the database. If you fetch a category, retrieve its sub-categories and repeat that process for all categories you are using a lot of cpu resourses. You have to make one database call to retrieve everything and then separate categories and subcategories in your server-side code.
What does each individual link within the columns look like, does it highlight, underline, text change colour etc. What does it do?
Each link is element inside
Hello, I am new to css I tried adding a arrow.gif as a bullet but it wont show up on the sub menus :T
You can add arrow to submenu items using the following code:
.submenu ul li a {
background: url(arrow.png) no-repeat center left !important;
padding-left: 14px !important;
}
Hope this helps.
wow it did and added the hover to it as well thank you so much!
I have a quick question for you. I’m considering purchasing this item, but was wondering if it has the capability of pushing down the content below the dropdown or if it just goes over it? Thanks!
The menu can’t push down the content, it goes over it. The reason is that each submenu can have different height and it will cause your content to flicker up and down. However if you know that all submenus will have the same height you can offset the content from the menu (using margin-top).
Hey, nice dropdown menu! You should update the documentation that you have to insert line “
<div class="clearer" />” at the end of menu list block. Didn’t work for me without it.
Thanks for the feedback.
Yes, you are right, you need the clearer, because each menu column is left-floated. I will update the documentation to make that clear for future customers.