hey anki( i am sure you will solve me that problem )

i have installed to an HTML page this nav

Code:

<Style>
#menu {
  width: 960px;
  height: 40px;
  clear: both;
}

ul#nav {
  float: left;
  width: 960px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #dc0000 url(../img/menu-parent.png) repeat-x;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px; 
}

ul#nav li {
  display: inline;
}

ul#nav li a {
  float: left;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #880000;
  margin: 0;
  padding: 0 30px;
  background: #dc0000 url(../img/menu-parent.png) repeat-x;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;   
}

/* APPLIES THE ACTIVE STATE */
ul#nav .current a, ul#nav li:hover > a  {
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #330000;
  background: #bb0000;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
}

/* THE SUBMENU LIST HIDDEN BY DEFAULT */
ul#nav  ul {
  display: none;
}

/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
ul#nav li:hover > ul {
  position: absolute;
  display: block;
  width: 920px;
  height: 45px;
  position: absolute;
  margin: 40px 0 0 0;
  background: #aa0000 url(../img/menu-child.png) repeat-x; 
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px;
}

ul#nav li:hover > ul li a {
  float: left;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  line-height: 45px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #110000;
  margin: 0;
  padding: 0 30px 0 0;
  background: #aa0000 url(../img/menu-child.png) repeat-x;
}

ul#nav li:hover > ul li a:hover {
  color: #120000;
  text-decoration: none;
  text-shadow: none;
}

</style>
<div id="menu">

<ul id="nav">
<li><a href="#">Menu 1</a>
   <ul>
   <li><a href="#">Menu 1 Submenu item 1</a></li>
   <li><a href="#">Menu 1 Submenu item 2</a></li>
   <li><a href="#">Menu 1 Submenu item 3</a></li>
   </ul>
</li>

<li><a href="#">Menu 2</a>
   <ul>
   <li><a href="#">Menu 2 Submenu item 1</a></li>
   <li><a href="#">Menu 2 Submenu item 2</a></li>
   <li><a href="#">Menu 2 Submenu item 3</a></li>
   </ul>
</li>

<li><a href="#">Menu 3</a>
   <ul>
   <li><a href="#">Menu 3 Submenu item 1</a></li>
   <li><a href="#">Menu 3 Submenu item 2</a></li>
   <li><a href="#">Menu 3 Submenu item 3</a></li>
   </ul>
</li>   
</ul>

</div>

i took it from here http://www.skyrocketlabs.com/articles/css3-only-horizontal-dropline-tab-menu.php

however, i want to istall this "Javascript" like menu(i mean when i hover over Menu1,2,3) to onother HTML menu page,which already has background.So,what i did is:Took off the menu and added this one,also changed the background images to what i want and the HTML page messed up!
What should i do?I would also appreciate if you give me a relavant code just to do that hover thing which reveals onother menu.

Thanks

Here is a similar code which is simpler...

http://www.webartzforum.com/html-hyper-text-markup-language-f5/pop-out-thing-t799.htm#11862

damn,putted this instead my single links in my HTML page and now my page is rubbish!!!!!!!

---------------------------------------------

ermm..
i found a slider.forget this nav.

Code:


<style>

 /* common styling */
.menu {
font-family: verdana, sans-serif;
position:relative;
font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
margin-bottom:220px;
}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li {
position:relative;
float:left;
}

.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
width:25px;
height:100px;
font-weight:bold;
background:transparent url(http://www.iconspedia.com/uploads/8015409941334110314.png) top right no-repeat;
text-indent:-999px;
}

.menu ul li ul {
visibility:hidden;
position:absolute;
width:190px;
top:0;
left:0;
border:1px solid #444;
}

table {
margin:0; padding:0; border:0;
border-collapse:collapse;
font-size:1em;
}

/* specific to non IE browsers */
.menu ul li:hover a {
color:#fff;
width:215px;
}

.menu ul li:hover ul {
visibility:visible;
}

.menu ul li:hover ul li a {
display:block;
background:#eee;
border:0;
margin:0;
text-indent:0;
color:#333;
font-weight:normal;
font-size:0.9em;
height:auto;
line-height:1em;
padding:5px;
width:180px;
text-align:left;
}

.menu ul li:hover ul li a:hover {
background:#888;
color:#fff;
}

.menu ul li a:hover {
width:215px;
}
.menu ul li a:hover ul {
visibility:visible;
}
.menu ul li a:hover ul li a {
display:block;
background:#eee;
border:0;
margin:0;
text-indent:0;
color:#333;
font-weight:normal;
font-size:0.9em;
height:auto;
line-height:1em;
padding:5px;
width:190px;
w\idth:180px;
text-align:left;
}
.menu ul li a:hover ul li a:hover {
background:#888;
color:#fff;
}

</style>
<div class="menu">

<ul>
<li><a class="drop" href="../menu/index.html">MENU
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->

<table><tr><td>

   <ul>
   <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars advertising page</a></li>
   <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text around images</a></li>
   <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
   <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
   <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
   <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map for detailed information</a></li>
   <li><a href="../menu/bodies.html" title="fun with background images">fun with background images</a></li>
   <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
   <li><a href="../menu/em_images.html" title="em size images compared">em image sizes compared</a></li>
   </ul>

</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->

</li>
</ul>

</div>

works perfectly,but i just when i place it to my HTML pages it messes the HTML.i want it to be placed in the middle of the page,so when i paste it to the middle of the page there is a huge gap inside the page between the slider and the other side of the page.What should i edit to change that?


Double posts merged - ankillien

Give link to your page please.

there it is...the skin is Jalos Cribble,not copying anything just testing

http://garbage.forumotion.com/test-h3.htm
see what i mean anki?

May be I am getting what you are trying to say.
To remove the gap, you need to remove this line from this code...

/* common styling */
.menu {
font-family: verdana, sans-serif;
position:relative;
font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
margin-bottom:220px;
}

See the bolded part. Just remove it and the gap below the slider will be gone.

doesnt work.there are only links right now no slider or anything,just links.

I tested it on your page, it works

You just have to remove "margin-bottom:220px;" and save it.
The slider will work normally but the gap below it will be removed.

i tried it again.I removed that and still only links.

Have you done it on this page : http://garbage.forumotion.com/test-h3.htm ?
I can see it working on there.

yes i had!
but i dont want it to be inside!i want to be outside the border if it can be done,thats what i want!