droppdown css

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • ancii
    Medlem
    • 2012-05-09
    • 5
    #1

    droppdown css

    Hallå!
    Jag gör en droppdown menu i css, men får inte till en "submeny" som går ut åt höger.

    Tacksam för hjälp
    Tags: None
    • Gildebrand
      Medlem
      • 2009-06-06
      • 918
      #2
      Och vad vill du att vi ska göra? Var är koden?
      Kodfabriken - Webb- & apputveckling

        Comment

        • ancii
          Medlem
          • 2012-05-09
          • 5
          #3
          Ja, självklart! Var lite trött när jag satt igår
          Har fått ihop en submeny som går ut rätt, men den fungerar inte riktigt som jag vill, den highlightar båda boxarna som en stor när man håller på dreamhacksummer och inte när man håller på en av dem, den försvinner inte när jag byter till länken under, tacksam för hjälp!
          Code:
          <div id="top-menu-bg">

	<div id="top-menu">

	<form name="menyform">

				<div id="menuBar" >

					<div class="menu">

	

		<ul>

			<li><a id="" class="" href="start.html" onclick="updateObject(this); return false;">start</a></li>

			<li><a href="#" id="">Spelrecentioner</a>

				<ul>

					<li><a href="diablo.html" onclick="updateObject(this); return false;"><div style="font: 90% Trebuchet Unicode MS, Verdana;font-weight:bold;line-height:25px;">Diablo III</div></a></li>

					<li><a href="csgo.html" onclick="updateObject(this); return false;"><div style="font: 90% Trebuchet Unicode MS, Verdana;font-weight:bold;line-height:15px;">Counter-Strike Global Offensive</div></a></li>

					<li><a href="Gw2.html" onclick="updateObject(this); return false;"><div style="font: 90% Trebuchet Unicode MS, Verdana;font-weight:bold;line-height:25px;">Guild Wars 2</div></a></li>

					<li><a href="skyrim.html" onclick="updateObject(this); return false;"><div style="font: 90% Trebuchet Unicode MS, Verdana;font-weight:bold;line-height:15px;">The Elder Scrolls V: Skyrim</div></a></li>
					
					<li><a href="SW.html" onclick="updateObject(this); return false;"><div style="font: 90% Trebuchet Unicode MS, Verdana;font-weight:bold;line-height:15px;">Star Wars: The Old Republic</div></a></li>
					
					<li><a href="dota.html" onclick="updateObject(this); return false;"><div style="font: 90% Trebuchet Unicode MS, Verdana;font-weight:bold;line-height:25px;">Dota2</div></a></li>
					
					<li><a href="SC2.html" onclick="updateObject(this); return false;"><div style="font: 90% Trebuchet Unicode MS, Verdana;font-weight:bold;line-height:15px;">Starcraft 2: Wings of Liberty</div></a></li>
					
					<li><a href="LOL.html" onclick="updateObject(this); return false;"><div style="font: 90% Trebuchet Unicode MS, Verdana;font-weight:bold;line-height:25px;">League of Legends</div></a></li>
					
					<li><a href="HON.html" onclick="updateObject(this); return false;"><div style="font: 90% Trebuchet Unicode MS, Verdana;font-weight:bold;line-height:25px;">Heroes of Newerth</div></a></li>
					
					
					
					

			   </ul>

		  </li>

			<li><a href="#" id=""><div style="font:100% Trebuchet Unicode MS, Verdana;font-weight:bold;line-height:px;">Turneringar</div></a>

                <ul>

                	<li><a class="sub-menu"href="DHS.html" onclick="updateObject(this); return false;"><div style="font: 90% Trebuchet Unicode MS, Verdana;font-weight:bold;line-height:25px;">Dreamhack Summer</div></a>
						<ul class="sub-level">
						<li><a href="DHSD2.html" onclick="updateObject(this); return false;"><div style="font: 90% Trebuchet Unicode MS, Verdana;font-weight:bold;line-height:15px;">Dota2</div></a></li>
						<li><a href="DHSHON.html" onclick="updateObject(this); return false;"><div style="font: 90% Trebuchet Unicode MS, Verdana;font-weight:bold;line-height:15px;">Hon</div></a></li>
						</ul>
					</li>
					<li><a href="#">three</a></li>

					<li><a href="#">four</a></li>
						
                </ul>

          </li>

			<li><a href="" id="">three</a>

			<ul>

					<li><a href="#">one</a></li>

					<li><a href="#">two</a></li>

					<li><a href="#">three</a></li>

					<li><a href="#">four</a></li>

			   </ul>

			</li>

			<li><a href="#" id="" >four</a>

				<ul>

					<li><a href="#">one</a></li>

					<li><a href="#">two</a></li>

					<li><a href="#">three</a></li>

					<li><a href="#">four</a></li>

			   </ul>

		  </li>

			

						<li><a href="#" id="" >five</a>

				<ul>

					<li><a href="#">one</a></li>

					<li><a href="#">two</a></li>

					<li><a href="#">three</a></li>

					<li><a href="#">four</a></li>

			   </ul>

		  </li>

			

		</ul>

		</div>

	</div>

				</form>	

				</div>	

				</div>
          Code:
          .menu{
	border:none;
	border:0px;
	margin-left:px;
	padding:0px;
	font: 67.5% "Trebuchet Unicode MS", Verdana;
	font-size:14px;
	font-weight:bold;
	}
