forked:fasion

fullscreen

Ayami_Dobuchi

Rating

useful

Application

Play
JavaScript
CSS
HTML
ReadMe
Snapshots

#nav
{
  padding: 0;
  margin: 0;
  list-style: none;
  height: 50px;
  position: relative;
  z-index: 200;
  font-family: arial, verdana, sans-serif;
  width: 750px;
}
#nav li.top
{
  display: block;
  float: left;
}
#nav li a
{
  display: block;
  float: left;
  height: 100px;
  width: 180px;
  border: 1px solid #888;
  border-color: #ddd #888 #000 #ccc;
  text-decoration: none;
  padding: 0;
  cursor: pointer;
}
#nav li a b
{
  margin-left: -999px; /* hide text */
}
#nav li a.Cas
{
  background: url(images/CASUAL.png);
}
#nav li a.Gal
{
   background: url(images/GAL.png); 
}
#nav li a.Fem
{
  background: url(images/feminine.jpg);
}
#nav li a.Office
{
  background: url(images/OFFICE.png);
}
#nav li:hover a, #nav a:hover
{
  background-position: 0 2px; /* horizontal vertical */
}
#nav table
{
  position: absolute;
  top: 0;
  left: 0;
  border-collapse: collapse;
  padding: 0;
  width: 0;
  height: 0;
  margin: -1px;
}
#nav .sub
{
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
#nav li:hover
{
  position: relative;
  z-index: 200;
}
#nav a:hover
{
  position: relative;
  white-space: normal;
  z-index: 200;
}

/* listの背景  */
#nav :hover ul.sub
{
  left: 0;
  top: 102px;
  background: #edb;
  width: 178px;
  height: auto;
  z-index: 300;
}

#nav :hover ul.sub li
{
  display: block;
  height: 250px;
  position: relative;
  float: left;
  width: 180px;
  font-weight: normal;
}

/* blockのマウスについて */
#nav :hover ul.sub li a
{
  display: block;
  height: 250px;
  width: 180px;
  border: 1px solid #888;
  border-color: #ddd #888 #000 #ccc;
  text-decoration: none;
  padding: 1;
  cursor: pointer;
}
#nav :hover ul.sub li a b
{
  position: absolute;
  left: -9999px;
  margin: 0;
}

/* Casual 
---------------------------*/
#nav :hover ul li a.casual
{
   background-color: #55AAEE;
   background-image: url(images/casual.jpg);
   background-repeat: no-repeat;
   background-position: center top;
}
#nav :hover ul li a.CasMod
{
 background-color: #55AAEE;
   background-image: url(images/casual_mode.jpg);
   background-repeat: no-repeat;
   background-position: center top;
}
#nav :hover ul li a.pears
{
  background: url(fruit/pears2.jpg);
}

/* Gal
---------------------------*/
#nav :hover ul li a.GalCas
{
	background-color: #000000;
   background-image: url(images/gal_casual.jpg);
   background-repeat: no-repeat;
   background-position: center;
   }
#nav :hover ul li a.carrots
{
  　background-color: #111111;  
   background-image: url(http://app.linkdata.org/asset/02b9a33e.gif);
   background-repeat: no-repeat;
   background-position: center;
}
#nav :hover ul li a.turnips
{
  　background-color: #111111;  
   background-image: url(images/casual_feminine.jpg);
   background-repeat: no-repeat;
   background-position: center;
}

/* Feminine
---------------------------*/

#nav :hover ul li a.FemCas
{
   background-color: #FFD6E0;  
   background-image: url(images/casual_feminine.jpg);
   background-repeat: no-repeat;
   background-position: center center;
}

#nav :hover ul li a.cauliflower
{  
　　background-color: #CCEEBB;  
   background-image: url(images/casual_feminine.jpg);
   background-repeat: no-repeat;
   background-position: center;
}

#nav :hover ul li a.beans
{
　　background-color: #CCEEBB;  
   background: url(images/s09_01.jpg);
   background-repeat: no-repeat;
   background-position: center;
}

/* Office
---------------------------*/
#nav :hover ul li a.OfficeCas
{
 	background-color: #CCEEBB;  
	background: url(images/Office_Cas.jpg);
   background-repeat: no-repeat;
   background-position: center center;
 
}

#nav :hover ul li a.cashews
{
  background: url(nuts/cashews2.jpg);
}
#nav :hover ul li a.walnuts
{
  background: url(nuts/walnuts2.jpg);
}

/* change image
----------------------------*/
/*
#nav :hover ul.sub li a:hover
{
  background-position: 0 50px;  
  position: relative;
}
*/

/* show text
-----------------------------*/
#nav :hover ul.sub li a:hover b
{
  left: 145px; /* 100xp */
  top: 15px;
  background: #fff;
  color: #000;
  border: 1px solid #888;
  display: none; /* block - hide text */
  width: 100px;
  height: 100px;
  text-align: center;
  font-size: 12px;
  line-height: 18px;
}

img.bgfruit 
{
  width:726px; /* 620 x 250 */
  height:1000px;  
}

/*
img.opacity
{       
  filter: alpha(opacity=40); 
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
  -moz-opacity: 0.40;
  opacity: 0.4; 
  
}
*/

<h1>Girl's Fashion Link</h1>
<div id="wrapper">
	<ul id="nav">
		<li class="top"><a href="#nogo" class="Cas"><b>Casual</b>
		
			</a>

<ul class="sub">
			<li><a href="#nogo" class="casual"><b>Casual</b></a></li>
			<li><a href="#nogo" class="CasMod"><b>CasualMode</b></a></li>
			<li><a href="#nogo" class="pears"><b>Pears</b></a></li>
		</ul>

</li>
		
		<li class="top"><a href="#nogo" class="Gal"><b>Gal</b>
			</a>

<ul class="sub">
			<li><a href="#nogo" class="GalCas"><b>GalCasual</b></a></li>
			<li><a href="#nogo" class="carrots"><b>Carrots</b></a></li>
			<li><a href="#nogo" class="turnips"><b>Turnips</b></a></li>
		</ul>
		
		
		</li>

<li class="top"><a href="#nogo" class="Fem"><b>Feminine</b>
		</a>

<ul class="sub">
			<li><a href="#nogo" class="FemCas"><b>FeminineCasual</b></a></li>
			<li><a href="#nogo" class="cauliflower"><b>Cauliflowers</b></a></li>
			<li><a href="#nogo" class="beans"><b>Green Beans</b></a></li>
		</ul>

</li>

<li class="top"><a href="#nogo" class="Office"><b>Office</b>
			</a>

<ul class="sub">
			<li><a href="#nogo" class="OfficeCas"><b>OfficeCasual</b></a></li>
			<li><a href="#nogo" class="cashews"><b>Cashews</b></a></li>
			<li><a href="#nogo" class="walnuts"><b>Walnuts</b></a></li>
		</ul>	
	
		
		</li>
	</ul>

Initial content

Fork this app as your new one download

Web Search

Contributor Send Message	Ayami_Dobuchi
Forked from (Parent App)	Ayami_Dobuchi 's fasion
Run count	188
Website
License
Fork count	0
Created date	Dec 28, 2012
Last update date	Jan 26, 2013