thxman
-
Posts
4 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by thxman
-
-
-
Have you tried playing around with these settings
The margin property can have from one to four values.
-
margin: 25px 50px 75px 100px;
- top margin is 25px
- right margin is 50px
- bottom margin is 75px
- left margin is 100px
-
margin: 25px 50px 75px 100px;
-
Hi All
I am not the best of css and html, so i hope you guys could help me with the css menu i am using :)as you can see i cant get me third submenu to show outside to the right. because i think its still connected to menulevel 1 and 2.and it need to somehow work alone with the right css commands. i think you understand what i mean
So here is my Code for HTML the menu
<div id="templatemo_menu_wrapper"><div class="container"><ul id="nav"><li><a href="javascript: document.location='index.html?state=' + getTrackingCode( );">Home</a></li><li><a href="../download.html?state=0">Download</a></li><li><a class="hsubs" >Gallery</a><ul class="subs"><li><a href="../gallery.html?state=0">Kristiansand (Norway)</a></li></ul></li><li><a >Tutorials</a><ul class="subs"><li><a href="../spineditor-tutorial.html?state=0">How to use SpinEditor</a><ul class="subs1"><li><a href="../spindoctor-tutorial.html?state=0">Tutorial part1</a></li></ul><li><a href="../spindoctor-tutorial.html?state=0">How to use SpinDoctor</a></li><li><a href="../manager-tutorial.html?state=0">How to use Manager</a></li></ul></li><li><a >Products</a><ul class="subs"><li><a href="../spineditor.html?state=0">SpinEditor</a></li><li><a href="../spindoctor.html?state=0">SpinDoctor</a></li><li><a href="../smartinfo.html?state=0">SmartInfo LED</a></li><li><a href="../qrobe.html?state=0">Q-Robe TicketPrinter</a></li></ul></li><li><a href="../videos.html?state=0">Videos</a></li><li><a href="../index.html?state=0">Back</a></li><div id="lavalamp"></div></ul></div></div>And here is the css code for the menu..container {background: url(../images/templatemo_menu_bg1.jpg) center no-repeat;}#nav,#nav ul { margin: 0; padding: 0;}#nav { background: url('menu_bg.png') no-repeat scroll 0 0 transparent; margin-left:auto; margin-right: auto; clear: both; font-size: 13px; height: 95px; position: relative; width: 967px;}#nav ul { background-color: #222; border:1px solid #222; border-radius: 0 5px 5px 5px; border-width: 0 1px 1px; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); left: -9999px; overflow: hidden; position: absolute; top: -9999px; z-index: 2; -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); /*-moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; -moz-transition: -moz-transform 0.1s linear; -ms-transition: -ms-transform 0.1s linear; -o-transition: -o-transform 0.1s linear; -webkit-transition: -webkit-transform 0.1s linear; transition: transform 0.1s linear;*/}#nav li { background: url('menu_line.png') no-repeat scroll right 5px transparent; float: left; position: relative;}#nav li a { color: #FFFFFF; display: block; float: left; font-weight: normal; height: 35px; padding: 17px 20px 0; position: relative; text-decoration: none; text-shadow: 1px 1px 1px #000000;}#nav li:hover > a { color: #00B4FF;}#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active { background: none repeat scroll 0 0 #121212; outline: 0 none;}#nav li:hover ul.subs { left: 0; top: 51px; width: 200px; -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1);}#nav li:hover ul.subs1 { position: absolute; left: 100px; top: 0px; width: 200px; -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1);}#nav ul li { background: none; width: 100%;}#nav ul li a { float: none;}#nav ul li:hover > a { background-color: #121212; color: #00B4FF;}#lavalamp { background: url('lavalamp.png') no-repeat scroll 0 0 transparent; height: 16px; left: 7px; position: absolute; top: 0px; width: 64px; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -webkit-transition: all 300ms ease; transition: all 300ms ease;}#lavalamp:hover { -moz-transition-duration: 3000s; -ms-transition-duration: 3000s; -o-transition-duration: 3000s; -webkit-transition-duration: 3000s; transition-duration: 3000s;}#nav li:nth-of-type(1):hover ~ #lavalamp { left: 7px;}#nav li:nth-of-type(2):hover ~ #lavalamp { left: 95px;}#nav li:nth-of-type(3):hover ~ #lavalamp { left: 188px;}#nav li:nth-of-type(4):hover ~ #lavalamp { left: 281px;}#nav li:nth-of-type(5):hover ~ #lavalamp { left: 377px;}#nav li:nth-of-type(6):hover ~ #lavalamp { left: 464px;}#nav li:nth-of-type(7):hover ~ #lavalamp { left: 544px;}#nav li:nth-of-type(8):hover ~ #lavalamp { left: 620px;}
CSS menu : Displaying third tier submenus properly with css
in CSS
Posted
Hi newseed, thanks for the response
But if i change to #nav li:hover ul.subs ul.subs1
Then its still the same with my menu. should it not be like this?