.menu ul{
	
	background:#DC DC DC;
	height:26px;
	width: 960px;
	list-style:none;
	margin:0;
	padding:px;
	margin-left:-70px;
	}
	.menu li{
	width:160px;
		float:left;
		padding-right:px;
		padding-left:px;
		padding-top:1px;
		background-color:;
		
		}
	.menu li a{
		
		background:#DCDCDC;
		color:#000000;
		display:block;
		font-weight:normal;
		line-height:20px;
		margin:0px;
		padding:0px 25px;
		text-align:center;
		text-decoration:none;
		font: 67.5% "Trebuchet Unicode MS", Verdana;
	font-size:14px;
	font-weight:bold;
	height:20px;
		
		
		}
		.menu li a:hover{
			background: #dcdcdc;
			color:#000000;
			text-decoration:none;
			border-left: black solid px;
			border-right: black solid px;
			border-bottom: black solid 1px;
			}
			
		.menu ul li:hover a{
			background: #e3e7e8;
			color:#000000;
			text-decoration:none;
			border-bottom: black solid px;
			}
	.menu li ul{
	
		background:#DCDCDC;
		display:none;
		height:auto;
		padding:0px;
		margin:0px;
		border:0px;
		position:absolute;
		width:160px;
		z-index:200;
		text-align:center;
		text-decoration:none;
		font: 67.5% "Trebuchet Unicode MS", Verdana;
		font-size:14px;
		font-weight:normal;
		line-height:20px;
		
		
		/*top:1em;
		/*left:0;*/
		}
	.menu li:hover ul{
		display:block;
		
		
		}
	.menu li li {
		
		display:block;
		float:none;
		margin:0px;
		padding:0px;
		width:160px;
		border-bottom: black solid px;
		}
	.menu li:hover li a{
		background:none;
		
		}
	.menu li ul a{
		display:block;
		height:30px;
		font-size:12px;
		font-style:normal;
		margin:0px;
		padding:0px 10px 0px 15px;
		text-align:left;
		}
		.menu li ul a:hover, .menu li ul li:hover a{
			background:#e3e7e8;
			border:0px;
			color:#0000000;
			text-decoration:none;
			border: black solid px;
			border-top:none;
			
			}
	.menu p{
		clear:left;
		}
	.top-item{
		background:#FFFFFF;
		border-right: black 1px solid;
	}

	ul.sub-level {
    display: block;
}

li:hover .sub-level {
    background: #dcdcdc;
    border: #fff solid;
    border-width: 1px;
    display: none;
    position: absolute;
    left: 160px;
    top: 0px;
}
ul.sub-level li {
    border: none;
    float:left;
    width:150px;
}
.sub-level li:hover ul{
		display:block;
		
		
		}
          Last edited by ancii; 2012-05-30, 13:03.

            Comment

            • Danne V
              Medlem
              • 2006-08-02
              • 7685
              #4
              Varför ska du uppfinna hjulet igen? Det finns ju tonvis med färdiga och gratis menyer som dessutom inte innehåller onödiga divvar eller inline-stilar.
              http://search.yippy.com/search?query...project=clusty
              Med vänlig hälsning från
              Danne
              ------
              Proformica.com Marknadsföring, webbdesign, webbhotell osv, mm..
              Sacred Skin Ny bok om Sak Yant, traditionell, spiritistisk thailändsk tatueringskonst
              Våga Vägra
              FaceBook

                Comment

                Previous template Next

                Oderland

                Collapse
                Working...